[ENG-46087] feat(webkit): replace data-table with composable Table + Paginator#653
Closed
HerbertJulio wants to merge 4 commits into
Closed
[ENG-46087] feat(webkit): replace data-table with composable Table + Paginator#653HerbertJulio wants to merge 4 commits into
HerbertJulio wants to merge 4 commits into
Conversation
…d Paginator Add the composition + data-driven Table and the Paginator under data/, replacing the legacy data-table component. - Table: compound API (Table.Header/Body/Row/Cell/...), data-driven mode via the @tanstack/vue-table engine (sorting/selection/pagination/global filter), frozen columns + sticky header, grow-to-fill sizing, per-column `resizable`, and an action column auto-pinned to the trailing edge. - Paginator: pagination-button / paginator-info / paginator-page-size parts. - Remove the legacy data/data-table component; add data/table + data/paginator exports (the data/data-table export is dropped, no alias kept). - Specs and Storybook stories for Table and Paginator.
…nt tooling - Add the compound-api rule; expand the dependencies rule (the @tanstack/vue-table exception) and the component-scaffold skill for the Table/Paginator pipeline. - Refresh the spec template, eslint config, and Storybook main config.
pauloSF0
previously approved these changes
Jun 22, 2026
…Paginator story refinements - table: add `border` prop (default false); `principal` column flag + Table.Cell/HeadCell `principal` prop (first non-action column defaults to grow 2); empty-state block in the #empty slot (plain block, no row hover, no CTAs) reusing IllustrationLayers - table stories: data-driven zero-logic stories, card-style Composition example, Empty story, explicit docs source code, generic <=10-row dataset, border control - paginator stories: compound dot-notation form (Paginator.Button/Info/PageSize) + explicit source code - specs: table.md updated (border, principal, empty-state), checksum refreshed - fix: point @aziontech/theme at the workspace package (workspace:*) so install no longer 404s
- Wrap each Table story's source.code in a complete SFC (imports + data + columns + handlers + template) so Show code reproduces the rendered table. - Replace the card-style Composition story with a Default data-driven table (border) plus a plain composition example; drop the redundant Bordered story. - Register the compound sub-components under their dot-notation names so the runtime story templates resolve <Table.Header> etc. (also fixes the latent <Table.Search> resolution in Full Example's toolbar). - Remove the now-redundant Usage blocks from the Table and Paginator component descriptions.
Contributor
|
Parece que o exemplo "Full Example" está bem diferente do design proposto. Parece que talvez que não são os componentes corretos. Vale verificar Figma: Code: |
Contributor
Author
|
Refeito a partir da
Comentário de design do @isaquebock: comparei o Full Example com o Figma ( |
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
3 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
Replaces the legacy
data-tablewith a new composition + data-driven Table and a standalone Paginator underdata/, plus the supporting spec/pipeline updates.feat(webkit)— componentsTable.Header/Body/Row/Cell/HeadCell/...) and a data-driven mode powered by the headless@tanstack/vue-tableengine (sorting / row selection / pagination / global filter, client- and server-side).2, rest1), per-columnresizable(drag freezes the others and grows the table; floor = column content width), frozen columns + sticky header, and an action column auto-pinned to the right edge.Table.Header variant="compact"/ rootheader-variant.pagination-button/paginator-info/paginator-page-sizeparts.data/data-table; addsdata/table+data/paginatorexports; adds@tanstack/vue-table(+ lockfile entry).chore— pipelinecompound-apirule; expandeddependenciesrule (the@tanstack/vue-tableexception) andcomponent-scaffoldskill; spec template, eslint, and Storybook config refreshed.@aziontech/webkit/data/data-tableexport is gone with no alias kept, while.claude/rules/dependencies.mdstatesdata/data-tableshould be an alias ofdata/table. Decide whether to (a) add the alias export, or (b) treat this as a breaking change (feat!→ major). Committed asfeat(minor) for now.Notes
@tanstack/vue-table(with itspnpm-lock.yamlentries).vue-tsc(webkit): 0 errors in the table components; ESLint clean; spec-compliance / tokens / references hooks pass; spec checksum valid. CI runs the authoritative install/build.