# Data table

Data table: a free component, built on your design tokens, to use for a list of records an assistant or a report fills in, such as invoices, orders or transactions. A plain table of up to 50 rows with a title and a summary line, sortable by any column and shown ten rows to a page.

Prompt: Add the OpenDesigner component data-table to this project: https://opendesigner.dev/library/data-table.html. Keep its markup and states; map its --ds-* variables to my tokens.

States: hover row, sorted ascending, sorted descending, first and last page, first column fixed on a phone.

Accessibility: A real table with column headers; each header is a button that sorts the rows and announces the order through aria-sort, and the page range is a status line.

File: https://opendesigner.dev/library/data-table.html

Catalog entry (parts, data limits, states, tokens): https://opendesigner.dev/library/data-table.json

Download: `curl -fsSLo data-table.html https://opendesigner.dev/library/data-table.html`