# Data table

The kit’s table with the tools a working one needs: headers that sort, a filter well, a check key on every row with one in the header that selects them all and sinks half way when only some are chosen, and a header that stays at the top while the rows scroll under it. While rows are chosen a plate slides out of a slot under the tools, its lamp lit, carrying what can be done to them. Without the script it is the plain table.

Kit part · With the Kit · https://tactileui.dev/parts/data-table

> The code and styling for this part come with the Tactile UI Kit, which is in the Founder Pass. Sign in if you have it. Sign in: https://tactileui.dev/auth/sign-in The price: https://tactileui.dev/pricing

## Anatomy

It takes the table it is given and adds to it. A first column of native checkboxes goes into the head and every row. Sorting is the kit table’s own, done here so it moves only rows the filter leaves.

## Variants

- Filter and sort, no selection
- Selection only
- No script: the plain table

## States

- None chosen
- Some chosen
- All chosen

## Props and options

| Name | Kind | Description |
| - | - | - |
| select · filter | attribute | A check key on every row and one in the header; a filter well over the table. Leave either out for a table without it. |
| label · noun · placeholder | attribute | What the rows are, for the filter’s name (“Filter services”); the word for one row and for many in the count (“service, services”); an example for the well. |
| tr[data-key] | attribute | Its index when there is none. |
| th[data-sort] · td[data-value] | attribute | The table’s own sorting, kept to the rows the filter leaves. aria-sort says which way. |
| Shift with a click | pointer | Chooses or clears the run of rows in view from the last one pressed. |
| dataTableKey · dataTableOrder · dataTableMatch · dataTableAllState · dataTableSay | function | The rules, pure: a cell’s sort key, the order of the rows, whether a row matches, the select-all key’s state and the words in the count and the bar. |

## Usage notes

Type in the filter: “payments”, “degraded”, “media fail”. Press a header to sort by it, again to turn it round. Tick rows, or Shift-click to tick a run of them; the key in the header selects every row in view. Pause or Restart what you chose.

## Accessibility

- It stays a real table.
- Every check key is a native checkbox named after its row (“Select webhooks”).
- The filter well is a search field named after the rows and labelled “Filter”. Escape clears it.
- A sort, a filter and a change of choice are each said once in a polite live region: “Sorted by p95, descending”, “4 of 12 rows”, “3 selected, 1 hidden by the filter”.
- The bar is a group named “Selected rows”; its lamp is never the only signal, the count is in words beside it.
- The rows scroll inside their box with the header held at its top; on a phone the box scrolls sideways too, never the page.
- With reduced motion the bar is there at once instead of sliding out.

## Related parts

- [Table](https://tactileui.dev/parts/table): Rows of data with printed column labels, figures right-aligned in columns, and status in lamps with words.
- [Checklist](https://tactileui.dev/parts/checklist): The kit’s check keys in nested groups. A group’s key is the sum of its items: all done, none, or some, and some is a key sunk halfway with a bar across it. The head counts the items, “3 of 7”, and its lamp lights when they are all done.
- [Pagination](https://tactileui.dev/parts/pagination): Pages for tables and lists: numbered keys in a tray with the current page latched down, seven slots so the row never changes width. Compact, it is a transport with a track counter.