Table Component — Astro

Accessible data table with sorting and optional filtering

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.

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

Live Example
Sample data
Alice Developer Active
Bob Designer Active
Carol Manager Away
astro astro 
---
import Table from '../../components/Table.astro';
---

<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' },
  ]}
/>

With Sorting (number column)

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

Live Example
Scores
Alice 92 3
Bob 87 2
Carol 95 4
astro astro 
<Table
  caption="Scores"
  columns={[
    { key: 'name', label: 'Name' },
    { key: 'score', label: 'Score', type: 'number' },
    { key: 'level', label: 'Level', type: 'number' },
  ]}
  data={[
    { name: 'Alice', score: 92, level: 3 },
    { name: 'Bob', score: 87, level: 2 },
    { name: 'Carol', score: 95, level: 4 },
  ]}
/>

With Filter

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

Live Example
Filterable list
Alice Developer Active
Bob Designer Active
Carol Manager Away
Dave Developer Active
astro astro 
<Table
  caption="Filterable list"
  columns={[...]}
  data={[...]}
  filterable
  filterPlaceholder="Search…"
/>

Without Stripes

Live Example
Plain table
1 2
3 4

Features

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

Svelte & Vanilla: Svelte · Vanilla: same HTML and BEM as in Usage above; add minimal JS for sorting/filter if needed.