Public pages

DataTable

Records with titles at the top, like a spreadsheet you can't break: press a title to sort by it, press it again to flip the order.

Preview

Props

Guidelines

Records with titles at the top, like a spreadsheet you can't break: press a title to sort by it, press it again to flip the order. Used for Projects.

Provide: label, columns (key, label, and align, sortable, width, hideOnPhone as needed) and rows (key, cells, and href and onOpen). For sorting: sortKey, sortDir, onSort, and sortWords so the header says the order in words ("Soonest first").

• The first column is the record's name. It links to the record's page, so Tab reaches each row once and Enter opens it.
• A plain click anywhere on a row calls onOpen (open it in a drawer, so the list stays where it is). Command, Control or middle click goes to the page.
• Press a title once to sort by it in its natural order, again to flip. The sorted title is bold with an arrow; the others show the arrow on hover. aria-sort says the order to screen readers.
• Numbers, money and dates you compare line up at the end (align: 'end').
• Status is never color alone: put a Badge with words in its cell.
• It sits inside a panel on a solid surface, never on the backdrop. On phones each row stacks into a short card; leave secondary columns out with hideOnPhone, and offer sorting in Filter and sort.