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

package/README.md

@@ -365,6 +365,44 @@ render(html`
 `, document.body);
 ```
 
+### Per-column slot families (`cell-<id>` / `colHeader-<id>` / `filter-<id>` / `editor-<id>`)
+
+```ts
+import { html, render } from 'lit';
+import '@rozie-ui/data-table-lit';
+
+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 },
+  ];
+
+// A family fill is a STATIC per-column override — the `.rozieSlots` record property
+// (NOT an extension of `.cell` / `.colHeader` / `.filter` / `.editor`). Precedence per
+// seam: rozieSlots['<seam>-<id>'] → the generic .<seam> property → the built-in render.
+// editor-<id> needs editor="custom"; filter-<id> needs filterable (shown on category
+// below); cell-<id> / colHeader-<id> have no gate.
+render(html`
+  <rozie-data-table
+    .data=${rows}
+    .rozieSlots=${{
+      'cell-price': ({ value }) => html`💲 ${value}`,
+      'colHeader-price': ({ label }) => html`🏷️ ${label}`,
+      'filter-category': ({ columnId, uniqueValues, setFilter }) => html`
+        <select @change=${(e: Event) => setFilter(columnId, (e.target as HTMLSelectElement).value || null)}>
+          <option value="">All</option>
+          ${uniqueValues.map((v) => html`<option value=${String(v)}>${String(v)}</option>`)}
+        </select>`,
+    }}
+  >
+    <rozie-column field="name" header="Name"></rozie-column>
+    <rozie-column field="category" header="Category" filterable></rozie-column>
+    <rozie-column field="price" header="Price"></rozie-column>
+  </rozie-data-table>
+`, document.body);
+```
+
 ## 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):
@@ -488,14 +526,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 Lit the family is the additive **`.rozieSlots`** record property — `.rozieSlots=${{ 'cell-price': (ctx) => html`…` }}` — 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 |