feat(DataGrid): add headless compound shell over createDataGrid - #826
Draft
johnleider wants to merge 5 commits into
Draft
feat(DataGrid): add headless compound shell over createDataGrid#826johnleider wants to merge 5 commits into
johnleider wants to merge 5 commits into
Conversation
Implements FR #513 (epic #507) - thin structural shells for building data grids. Components: - DataGrid.Root - context provider wrapping createDataGrid - DataGrid.Table - semantic table with role="grid" - DataGrid.Header / DataGrid.Body - section containers with role="rowgroup" - DataGrid.Row - row container with optional id for ordering/selection - DataGrid.Column - header cell with sorting state and aria-sort - DataGrid.Cell - data cell with editing state and row spanning Context injection via useDataGridRoot/provideDataGridRoot and useDataGridRow/provideDataGridRow trinities. Follows Avatar/Snackbar compound patterns. Registry surface uses register/onboard for rows. Maturity promoted draft→preview. Breaking: removes deprecated DataGridColumn type alias from createDataGrid exports (use DataGridColumnTicketInput instead)
Adds DataGrid fixture to satisfy the shipped-component gate in a11y.browser.test.ts. Fixture renders a basic grid with header columns and data rows using role="grid" semantics.
Row now always provides row context, even when id is undefined. Cell gracefully handles missing row.id in span/editing lookups. Fixes browser test failures where Cell was mounted inside Row without an id prop.
…eraction Composes the Splitter drag interaction pattern into a new DataGrid.ResizeHandle component that enables column resizing with real drag handles: - DataGridResizeHandle.vue: Drag handle using pointer/keyboard interaction - Maps resize deltas to context.layout.resize(column, delta) - Keyboard support: Arrow keys (1%), Page Up/Down (10%), Home/End (min/max) - WAI-ARIA role=separator with valuenow/min/max for accessibility - Respects column resizable, minSize, maxSize constraints - Conditional rendering via v-if when column.resizable is false - DataGridColumn.vue: Added layout-aware slot props - isResizable, size, minSize, maxSize, offset exposed via slot props - Style binding for width percentage - Barrel exports: Added DataGridResizeHandle and related types - Surface test: Added DataGridResizeHandle to freeze array - Browser tests: Added tests for ResizeHandle - Rendering, ARIA attributes, slot props - Integration test for layout.resize API - Docs: Updated with resizable columns section, example, and FAQ Header/Column → Splitter mapping: - Each DataGrid.Column becomes a logical panel (via layout percentage sizing) - DataGrid.ResizeHandle is placed between columns like Splitter.Handle - Horizontal orientation: columns side-by-side, vertical separator handles - Pin regions use separate size pools (left/scrollable/right) Closes #513, relates to #507
Removes parallel DataGridResizeHandle implementation and shows proper composition of shipped Splitter primitives: - Remove DataGridResizeHandle.vue (mirrored Splitter.Handle mechanics) - Remove ResizeHandle from barrel exports and surface freeze - Remove DataGrid.resizeHandle locale key - Update resizable.vue example to compose Splitter.Root/Panel/Handle - Update browser tests to test layout API (resize, distribute) - Update docs to explain Splitter composition pattern The composition pattern: - Splitter.Root wraps header row with orientation="horizontal" - Splitter.Panel for each column header (handles flex-basis sizing) - Splitter.Handle between panels (provides drag + WAI-ARIA separator) - @layout event syncs Splitter sizes to context.layout.distribute(sizes) - Body cells read widths from context.layout.columns Closes #513
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Implements the
DataGridcompound shell for FR #513, providing structural wrappers over the existingcreateDataGridcomposable.Changes
Compound Components
DataGrid.Root— Context provider wrappingcreateDataGridDataGrid.Table— Semantic wrapper withrole="grid"DataGrid.Header/DataGrid.Body— Section containers withrole="rowgroup"DataGrid.Row— Row container with optional id for ordering/selectionDataGrid.Column— Header cell with sorting state andaria-sortDataGrid.Cell— Data cell with editing state and row spanningColumn Resize via Splitter Composition
Column resize composes the shipped
Splitterprimitives rather than reimplementing drag mechanics:Mapping:
Splitter.Rootorientation="horizontal"Splitter.PanelSplitter.Handlerole="separator"@layouteventcontext.layout.distribute(sizes)Other Changes
useDataGridRoot/provideDataGridRoot,useDataGridRow/provideDataGridRowdraft→preview,since: nullChecklist
packages/0/src/components/DataGrid/)preview,since: null)apps/docs/src/pages/components/data/data-grid.md)index.browser.test.ts)fixtures/DataGrid.vue)surface.test.ts)Deferred
context.rows.move()API directlycontext.editingAPI directlycontext.spansAPI directlyCloses #513
Related: #507