Table Component — Astro

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.

Add this component

The command below includes <strong>Table</strong>—run it in your project directory to install this component (and the CSS if needed). No prompts.

Choose your package manager — click a tab to select, then copy the command.

npm pnpm yarn bun

bash bash Copy code

npx rizzo-css add Table

bash bash Copy code

pnpm dlx rizzo-css add Table

bash bash Copy code

npx rizzo-css add Table

bash bash Copy code

bunx rizzo-css add 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

Table sorting/filtering script runs after DOM ready when the component is used.

---
import Table from '../components/astro/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' },
  ]}
/>

<!-- Table HTML with thead/tbody; optional data-sortable + script from package/vanilla docs for sorting. -->

<script>
  import { Table } from '$lib/rizzo';
</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' },
  ]}
/>

<script setup>
import Table from '@/components/rizzo/Table.vue';
</script>

<template>
  <Table
    :columns="[
      { key: 'name', label: 'Name', sortable: true },
      { key: 'value', label: 'Value', sortable: true, type: 'number' },
    ]"
    :data="[
      { name: 'Alpha', value: 10 },
      { name: 'Beta', value: 20 },
    ]"
    caption="Demo table"
    striped
  />
</template>

import { Table } from './components/react';

<Table
  columns={[
    { key: 'name', label: 'Name', sortable: true },
    { key: 'value', label: 'Value', sortable: true, type: 'number' },
  ]}
  data={[
    { name: 'Alpha', value: 10 },
    { name: 'Beta', value: 20 },
  ]}
  caption="Demo table"
  striped
/>

With Sorting (number column)

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

<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.

<Table
  caption="Filterable list"
  columns={[...]}
  data={[...]}
  filterable
  filterPlaceholder="Search…"
/>

Without Stripes

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.

Other frameworks: Vanilla · Svelte · Vue · React