Data table

Unreleased

These changes are merged and will be in the next release of the packages.

• MinorData table: a selected row is marked by a bar at the start of its first cell as well as by its fill, 3px wide in primary-text, as the Sidebar marks its active item, so a chosen row never rests on colour alone. In a pinned first cell the bar stays in view while the rest of the row scrolls sideways. Its grade stays tested.
• MinorData table: group rows with groups and getGroupId. Each group is its own tbody under a heading row, a th with scope="rowgroup" across every column, with the group's label, its count from groupCount and an optional description. A collapsible group's label and count are a button with aria-expanded, and a collapsed group keeps its heading and count. Collapse state works controlled, with collapsedGroups and onCollapsedGroupsChange, or uncontrolled, with defaultCollapsedGroups. The groups keep the order they are given, a column's sort applies within each group, and a group can take the info tone or be marked not collapsible. A group's rows take a lighter shade of its heading's fill, pinned columns stay pinned inside groups, and a heading's words stay in view while the table scrolls sideways. Its grade stays tested.
• PatchData table: a sortable column's heading is the same text size as a plain heading. It was the small button's size, so sorted and plain headings looked different in one row.
• MinorData table: pinned columns, fixed column widths and cells edited in place. dataTableFeatures now registers TanStack Table's column pinning and column sizing. A column pinned with columnPinning stays at its side while the table scrolls sideways, on an opaque background that takes the row's fill, and the pinned column nearest the scrolling ones shows an edge once something is under it. The table measures the pinned columns, so their offsets are right at either density. Pinned columns stop sticking when together they would cover more than two thirds of the table's box. A column with a size keeps that width in pixels, and a column without one fits its content as before. Add DataTableEditableCell: text edited in an Input in place, or any value edited in a popover through editor, such as a date chosen from a Calendar. Enter or leaving saves, Escape cancels, focus returns to the cell, the row keeps its height, and the change is announced politely. The data table's registry item now depends on Input and Popover. Its grade stays tested.
• MinorData table: onRowClick is called when a row is clicked anywhere but on a control inside it, such as a link, a checkbox or a cell edited in place, and not when the click ends a selection of text or comes from a popover a cell opened. The row gets cursor-pointer and data-clickable, and stays a plain row with no tab stop: put a button in each row that does the same, for the keyboard and a screen reader. DataTableEditableCell documents disabled, which shows the cell faded and not pressable, with aria-describedby for the reason. Its grade stays tested.
• MinorData table: rowLines sets how many lines of text every row holds, 2 or 3, and makes every row that tall. DataTableCellText is text in a cell cut to the row's lines with an ellipsis, or a line sooner with reserveLines={1}, and DataTableEditableCell cuts what it shows at rest the same way. useDataTableRowLines() gives a cell the row's lines, so it can lay itself out by them, and the table carries data-row-lines. A column's meta.width takes a CSS width in place of size, such as a width in em that follows the density. Its grade stays tested.

0.1.0

• MinorData table, on TanStack Table 9, from its own entry point @cadence-clinical/ui/data-table with TanStack Table as an optional peer dependency. DataTable renders a table you build with useTable and dataTableFeatures; DataTableColumnHeader, selectionColumn(), DataTablePagination and DataTableViewOptions sort, select, page and show columns, with the state in words as well as marks.
• PatchA Data table with a sortable column no longer scrolls sideways when its columns fit. The sort button hung past the last column's padding, which put a scrollbar under every table. It now fills its heading cell, and its words line up with a plain heading's to the pixel.
• PatchData table: DataTableColumnHeader, DataTablePagination and DataTableViewOptions take the props of the element they render, not only className, and merge className last. The column header's onClick runs before it sorts. DataTableViewOptionsProps is exported. The rows-per-page label's id comes from useId, so two paginations on one page no longer share one, and a column heading that cannot sort carries data-slot="data-table-column-header".