@rozie-ui/data-table-solid 0.3.1 → 0.4.0

package/README.md

@@ -399,6 +399,47 @@ export function Demo() {
 }
 ```
 
+### Per-column slot families (`cell-<id>` / `colHeader-<id>` / `filter-<id>` / `editor-<id>`)
+
+```tsx
+import { DataTable, Column } from '@rozie-ui/data-table-solid';
+
+export function Demo() {
+  // A family fill is a STATIC per-column override — the additive `slots` record prop,
+  // NOT an extension of cellSlot/colHeaderSlot/filterSlot/editorSlot. Precedence per
+  // seam: slots['<seam>-<id>'] → the generic <seam>Slot prop → the built-in render.
+  // editor-<id> only reaches a column declared editor="custom"; filter-<id> only reaches
+  // a column declared filterable (shown on `category` below); cell-<id> / colHeader-<id>
+  // have no gate. A misspelled key silently no-ops — it typechecks (a trailing catch-all
+  // index signature) but is never invoked.
+  const rows = [
+    { id: 1, name: 'Alpha',   category: 'Hardware', price: 30 },
+    { id: 2, name: 'Beta',    category: 'Software', price: 90 },
+    { id: 3, name: 'Gamma',   category: 'Hardware', price: 10 },
+    { id: 4, name: 'Delta',   category: 'Service',  price: 50 },
+  ];
+  return (
+    <DataTable
+      data={rows}
+      slots={{
+        'cell-price': ({ value }) => <>💲 {value}</>,
+        'colHeader-price': ({ label }) => <>🏷️ {label}</>,
+        'filter-category': ({ columnId, uniqueValues, setFilter }) => (
+          <select onChange={(e) => setFilter(columnId, e.currentTarget.value || null)}>
+            <option value="">All</option>
+            {uniqueValues.map((v) => <option value={String(v)}>{String(v)}</option>)}
+          </select>
+        ),
+      }}
+    >
+      <Column field="name" header="Name" />
+      <Column field="category" header="Category" filterable />
+      <Column field="price" header="Price" />
+    </DataTable>
+  );
+}
+```
+
 ## Theming
 
 Every visual value is a `--rozie-data-table-*` CSS custom property — override any of them at any ancestor scope. Ready-made design-system bridges ship in the package (import `base.css` first, then a bridge):
@@ -523,14 +564,22 @@ All rendering slots live on the parent `<DataTable>` (a `<Column>` carries metad
 
 The `detail` (expandable rows), `groupBar` (grouping) and `filter` (faceted filtering) scoped slots follow the SAME render-prop convention: on React they are `renderDetail` / `renderGroupBar` / `renderFilter`; on Solid they are `detailSlot` / `groupBarSlot` / `filterSlot`; on Lit they are the `.detail` / `.groupBar` / `.filter` properties — the documented React render-prop edge (per the cross-framework compatibility bar). On Vue / Svelte / Angular they are ordinary named scoped slots (`#detail` / `#groupBar` / `#filter`). The `groupBar` and `filter` slots are HEADLESS — the component ships NO built-in group-bar / facet control, so the consumer builds the UI purely from the exposed slot props.
 
+`cell`, `colHeader`, `filter` and `editor` each also have a **per-column slot family** — a statically-named fill per `columnId` (`cell-price`, `colHeader-price`, `filter-category`, `editor-score`, …) that takes precedence OVER the matching generic slot above it: `<seam>-<id>` → the generic `<seam>` slot → the built-in render. `editor-<id>` (and `editor`) only render on a column declared `editor="custom"`; `filter-<id>` (and `filter`) only render on a column declared `filterable`; `cell-<id>` / `colHeader-<id>` have no gate. The auto-injected row-select / row-expander chrome columns never reach any family — they are excluded structurally. On Solid the family is the additive **`slots`** record prop — `slots={{ 'cell-price': (ctx) => … }}` — keyed by the exact `<seam>-<id>` string.
+
+A misspelled family key does not fail to compile — the emitted type carries a trailing catch-all index signature alongside the templated key, so it typechecks but is simply never invoked. See the "Per-column slot families" example in Usage above for the full per-target syntax.
+
 | Slot | Params |
 | --- | --- |
 | (default) |  |
 | groupBar | grouping, groupableColumns, applyGrouping, clearGrouping |
 | selectAll | checked, indeterminate, toggle |
+| colHeader-<id> | columnId, column, label |
+| filter-<id> | columnId, value, uniqueValues, minMax, setFilter |
+| selectCell | row, checked, toggle |
+| cell-<id> | columnId, column, row, value |
+| editor-<id> | columnId, column, row, value, commit, cancel, autofocus |
+| detail | row |
 | colHeader | columnId, column, label |
 | filter | columnId, value, uniqueValues, minMax, setFilter |
-| selectCell | row, checked, toggle |
 | cell | columnId, column, row, value |
 | editor | columnId, column, row, value, commit, cancel, autofocus |
-| detail | row |