Data Table

Native tables with responsive overflow, density and border variants, sortable headers, row states, totals, and sticky headers.

<data-table striped hover density="compact" tabindex="0"
  aria-label="Scrollable order queue"
  style="--table-min-width: 42rem">
  <table>
    <caption>Orders requiring attention</caption>
    <thead>
      <tr>
        <th scope="col"><input type="checkbox" aria-label="Select all orders" /></th>
        <th scope="col">Order</th>
        <th scope="col">Customer</th>
        <th scope="col" data-numeric>Total</th>
        <th scope="col" data-actions>Actions</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><input type="checkbox" aria-label="Select order 1848" /></td>
        <th scope="row">#1848</th>
        <td>Northstar Labs</td>
        <td data-numeric>$1,284.00</td>
        <td data-actions><button aria-label="Open order 1848">⋯</button></td>
      </tr>
    </tbody>
  </table>
</data-table>

<th scope="col" aria-sort="descending">
  <button type="button" data-table-sort>
    Revenue <span data-sort-icon aria-hidden="true"></span>
  </button>
</th>

<td data-numeric data-sort-value="184200">$184,200</td>

<tfoot>
  <tr>
    <th scope="row">Total</th>
    <td data-numeric>2,652</td>
    <td data-numeric>$127,530</td>
    <td data-numeric>+5.6%</td>
  </tr>
</tfoot>

<thead>
  <tr>
    <th scope="col" rowspan="2">Team</th>
    <th scope="colgroup" colspan="2">Volume</th>
    <th scope="colgroup" colspan="2">Quality</th>
  </tr>
  <tr>
    <th scope="col">Received</th>
    <th scope="col">Resolved</th>
    <th scope="col">CSAT</th>
    <th scope="col">SLA</th>
  </tr>
</thead>

<data-table sticky-header tabindex="0"
  aria-label="Scrollable low-stock inventory"
  style="--table-max-block-size: 18rem; --table-min-width: 42rem">
  <table>...</table>
</data-table>

<tbody>
  <tr>
    <td colspan="4" data-table-message>
      <strong>No matching invoices</strong>
      <p>Clear one or more filters to see results.</p>
      <button type="button">Clear filters</button>
    </td>
  </tr>
</tbody>

CSS Tags enhances native table elements instead of replacing their accessibility model. Keep <table>, <caption>, <th>, and <td> in the markup; use the component API for presentation and overflow.

Host model

Use data-table or .data-table directly on a small native table. When a data set needs horizontal overflow, keyboard scrolling, or a sticky header, put the native table inside any of the equivalent wrapper hosts:

<data-table tabindex="0" aria-label="Scrollable orders">
  <table>...</table>
</data-table>

<div data-table-scroll tabindex="0" aria-label="Scrollable orders">
  <table>...</table>
</div>

<div class="table-scroll" tabindex="0" aria-label="Scrollable orders">
  <table>...</table>
</div>

Each wrapper now styles its direct table automatically. Add tabindex="0" only when overflow is possible, and provide a label when nearby text does not already name the region.

<table data-table="true" class="table-borderless">
  <caption>Feature rollout</caption>
  <thead>
    <tr>
      <th scope="col">Feature</th>
      <th scope="col">Audience</th>
      <th scope="col" data-numeric="true">Enabled</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">New billing</th>
      <td>Team plans</td>
      <td data-numeric="true">82%</td>
    </tr>
    <tr>
      <th scope="row">Search v2</th>
      <td>All accounts</td>
      <td data-numeric="true">100%</td>
    </tr>
  </tbody>
</table>

Responsive overflow

Set --table-min-width only when wrapping would make a wide data set difficult to scan. The wrapper owns scrolling while the table keeps its native display:

<data-table
  tabindex="0"
  aria-label="Scrollable order history"
  style="--table-min-width: 48rem"
>
  <table>...</table>
</data-table>

The wrapper has a visible focus ring, contained overscroll, and a themeable thin scrollbar. A direct table[data-table] still receives a small-screen overflow fallback when a wrapper cannot be added.

Variants

Variants work on either the table or wrapper and have custom-attribute, data-*, and class forms.

Hover is opt-in and only activates on devices that actually support hover. Rows containing keyboard focus receive the same treatment.

Cell and row hooks

• data-numeric / .table-numeric aligns values to the inline end and uses tabular figures.
• data-actions / .table-actions keeps a narrow action column aligned to the inline end.
• data-nowrap / .table-nowrap protects dates, identifiers, and short status values from wrapping.
• data-table-message styles a spanning empty, loading, or error cell.
• A body row containing a checked checkbox or radio receives the selected-row surface. data-selected is available when application state is mirrored in the DOM.
• <tfoot> receives a stronger separator and summary surface automatically.

Sorting

Put the current sort direction on the header cell, not the button. The button owns interaction; an aria-hidden icon reflects the header state:

<th scope="col" aria-sort="descending">
  <button type="button" data-table-sort>
    Revenue
    <span data-sort-icon aria-hidden="true"></span>
  </button>
</th>

CSS Tags makes that button fill the header cell and supplies distinct unsorted, ascending, and descending icons. Your application must reorder the rows and move aria-sort to the active header. The interactive revenue example above does both. Only one header should carry aria-sort at a time, following the WAI sortable table pattern.

document.querySelectorAll("table[data-sortable]").forEach((table) => {
  table.addEventListener("click", (event) => {
    const button = event.target.closest("button[data-table-sort]");
    if (!button) return;

    const header = button.closest("th");
    const column = header.cellIndex;
    const direction = header.getAttribute("aria-sort") === "ascending" ? "descending" : "ascending";
    const factor = direction === "ascending" ? 1 : -1;
    const rows = [...table.tBodies[0].rows];
    const value = (row) => row.cells[column].dataset.sortValue
      ?? row.cells[column].textContent.trim();

    table.querySelectorAll("th[aria-sort]").forEach((cell) => cell.removeAttribute("aria-sort"));
    header.setAttribute("aria-sort", direction);
    rows.sort((a, b) => value(a).localeCompare(value(b), undefined, { numeric: true }) * factor);
    table.tBodies[0].append(...rows);
  });
});

Sticky headers

Sticky headers require a vertically constrained scroll wrapper. Set its maximum height with --table-max-block-size:

<data-table
  sticky-header
  tabindex="0"
  aria-label="Scrollable inventory"
  style="--table-max-block-size: 20rem; --table-min-width: 42rem"
>
  <table>...</table>
</data-table>

Theme tokens

.billing-table {
  --table-min-width: 44rem;
  --table-layout: auto;
  --table-cell-padding-block: 0.75rem;
  --table-cell-padding-inline: 1rem;
  --table-heading-bg: var(--table-heading-background);
  --table-row-hover-bg: var(--table-hover-background);
  --table-row-selected-bg: var(--table-selected-background);
  --table-footer-bg: var(--table-footer-background);
  --table-max-block-size: 24rem;
}

Additional component tokens include --table-bg, --table-text, --table-border-width, --table-border-color, --table-divider-width, --table-divider-color, --table-radius, --table-font-size, --table-line-height, --table-caption-*, --table-heading-*, --table-stripe-bg, --table-scrollbar-*, and --table-message-*.

Accessibility checklist

• Use <caption> when a visible name helps identify the dataset.
• Add scope="col" and scope="row" for simple tables; use colgroup, rowgroup, id, and headers for more complex relationships.
• Keep sorting controls as real buttons and update aria-sort with the rendered order.
• Give selection checkboxes an accessible name that identifies their row.
• Make scroll wrappers keyboard reachable and visibly focused.
• Do not use a table for page layout or replace native table structure with responsive card markup when the content remains tabular.