kit

Data table

A native table for rows of records, with right-aligned tabular figures, a scroll area, sticky headers and sortable columns.

Tier 2 · behaviour Native table beta

Example

NameStatusCountAmountUpdated
Item 1Online1,024420.002 Mar 2026
Item 2Away861,850.5014 Jan 2026
Item 10Offline12,40096.0020 May 2026
Item 3Inactive00.0031 Dec 2025
Total13,5102,366.50
Show the markup 
<div class="kit-table-wrap demo-fill" role="region" aria-label="Example table" tabindex="0">
  <table class="kit-table" data-sortable>
    <thead><tr><th scope="col">Name</th><th scope="col">Status</th><th scope="col" data-numeric data-sort="number">Count</th><th scope="col" data-numeric data-sort="number">Amount</th><th scope="col" data-sort="date">Updated</th></tr></thead>
    <tbody>
      <tr><th scope="row">Item 1</th><td><span class="kit-status" data-tone="good">Online</span></td><td data-numeric data-value="1024">1,024</td><td data-numeric data-value="420">420.00</td><td data-value="2026-03-02">2 Mar 2026</td></tr>
      <tr><th scope="row">Item 2</th><td><span class="kit-status" data-tone="warn">Away</span></td><td data-numeric data-value="86">86</td><td data-numeric data-value="1850.5">1,850.50</td><td data-value="2026-01-14">14 Jan 2026</td></tr>
      <tr><th scope="row">Item 10</th><td><span class="kit-status" data-tone="bad">Offline</span></td><td data-numeric data-value="12400">12,400</td><td data-numeric data-value="96">96.00</td><td data-value="2026-05-20">20 May 2026</td></tr>
      <tr><th scope="row">Item 3</th><td><span class="kit-status">Inactive</span></td><td data-numeric data-value="0">0</td><td data-numeric data-value="0">0.00</td><td data-value="2025-12-31">31 Dec 2025</td></tr>
    </tbody>
    <tfoot><tr><th scope="row">Total</th><td></td><td data-numeric>13,510</td><td data-numeric>2,366.50</td><td></td></tr></tfoot>
  </table>
</div>

Usage

<div class="kit-table-wrap" role="region" aria-label="Items" tabindex="0">
  <table class="kit-table" data-sortable>
    <thead><tr><th scope="col">Name</th><th scope="col" data-numeric data-sort="number">Count</th></tr></thead>
    <tbody><tr><th scope="row">Item one</th><td data-numeric data-value="1024">1,024</td></tr></tbody>
  </table>
</div>
Attribute On Does
data-numeric th, td right-aligns in tabular figures
data-sortable table header buttons that sort the rows (table-sort.js, in kit.js)
data-sort th text (natural: Item 2 before Item 10), number, date, or none
data-value td the value to sort by, when the text is formatted ("1,024", "3 Nov")
data-striped, data-sticky table zebra rows; a header that stays put as the area scrolls (with data-max-height on the wrap)
data-wrap th, td lets long text wrap
aria-selected="true" tr highlights a chosen row

Sorting rearranges the rows already in the page; for thousands of rows, or sorting on the server, use the data grid (coming next) or sort the data yourself on the sort event.

Accessibility

  • It's a real <table>: screen readers announce rows, columns and headers. Use <th scope="col"> for column headers and <th scope="row"> for each row's name.
  • The wrap is a focusable, labelled region, so keyboard users can scroll a wide table (WCAG 2.1.1).
  • Sort buttons say their column; the header's aria-sort says the current order, and each sort is announced ("Sorted by Count, descending").
  • Don't put interactive grids of cells in a table; that's the data grid's job.