Table — Svelte

Table component

An accessible data table for displaying tabular data. Supports column header sorting (click or Enter/Space), optional filter input to search across all columns, striped rows, and responsive horizontal scroll. Same styles and functionality as the Astro Table.

Props

• columns (array, required) — Column definitions: { key, label, sortable?, type? }. type is 'string' or 'number' for sort order.
• data (array, required) — Row data: array of objects with keys matching column key.
• caption (string, optional) — Table caption for accessibility.
• sortable (boolean, optional) — Enable column header sorting (default: true).
• filterable (boolean, optional) — Show filter input above table (default: false).
• filterPlaceholder (string, optional) — Placeholder for filter input (default: "Filter table…").
• striped (boolean, optional) — Striped rows (default: true).
• class (string, optional) — Additional CSS classes.

Basic usage

With sorting (number column)

Set type: 'number' on columns that should sort numerically.

With filter

Use filterable to show a search input that filters rows by any column.

Without stripes

Features

• Accessible — Semantic table, caption, scope="col", aria-sort on sortable headers, keyboard (Enter/Space) to sort.
• Sorting — Sortable column headers with Sort icon; click to sort ascending/descending; type: 'number' for numeric sort.
• Filtering — Optional filter input with Filter icon; rows shown/hidden by matching text in any cell.
• Striped rows — Optional alternating row background (default: true).
• Responsive — Table wrapper scrolls horizontally on small screens.

Usage

<script>
  import Table from './Table.svelte';
</script>

<Table
  caption="Sample data"
  columns={[
    { key: 'name', label: 'Name' },
    { key: 'role', label: 'Role' },
    { key: 'status', label: 'Status' },
  ]}
  data={[
    { name: 'Alice', role: 'Developer', status: 'Active' },
    { name: 'Bob', role: 'Designer', status: 'Active' },
    { name: 'Carol', role: 'Manager', status: 'Away' },
  ]}
/>

Astro & Vanilla: Astro · Vanilla