Advanced Table

Sortable, filterable data table using semantic <table>. One root class for variants, native HTML for structure.

Sortable Table

Status
Alice Johnsonalice@example.comAdminActive
Bob Chenbob@example.comEditorAway
Carol Daviscarol@example.comViewerSuspended
 
<table data-variant="striped">
  <thead>
    <tr>
      <!-- Sort button inside th — semantic, keyboard accessible -->
      <th scope="col">
        <button type="button">Name <span aria-hidden="true">↑</span></button>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr><td>Alice</td><td><span class="badge success">Active</span></td></tr>
  </tbody>
</table>

Search Filter

NameEmailRole
Alice Johnsonalice@example.comAdmin
Bob Chenbob@example.comEditor
Carol Daviscarol@example.comViewer
 
function filterTable(query) {
  const q = query.toLowerCase();
  document.querySelectorAll('#filterable-table tbody tr').forEach(row => {
    const text = row.textContent.toLowerCase();
    row.hidden = q && !text.includes(q);
  });
}

Table Variants

AttributeEffect
data-variant="striped"Alternating row background
data-variant="bordered"Borders on all cells
data-variant="compact"Reduced cell padding

Accessibility

  • Always include scope="col" or scope="row" on <th> elements
  • Sort buttons inside <th> need aria-sort="ascending" or "descending"
  • Use aria-label or <caption> to describe the table's purpose
  • Wrap in a scrollable container on mobile: <div><table>...</table></div>

Features

  • Semantic Structure - Built with native HTML5 elements for maximum reliability.
  • Theme Aware - Automatically adapts to all 22 Axiom01 themes via OKLCH tokens.
  • Fully Responsive - Scales perfectly from mobile to desktop screens.
  • No JS Dependency - Core functionality relies on pure CSS for maximum performance.
  • Customizable - Easily extendable via Axiom01's design tokens and modifiers.

Use Cases

The Advanced Table component is designed for versatile implementation across modern web applications. Ideal scenarios include:

  • Dashboards & Admin Panels - Structured data presentation and interface control.
  • Content Management Systems - Organizing complex information hierarchies and media.
  • E-Commerce Platforms - Enhancing product discovery and user workflows.
  • Marketing Sites - Highlighting key product offerings cleanly and effectively.
  • SaaS Applications - Delivering native-feeling, responsive app experiences.