feat: add Table component

package.json

@@ -97,6 +97,7 @@
         "@semantic-release/git": "10.0.1",
         "@storybook/addon-docs": "10.5.7",
         "@storybook/react-vite": "10.5.7",
+        "@tanstack/react-table": "9.1.2",
         "@testing-library/dom": "10.4.1",
         "@testing-library/jest-dom": "7.0.1",
         "@testing-library/react": "16.3.2",

src/index.ts

@@ -46,6 +46,7 @@ export * from './badge'
 export * from './expansion-panel'
 export * from './menu'
 export * from './modal'
+export * from './table'
 export * from './tabs'
 export * from './tooltip'
 

src/table/index.ts

@@ -0,0 +1 @@
+export * from './table'

src/table/sort-indicator.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react'
+
+function SortIndicator() {
+    return (
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" focusable="false">
+            <path
+                d="M3.64645 7.85352C3.45118 7.65825 3.45118 7.34175 3.64645 7.14648L7.64645 3.14648C7.84171 2.95122 8.15822 2.95122 8.35348 3.14648L12.3535 7.14648C12.5487 7.34175 12.5487 7.65825 12.3535 7.85352C12.1582 8.04878 11.8417 8.04878 11.6464 7.85352L8.49996 4.70703V12.5498C8.49996 12.7983 8.2761 13 7.99996 13C7.72382 13 7.49996 12.7983 7.49996 12.5498V4.70703L4.35348 7.85352C4.15822 8.04878 3.84171 8.04878 3.64645 7.85352Z"
+                fill="currentColor"
+            />
+        </svg>
+    )
+}
+
+export { SortIndicator }

src/table/table.mdx

@@ -0,0 +1,78 @@
+import { ArgTypes, Canvas, Markdown, Meta, Subtitle, Title } from '@storybook/addon-docs/blocks'
+
+import { TableCell, TableColumn, TableColumnHeader } from './table'
+
+import * as TableStories from './table.stories'
+
+<Meta of={TableStories} />
+
+<Title />
+
+<Subtitle>Styled primitives for tabular data.</Subtitle>
+
+## Overview
+
+The `<Table>` component is a set of styled primitives on top of `<table>`, `<thead>`, `<tr>`, `<th>`, and `<td>`. It
+handles the visual layer, e.g. column widths, spacing, dividers, row, and sort affordances, while leaving the data-source,
+sort, and selection states to the consumer.
+
+## Anatomy
+
+The component is fully composable and consumers only need to include what they need. For example, if column headers are not
+required, then `<TableHeader>` can be omitted.
+
+<Markdown>{`
+| Component | Renders | Responsibility |
+| --- | --- | --- |
+| \`<Table>\` | \`<table>\` | The full width table, and tabular figures styling |
+| \`<TableColumnGroup>\` | \`<colgroup>\` | The column definitions, as the first child of \`<Table>\` |
+| \`<TableColumn>\` | \`<col>\` | Defining the column's sizing |
+| \`<TableHeader>\` | \`<thead>\` and its single \`<tr>\` | The header row |
+| \`<TableColumnHeader>\` | \`<th>\` | The column label and its optional sort control |
+| \`<TableBody>\` | \`<tbody>\` | The data rows |
+| \`<TableRow>\` | \`<tr>\` | Row selection through \`aria-selected\` |
+| \`<TableCell>\` | \`<td>\` | The data cells |
+`}</Markdown>
+
+## Basic usage
+
+Render `<TableRow>`s and `<TableCell>` within `<Table>` and `<TableBody>` to render data. If consistent column sizing is needed,
+define the columns in `<TableColumnGroup>`.
+
+<Canvas of={TableStories.Default} />
+
+## Props
+
+Every component forwards its native attributes, except for the deprecated [`border`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/table#border),
+[`width`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/col#width), and
+[`align`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/td#align) attributes on `<Table>`, `<TableColumn>`, and
+`<TableCell>`/`<TableColumnHeader>`, respectively. All components accept `exceptionallySetClassName` instead of `className`.
+
+The three components below also include additional props:
+
+### `<TableColumn>`
+
+<ArgTypes of={TableColumn} />
+
+### `<TableColumnHeader>`
+
+<ArgTypes of={TableColumnHeader} />
+
+### `<TableCell>`
+
+<ArgTypes of={TableCell} />
+
+## Row selection
+
+Setting `aria-selected` on a `<TableRow>` would mark it as selected.
+
+<Canvas of={TableStories.SelectedAndClickableRows} />
+
+## With TanStack Table
+
+The `<Table>` components do not dictate what external model layer they are used with. TanStack Table,
+for example, would be a good option for driving the data, including
+[sorting](https://tanstack.com/table/latest/docs/framework/react/guide/sorting) and
+[pagination](https://tanstack.com/table/latest/docs/framework/react/guide/pagination).
+
+<Canvas of={TableStories.TanStackIntegration} />

src/table/table.module.css

@@ -0,0 +1,160 @@
+.table {
+    font-variant-numeric: tabular-nums;
+    border-collapse: collapse;
+}
+
+.headerRow {
+    height: 40px;
+    border-bottom: 1px solid var(--product-library-border-idle-tint);
+}
+
+.headerCell {
+    height: 40px;
+    padding: 0 var(--reactist-spacing-small);
+    vertical-align: middle;
+    user-select: none;
+}
+
+.headerCellSortable {
+    padding: 0;
+}
+
+.sortButton {
+    display: flex;
+    gap: var(--reactist-spacing-xsmall);
+    align-items: center;
+    width: 100%;
+    height: 40px;
+    padding: 0 var(--reactist-spacing-small);
+    border: 0;
+    color: inherit;
+    font: inherit;
+    text-align: inherit;
+    background: transparent;
+    cursor: pointer;
+}
+
+.headerLabel {
+    flex: 1 0 0;
+    min-width: 0;
+}
+
+.sortButton:hover {
+    background-color: var(--product-library-actionable-secondary-hover-fill);
+}
+
+.sortButton:focus-visible {
+    outline: 2px solid var(--product-library-display-primary-idle-tint);
+    outline-offset: -2px;
+}
+
+.sortButton:hover .sortIndicatorUnsorted,
+.sortButton:focus-visible .sortIndicatorUnsorted {
+    opacity: 1;
+}
+
+.row {
+    height: 48px;
+    background-color: var(--product-library-background-base-primary);
+    border-bottom: 1px solid var(--product-library-divider-primary);
+}
+
+.row[aria-selected] {
+    cursor: pointer;
+}
+
+.row[aria-selected]:hover {
+    background-color: var(--product-library-actionable-secondary-hover-fill);
+    border-bottom-color: var(--product-library-divider-tertiary);
+}
+
+.row[aria-selected='true'] {
+    background-color: var(--product-library-selectable-secondary-selected-fill);
+}
+
+.row[aria-selected]:focus-visible {
+    outline: 2px solid var(--product-library-divider-tertiary);
+    outline-offset: -2px;
+}
+
+.cell {
+    padding: var(--reactist-spacing-xsmall) var(--reactist-spacing-small);
+    vertical-align: middle;
+}
+
+.cell:first-child {
+    padding-inline-start: var(--reactist-spacing-medium);
+}
+
+.cell:last-child {
+    padding-inline-end: var(--reactist-spacing-medium);
+}
+
+.sortIndicator {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    color: var(--product-library-display-secondary-idle-tint);
+}
+
+.sortIndicatorUnsorted {
+    color: var(--product-library-display-tertiary-idle-tint);
+    opacity: 0;
+}
+
+.sortIndicatorDescending {
+    transform: rotate(180deg);
+}
+
+.align-start {
+    text-align: start;
+}
+
+.align-end {
+    text-align: end;
+}
+
+.columnWidth-auto {
+    width: auto;
+}
+
+.columnWidth-content {
+    width: 0;
+}
+
+.columnWidth-1-2 {
+    width: 50%;
+}
+
+.columnWidth-1-3 {
+    width: 33.3333%;
+}
+
+.columnWidth-2-3 {
+    width: 66.6667%;
+}
+
+.columnWidth-1-4 {
+    width: 25%;
+}
+
+.columnWidth-3-4 {
+    width: 75%;
+}
+
+.columnWidth-1-5 {
+    width: 20%;
+}
+
+.columnWidth-2-5 {
+    width: 40%;
+}
+
+.columnWidth-3-5 {
+    width: 60%;
+}
+
+.columnWidth-4-5 {
+    width: 80%;
+}