refactor(tables): decompose RuiDataTable into sub-components with per-concern context#492
Open
kelsos wants to merge 1 commit into
Open
refactor(tables): decompose RuiDataTable into sub-components with per-concern context#492kelsos wants to merge 1 commit into
kelsos wants to merge 1 commit into
Conversation
5 tasks
kelsos
added a commit
that referenced
this pull request
Apr 21, 2026
Extracts the ad-hoc row arrays used by RuiDataTable stories and the example-app e2e suite into small generator functions driven by a fixed list of names/titles/roles, producing deterministic rows. Uses the same fixture set across stories and e2e so a test searching for "Alice" finds the same rows whether Storybook or Playwright is driving. Also fixes a stale-binding bug in the stories' `render`: `v-model:expanded`, `v-model:group` and `v-model:collapsed` bound to `args.*` directly instead of the `computed` refs returned from `setup`, so changes from the table wouldn't re-render. Now bound to the local computed refs. Adds eight stories that already work against the existing DataTable props: `WithSearch`, `RoundedSmall`, `RoundedLarge`, `DisabledRows`, `MultiPageSelect`, `CustomItemClass`, `HiddenHeaderAndFooter`, `GroupedWithExpandButtonEnd`. Useful for Storybook visual review and future interaction tests. Cherry-picked from #492 — only the fixture / story-data portions; the broader DataTable decomposition stays in review.
…oncern context Decompose the monolithic RuiDataTable template into focused sub-components (Body, Row, Cell, GroupRow, EmptyRow, ExpandedRow, LoadingRow) and split the single DataTableContext into 6 per-concern injection pairs (Styling, Columns, Selection, Expansion, Grouping, RowIdentity). Performance optimizations: - Pre-compute per-column tdClass to eliminate per-cell tv() calls - Move itemSlotKeys to context as Set<string> for O(1) lookups - Pass rowId from parent row to cell to avoid redundant getRowId calls - Remove unused ui field from context Stories: - Fix v-model reactivity bug for expanded/group/collapsed bindings - Add stories for search, rounded variants, disabled rows, multi-page select, custom item class, hidden header/footer, and grouped with expand button position - Replace hardcoded team names with generated deterministic test data
kelsos
force-pushed
the
refactor/data-table-decompose
branch
from
ea450d0 to
6f46e19
Compare
Codecov Report❌ Patch coverage is Additional details and impacted files@@ Coverage Diff @@
## main #492 +/- ##
==========================================
+ Coverage 84.59% 85.73% +1.13%
==========================================
Files 139 147 +8
Lines 5062 5263 +201
Branches 1507 1554 +47
==========================================
+ Hits 4282 4512 +230
+ Misses 780 751 -29 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
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
RuiDataTabletemplate into 7 focused sub-components (RuiDataTableBody,RuiDataTableRow,RuiDataTableCell,RuiDataTableGroupRow,RuiDataTableEmptyRow,RuiDataTableExpandedRow,RuiDataTableLoadingRow)DataTableContextinto 6 per-concern provide/inject pairs (Styling,Columns,Selection,Expansion,Grouping,RowIdentity), each sub-component now only injects what it needstdClassto eliminate per-celltv()calls, moveitemSlotKeysto context asSet<string>for O(1) lookups, and passrowIdfrom parent row to avoid redundantgetRowIdcallsTest plan
pnpm run typecheckpassespnpm run test:run— 1072 unit tests passpnpm run test:e2e— 262 e2e tests passpnpm run storybook)