Table

Table shows rows of data that people compare and scan, on a native table. It has a root hook, an optional scroll container, a numeric alignment hook, two sizes, and an optional sticky header. It ships no JavaScript.

Public web API

One root hook on a <table> and an optional scroll container around it.

<div data-bitsy-table-scroll role="region" aria-labelledby="members-caption" tabindex="0">
  <table data-bitsy-table>
    <caption id="members-caption">Team members</caption>
    <thead>
      <tr>
        <th scope="col">Name</th>
        <th scope="col" data-bitsy-align="end">Seats</th>
      </tr>
    </thead>
    <tbody>
      <tr data-bitsy-table-selected>
        <th scope="row">Ada Lovelace</th>
        <td data-bitsy-align="end">12</td>
      </tr>
    </tbody>
  </table>
</div>

data-bitsy-size="sm" on the table for compact rows; omit it for the default.
data-bitsy-align="end" on a <th> or <td> aligns numbers to the end with tabular figures.
data-bitsy-table-selected on a <tr> marks a row the page has chosen.
data-bitsy-table-sticky on the table pins the header row inside a tall scroll container.
Give the table a caption, use scope on every header, and make a scrolling container focusable with a label.

Members table

Row headers, a numeric column, a selected row, row actions with Button, and a footer total. Hover a row to see the hover fill.

Team members
Name	Role	Status	Seats	Monthly cost
Ada Lovelace	Admin	Active	12	$480
Grace Hopper	Editor	Active	4	$160
Alan Turing	Viewer	Invited	1	$40
Katherine Johnson	Editor	Active	7	$280
Margaret Hamilton	Admin	Suspended	9	$360
Total			33	$1,320

Sizes

sm cuts the cell padding for dense admin views. The caption is hidden here because the section already has a heading.

Compact team members
Name	Role	Status	Seats	Monthly cost
Ada Lovelace	Admin	Active	12	$480
Grace Hopper	Editor	Active	4	$160
Alan Turing	Viewer	Invited	1	$40

Sticky header

With data-bitsy-table-sticky the header row stays visible while the container scrolls. The container needs a set height.

Sticky header
Name	Role	Status	Seats	Monthly cost
Ada Lovelace	Admin	Active	12	$480
Grace Hopper	Editor	Active	4	$160
Alan Turing	Viewer	Invited	1	$40
Katherine Johnson	Editor	Active	7	$280
Margaret Hamilton	Admin	Suspended	9	$360
Ada Lovelace 2	Admin	Active	12	$480
Grace Hopper 2	Editor	Active	4	$160
Alan Turing 2	Viewer	Invited	1	$40
Katherine Johnson 2	Editor	Active	7	$280
Margaret Hamilton 2	Admin	Suspended	9	$360
Ada Lovelace 3	Admin	Active	12	$480
Grace Hopper 3	Editor	Active	4	$160

Scrolling

A table wider than its container scrolls sideways. Tab to the container and use the arrow keys.

Wide table in a narrow container
Name	Role	Status	Seats	Monthly cost
Ada Lovelace	Admin	Active	12	$480
Grace Hopper	Editor	Active	4	$160
Alan Turing	Viewer	Invited	1	$40

Bit boundary

Table is for data with the same fields in every row. Page layout, short lists of items, and editable grids with arrow-key cell navigation are not tables. Sorting, filtering, selection checkboxes, and pagination belong to the data-table toolbar Pattern. Table ships no JavaScript.