refactor(tables): decompose RuiDataTable into sub-components with per-concern context#492
Open
kelsos wants to merge 2 commits intorotki:mainfrom
Open
refactor(tables): decompose RuiDataTable into sub-components with per-concern context#492kelsos wants to merge 2 commits intorotki:mainfrom
kelsos wants to merge 2 commits intorotki:mainfrom
Conversation
…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
Replace hardcoded user data in e2e table-configs with deterministic generated data using the same pattern as the story fixtures. Remove unused sampleData export. Update search tests to use new names.
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.
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
1 participant
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)