Skip to content

feat: createDataGrid composable#174

Draft
johnleider wants to merge 10 commits intomasterfrom
feat/create-data-grid
Draft

feat: createDataGrid composable#174
johnleider wants to merge 10 commits intomasterfrom
feat/create-data-grid

Conversation

@johnleider
Copy link
Copy Markdown
Member

Summary

  • Adds createDataGrid headless composable extending createDataTable with column layout, cell editing, row reordering, row spanning, nested headers, and adapter-based virtualization
  • Refactors createDataTable to support recursive column definitions via children (aligning with Vuetify's DataTableHeader shape)
  • Column sizing uses percentages (Splitter-compatible) with delta-based resizing

What's included

createDataTable refactor (prerequisite)

  • DataTableColumn.key relaxed from keyof T & string to string for group column support
  • New children property for recursive nesting
  • extractLeaves, computeDepth, resolveHeaders utilities in columns.ts
  • headers and leaves exposed on DataTableContext

createDataGrid composable

  • Column layout — percentage-based sizing, pinning (left/right/scrollable regions), delta-based resizing, reordering
  • Cell editing — edit/commit/cancel lifecycle, per-column validation, dirty tracking
  • Row ordering — ID-based order state with move/reset
  • Row spanning — computed span map with hidden cell tracking
  • Grid adapters — ClientGridAdapter, ServerGridAdapter, VirtualGridAdapter (row ordering inserted post-sort, pre-pagination)
  • Trinity patterncreateDataGridContext, createDataGridPlugin, useDataGrid

Test plan

  • 4320/4320 tests pass (128 new across 7 test files + zero regressions)
  • Typecheck clean
  • Lint clean
  • knip + sherif clean
  • Manual testing via dev playground (sort, search, edit, resize, pin)

…dren

- DataTableColumn.key widened from keyof T & string to string
- DataTableColumn gains optional children property for nested columns
- extractLeaves/resolveHeaders imported and re-exported from ./columns
- createDataTable derives leaves (flat) from column tree; pipeline uses leaves
- DataTableContext exposes leaves and headers (reactive 2D header grid)
- DataTableAdapterContext.filterableKeys widened to readonly string[]
Wires together column layout, cell editing, row ordering, and row spanning
on top of createDataTable with a ClientGridAdapter. Exports createDataGrid,
createDataGridContext, and useDataGrid following the trinity pattern.

Also fixes a pre-existing TypeScript error in spanning.ts (Array.from unknown type).
- Extract shared applyOrder helper, eliminating duplicate ordering
  logic between ClientGridAdapter and VirtualGridAdapter
- Fix O(n*m) order.includes() → Set-based O(n) lookup in adapters
  and ordering.apply()
- Simplify layout.ts columns computed to reuse pinned regions
  instead of double-computing resolved()
- Fix editable column filter to match editing.ts guard
- Remove unused RowSpanningOptions import and numbered comments
- Clean up test mock imports
@pkg-pr-new
Copy link
Copy Markdown

pkg-pr-new bot commented Mar 31, 2026

Open in StackBlitz

commit: 08d1b2b

@johnleider johnleider marked this pull request as draft March 31, 2026 14:23
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant