@scattered-light/loomiere-base-ui 0.6.1 → 0.7.1

package/dist/design-system/components/DataTable/README.md

@@ -0,0 +1,41 @@
+# DataTable
+
+Loomiere component, not part of Base UI. Sort buttons fill the header cell and inherit its hover, so old aria-sort markup keeps the hover it already had. The open row uses table.row-current, distinct from a selected row. Loading dims the rows in place. Nothing here changes a plain .Table.
+
+Use `Loomiere.DataTable` from `@scattered-light/loomiere-base-ui/custom/collection`. Install `@tanstack/react-table` (peer, optional). It is not on the main entry, so an app that only imports Badge does not need it.
+
+Not a Base UI part, so there is no base-ui.com page for it.
+
+## Classes
+
+| Class | Data attributes it answers to |
+|---|---|
+| `CollectionScroll` |   |
+| `DataTable` | `data-size`: `sm`, `md`; `data-loading` |
+| `Table` | `data-sticky-row-header` |
+| `TableSortButton` |   |
+| `TableSortIcon` | `data-state`: `none` |
+| `CollectionGroupButton` |   |
+| `CollectionRowButton` |   |
+| `CollectionSelectColumn` |   |
+| `CollectionStatus` |   |
+
+Base UI sets the state attributes (`data-checked`, `data-open`, `data-disabled`...) itself. Set `data-size`, `data-emphasis`, `data-variant` and `data-color` yourself; `data-color` takes any palette name (`primary`, `secondary`, `error`...) and repaints the part in it.
+
+## Example
+
+From the DataTable stories (`Default`):
+
+```tsx
+export const Default: Story = {
+  render: () => <FeeTable onRowActivate={() => undefined} />,
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const search = canvas.getByRole('searchbox', { name: 'Find fee' });
+    await userEvent.type(search, 'chase');
+    await expect(canvas.getByRole('table', { name: 'Park fees' })).toBeTruthy();
+  },
+};
+```
+
+The preview also shows `Selection`, `Money`, `Grouped`.