Uh oh!
There was an error while loading. Please reload this page.
Add a swappable table rendering seam (TableRenderer + bindQuery) - #108
Add a swappable table rendering seam (TableRenderer + bindQuery)#108woksin wants to merge 4 commits into
Conversation
Introduce TableRenderer<TData> and TableRendererProps<TData> — a small, UI-library-agnostic contract describing what a table renderer is handed (one page of rows, selection, paging-agnostic props). Move the row-click event into its own file so the contract can reference it, and re-express DataTableCoreProps as `extends TableRendererProps` plus the PrimeReact pass-through and rendering extras. DataTableCore is unchanged at runtime; it is now the default implementation of the seam. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Add bindQuery and bindObservableQuery — higher-order helpers that pair Cratis's query + paging behavior (and the paginator) with any TableRenderer, mirroring the asCommandFormField adapter pattern. The renderer receives only the UI-library-agnostic TableRendererProps; the query never leaks across the seam. Re-express DataTableForQuery as bindQuery(DataTableCore) and DataTableForObservableQuery as bindObservableQuery(DataTableCore). Public props (including the PrimeReact pt/ptOptions/unstyled pass-through) and runtime behavior are unchanged — the PrimeReact-specific props are layered on at the table wrapper, not in the seam. Export the new surface and DataTableCore from the DataTables barrel. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Add a BDD spec that binds a trivial, non-DataTableCore renderer (a plain list) via bindQuery and asserts a consumer gets Cratis's paged query data and paginator with their own rendering. Add a Storybook story that binds a card-list renderer to a paged query for the visual counterpart. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Add a DataTables docs page explaining the rendering seam and how to bind a custom TableRenderer with bindQuery/bindObservableQuery, wired into the section toc and linked from the overview. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
woksin
commented
Jul 17, 2026
Follow-up / eventual home: the |
woksin
commented
Aug 23, 2026
Superseded by the Components 4 foundation in #170 and the focused major branch. The renderer-specific proof should not merge onto the old PrimeReact migration base. Its useful long-term idea remains tracked in #109: move genuinely headless query/table binding behavior to @cratis/arc.react, with Components as one visual implementation. |
Summary
Formalizes the table rendering seam: a small, UI-library-agnostic contract that lets Cratis's query and paging behavior drive any table rendering. The split already existed unnamed —
DataTableCorewas a pure renderer and the two query tables were paging behavior wrapped around it — so this names the contract and re-expresses the tables on top of it with no change to their public API.Added
TableRenderer<TData>andTableRendererProps<TData>— a curated, PrimeReact-free contract describing what a table renderer is handed (one page of rows, selection, paging-agnostic props). Exported from@cratis/components/DataTables.bindQueryandbindObservableQuery— higher-order helpers that pair Cratis's query + paging behavior (and the paginator) with anyTableRenderer, so consumers can render a query's paged rows with their own table implementation and keep Cratis's data behavior for free.DataTableCoreis now exported from@cratis/components/DataTablesas the defaultTableRendererimplementation.Changed
DataTableForQueryandDataTableForObservableQueryare now built on the rendering seam (bindQuery(DataTableCore)/bindObservableQuery(DataTableCore)). Their public props — including the PrimeReactpt/ptOptions/unstyledpass-through — and runtime behavior are unchanged.🤖 Generated with Claude Code