Table — Vanilla

Data table with vanilla HTML. Same BEM and behavior as Astro: sorting, filtering, striped rows. Ensure Rizzo CSS is loaded.

Table

Data table with the same BEM classes and behavior as the Astro Table: table, table__wrapper, table__table, table__caption, table__head, table__body, table__row, table__cell, table__cell--head. Add table--striped for alternating rows, table--sortable for sortable headers, table--filterable for the filter input. Use data-table-sortable="true" and data-table-filterable="true" on the wrapper so the script below initializes sorting and filtering.

Basic

Same as Astro: sortable column headers (click or Enter/Space) and optional filter input with icon.

Live example
Sample data
AliceDeveloperActive
BobDesignerActive
CarolManagerAway

With sorting (number column)

Sortable column headers: click or Enter/Space. Set data-type="number" on th for numeric sort.

Live example
Scores
Alice923
Bob872
Carol954

With filter

Filter input above the table: rows are shown/hidden by matching text in any cell.

Live example
Filterable list
AliceDeveloperActive
BobDesignerActive
CarolManagerAway
DaveDeveloperActive

Without stripes

Live example
Plain table
12
34

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; data-type="number" on th for numeric sort.
  • Filtering — Optional filter input with Filter icon; rows shown/hidden by matching text in any cell.
  • Striped rows — Add table--striped for alternating row background.
  • Responsive — Table wrapper scrolls horizontally on small screens.

Astro / Svelte: Astro · Svelte

← Back to Vanilla components