You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
docs(data-table): correct cell/header rendering model + multi-example-set usage
The custom cell/header renderer is a SINGLE parent-level <DataTable> scoped
slot dispatched by columnId (design decision D-A) — `#cell`
({columnId,column,row,value}) / `#colHeader` ({columnId,column,label}) on Vue
& Angular, `cell`/`colHeader` snippets/props on Svelte, render-prop props on
React (renderCell/renderColHeader) and Solid (cellSlot/colHeaderSlot), and the
`.cell`/`.colHeader` properties on Lit. A <Column> carries metadata only.
The docs had inherited the pre-D-A per-<Column> `#cell` form (which the leaves
no longer honor) in the showcase, the comparison page, the live demo, and the
generated Vue README/usage snippet — the demo was dropping the status badge.
Fix all of them to the parent columnId-dispatch model.
Also add multi-example-set support to the usage pipeline: each target's USAGE
entry may now be an aligned list of {title,lang,code} sets, rendered as one
heading + code-group per set in both renderReadme and gen-usage-pages.mjs
(backward compatible with the single-snippet shape). DataTable now ships two
sets — config-array columns and <Column> children + a custom cell — with parity
across all six targets. Regenerated the 6 data-table READMEs.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013wvxhsB5hcDKD8UadLLSyw
| No per-framework adapter | ❌ | ❌ | ❌ | ❌ | ❌ | — | ✅ single `table-core`|
48
48
| Idiomatic two-way state binding | ⚠️ state+onChange | ✅ `v-model`| ⚠️ stores | ⚠️ signal | ⚠️ | — | ✅ nine `r-model` slices |
@@ -55,7 +55,7 @@ Cell legend: **✅** = documented out-of-the-box · **❌** = not supported / no
55
55
-**The same component surface everywhere.** Where TanStack offers hooks (React), composables (Vue), stores (Svelte), and signals (Solid) — four mental models over the *same* core — `@rozie-ui/data-table` is one `<DataTable>` + `<Column>` with the same props, nine two-way slices, events, slots, and imperative handle on all six.
56
56
-**No per-framework adapter.** Every leaf wires `@tanstack/table-core` directly; the codegen forbids any `@tanstack/<fw>-table` import. You get the exact engine TanStack uses without the adapter-per-framework maintenance surface — and `table-core` is your peer dependency, so you control its version.
57
57
-**Nine independent two-way state slices, controlled *or* uncontrolled.** Sorting, global filter, column filters, pagination, row selection, column visibility / sizing / order / pinning — each is an optional `r-model` you bind only if you want to own it, and each change event fires regardless of binding so you can observe transitions either way.
58
-
-**A declarative `<Column>` API with per-column templates** (the PrimeVue-shaped surface) *and* a `:columns` config-array escape hatch, resolved by an id-keyed last-write-wins union — plus per-column `#cell` / `#header` reactive templates (a render-prop on React, the one documented divergence).
58
+
-**A declarative `<Column>` API** (the PrimeVue-shaped surface) *and* a `:columns` config-array escape hatch, resolved by an id-keyed last-write-wins union — plus custom cell/header rendering via a single parent `#cell` / `#colHeader` scoped slot dispatched by `columnId`(a render-prop on React/Solid and a property on Lit, the one documented divergence).
59
59
-**Zero-config styling that re-skins to any design system.** Every rendered value is a `--rozie-data-table-*` CSS custom property with a built-in fallback, plus ready-made token bridges for shadcn/ui, Material 3, and Bootstrap 5 — no required CSS import.
60
60
-**Opt-in WAI-ARIA grid mode, identical on all six targets.** Set `interactionMode="grid"` for the full [APG grid pattern](https://www.w3.org/WAI/ARIA/apg/patterns/grid/) — `role="grid"`, a roving single tab-stop, and 2-D arrow-key cell navigation that survives a re-sort / filter / page change / column hide-reorder-pin (the active cell is tracked as a `{ rowIndex, colIndex }` pair over the visible model, never a stored DOM node). It is drivable and observable via the `focusCell` / `getActiveCell` / `clearActiveCell` handle verbs and the `activecell-change` event, and the behavioral contract is locked by a cross-framework VR matrix. The default `interactionMode="table"` stays a plain accessible table, byte-for-byte unchanged.
61
61
@@ -66,7 +66,7 @@ This page concedes where the incumbents are genuinely ahead — that's what keep
66
66
-**AG Grid's enterprise depth.**[AG Grid](https://www.ag-grid.com/) ships row grouping, tree data, pivoting, range selection, master/detail, integrated charting, and a deep server-side row model. `@rozie-ui/data-table` covers the common surface (sort / filter / paginate / select / column management) and a `manual` server-side hook, not the enterprise feature set.
67
67
-**Row/cell virtualization.** Large datasets render every row today — there is no built-in windowing. Virtualization is a planned phase (the published support boundary is a row-count ceiling until it lands); for now, paginate or pre-window large data yourself.
68
68
-**TanStack's expansion / grouping / faceting helpers.** The shared `table-core` exposes more row-model features (expanding, grouping, faceted filters) than `@rozie-ui/data-table` surfaces in its current prop set. They are reachable via the imperative handle / future additive props.
69
-
-**`@rozie-ui/data-table` is `0.1.0`.** The surface (15 props / 9 two-way slices / 9 events / 15-verb handle / declarative `<Column>` + per-column templates / 2 selection slots) is stable and gate-verified across all six targets, but it is younger and less battle-tested than the established libraries.
69
+
-**`@rozie-ui/data-table` is `0.1.0`.** The surface (15 props / 9 two-way slices / 9 events / 15-verb handle / declarative `<Column>` + `columnId`-dispatched cell/header slots / 2 selection slots) is stable and gate-verified across all six targets, but it is younger and less battle-tested than the established libraries.
<!-- One #cell slot on <DataTable>, dispatched by columnId -->
58
+
<template #cell="{ columnId, value }">
59
+
<span v-if="columnId === 'status'" class="dt-badge" :class="'dt-badge--' + value">{{ value }}</span>
60
+
<template v-else>{{ value }}</template>
61
+
</template>
60
62
</DataTable>
61
63
62
64
<divclass="dt-live__state">
@@ -69,7 +71,7 @@ This is the **real `@rozie-ui/data-table-vue` package** running on this page (Vi
69
71
</div>
70
72
</ClientOnly>
71
73
72
-
Each `v-model:<slice>` is a two-way bind — the readout updates the instant you change the state, and a consumer write flows back in. The four slices bound here (`sorting`, `globalFilter`, `rowSelection`, `pagination`) are four of the [nine independent state slices](/components/data-table#models-the-nine-two-way-slices); bind a slice only when you want to own it. The header buttons drive the imperative handle (`toggleAllRows`, `clearSelection`, `clearSorting`) grabbed through Vue's `ref`. The **Status**column shows a per-column `#cell` template; the others render the plain accessor value (the fast path). See the [full API](/components/data-table) for every prop, slice, event, slot, and handle verb, plus the `<Column>` API, theming, and accessibility reference.
74
+
Each `v-model:<slice>` is a two-way bind — the readout updates the instant you change the state, and a consumer write flows back in. The four slices bound here (`sorting`, `globalFilter`, `rowSelection`, `pagination`) are four of the [nine independent state slices](/components/data-table#models-the-nine-two-way-slices); bind a slice only when you want to own it. The header buttons drive the imperative handle (`toggleAllRows`, `clearSelection`, `clearSorting`) grabbed through Vue's `ref`. A single `#cell` slot on `<DataTable>`, dispatched by `columnId`, renders the **Status**badge; every other column falls through to the plain accessor value (the fast path). See the [full API](/components/data-table) for every prop, slice, event, slot, and handle verb, plus the `<Column>` API, theming, and accessibility reference.
`DataTable` ships as six pre-compiled, per-framework packages from a single `.rozie` source — install only the one for your framework (no Rozie toolchain, no build-time compile step). Each carries its engine + framework peers as **peer dependencies**, so you control their versions. The snippets below are the same idiomatic consumption code shown in each package's README; switch the tab to your framework.
10
10
11
-
## Consume it
11
+
## Usage
12
+
13
+
### Columns as a config array
12
14
13
15
::: code-group
14
16
@@ -44,60 +46,56 @@ export function Demo() {
44
46
```vue [Vue]
45
47
<script setup lang="ts">
46
48
import { ref } from 'vue';
47
-
import DataTable, { Column } from '@rozie-ui/data-table-vue';
Beyond props and events, `DataTable` exposes imperative methods (declared once in the `.rozie` source via `$expose`). Grab a handle through your framework's native ref mechanism and call them directly:
0 commit comments