feat(DataTable): introduce compound component over createDataTable - #825
Open
johnleider wants to merge 9 commits into
Open
feat(DataTable): introduce compound component over createDataTable#825johnleider wants to merge 9 commits into
johnleider wants to merge 9 commits into
Conversation
cursor
Bot
force-pushed
the
cursor/datatable-component-shell-06e4
branch
from
August 14, 2026 22:55
031639d to
7a72d38
Compare
johnleider
marked this pull request as ready for review
August 14, 2026 22:59
Headless compound component for rendering tabular data with semantic table markup and ARIA support: - DataTable.Root — provider that wraps createDataTable and exposes context - DataTable.Table — <table> with role="table" and aria-rowcount - DataTable.Head — <thead> exposing the 2D header grid - DataTable.HeaderRow — <tr> for header rows - DataTable.HeaderCell — <th> with aria-sort and sort controls - DataTable.Body — <tbody> exposing paginated items - DataTable.Row — <tr> with selection and expansion state - DataTable.Cell — <td> with colspan support - DataTable.Empty — conditional empty state row The component shell delegates all data pipeline logic (sorting, filtering, pagination, selection, expansion, grouping) to the existing createDataTable composable — no behavior reimplementation. Closes #512 Part of #507
Adds DataTable.vue fixture to the a11y browser test registry so that the accessibility sweep includes DataTable in its audit. This matches the pattern established by other compound components.
- Fix 'should not render when items exist' test to check for rendered content instead of component existence (v-if inside component doesn't prevent findComponent from finding the instance) - Move aria-label from Root to Table in fixture (Root renders fragment, can't inherit attributes)
Replace v-once / void context.onboard() render side-effect pattern with a proper onMounted approach using a DataTableInit child component that calls useDataTableRoot and runs onboard once on mount. Updated: - packages/0/src/components/fixtures/DataTable.vue - apps/docs/src/examples/components/data-table/basic.vue - apps/docs/src/pages/components/data/data-table.md
Emit data-direction, keep slot props live, onboard in setup, and drop unicode sort glyphs from the example and barrel.
Drop Head/HeaderCell and column-id/row-id so the table matches DataGrid and the Aria collection shape.
johnleider
force-pushed
the
cursor/datatable-component-shell-06e4
branch
from
August 20, 2026 13:10
2247eba to
3175171
Compare
Same anatomy as DataGrid: Header > Row > Column.
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.
Closes #512
Part of #507
Summary
Implements the DataTable compound component shell for FR #512 over the existing preview composable
createDataTable.This PR ships a thin compound component layer (
DataTable.*) that composescreateDataTable— structural shells first, not a full feature kitchen sink. Follows house patterns from Avatar/Snackbar/existing table-related code.Components
DataTable.RootcreateDataTable, exposes contextDataTable.Table<table>role="table",aria-rowcountDataTable.Head<thead>DataTable.HeaderRow<tr>DataTable.HeaderCell<th>aria-sort, sort controlsDataTable.Body<tbody>DataTable.Row<tr>DataTable.Cell<td>colspansupportDataTable.EmptyChecklist
packages/0/src/components/DataTable/with Root + essential partscreateDataTablematurity.jsondraft→preview,since: nullapps/docs/src/pages/components/data/data-table.md)apps/docs/src/examples/components/data-table/basic.vue)apps/docs/src/pages/components/index.mdupdatedindex.browser.test.ts)surface.test.ts)packages/0/README.mdsyncIntentionally Deferred
Paginationcompound component alongside DataTable