feat: New table component based on tan-stack #1183
Draft
Conversation
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
There was a problem hiding this comment.
Pull Request Overview
This PR introduces a proof of concept for a new table component built with TanStack Table v8. The implementation provides a reusable, type-safe table component with configuration-based column definitions and custom cell rendering capabilities.
Key Changes:
- New
TablePoccomponent leveraging TanStack Table library for generic, reusable table rendering - Configuration-based approach for defining table columns with type safety
- Storybook stories demonstrating usage with user and product data examples
Reviewed Changes
Copilot reviewed 12 out of 13 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| package.json | Adds @tanstack/react-table dependency |
| src/components/TablePoc/TablePoc.tsx | Core table component implementation |
| src/components/TablePoc/TablePoc.types.ts | TypeScript interfaces for component props |
| src/components/TablePoc/TableColumnConfigTypes.ts | Type definitions for column configuration |
| src/components/TablePoc/generatecolumns.tsx | Utility to convert config to TanStack column definitions |
| src/components/TablePoc/UserData.types.ts | Type definitions for user and product data |
| src/components/TablePoc/userTableConfig.ts | Column configuration for user table |
| src/components/TablePoc/productTableConfig.ts | Column configuration for product table |
| src/components/TablePoc/TablePocData.tsx | Mock user data for demonstrations |
| src/components/TablePoc/TablePocProductData.tsx | Mock product data for demonstrations |
| src/components/TablePoc/TableData.stories.tsx | Storybook stories showcasing table variants |
| src/components/TablePoc/index.ts | Module exports |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
ffffffelix
reviewed
Nov 18, 2025
Collaborator
ffffffelix
left a comment
ffffffelix
left a comment
There was a problem hiding this comment.
As it's a POC will do not merge it right away and we will use this branch to finalize the component. For now, can you put this PR as draft, please ?
In order to simplify the code, I guess you can only keep one data set.
ffffffelix
reviewed
Nov 19, 2025
ffffffelix
requested changes
Nov 20, 2025
There was a problem hiding this comment.
Pull Request Overview
Copilot reviewed 28 out of 30 changed files in this pull request and generated 2 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| /** | ||
| * Name of HTML element to render in the DOM for this component | ||
| */ | ||
| component?: 'string;' |
There was a problem hiding this comment.
Type definition contains a string literal 'string;' instead of the type string. This will prevent any valid string from being accepted and only allow the exact literal value 'string;'.
Suggested change
| component?: 'string;' | |
| component?: string |
5 tasks
ffffffelix
changed the title
* feat: add checkbox features on the table component * feat: implement visual sorting and actions column support * feat: Add defaultselection and defaultsorting * fix: removed the state of the sorting , fix some lint errors change the sort by types with keyof t
5 tasks
* Update CHANGELOG.md [skip ci] * Bump version to: 2.17.0 [skip ci] * fix: import CustomDropdown component (#1178) * Update CHANGELOG.md [skip ci] * Bump version to: 2.17.1 [skip ci] * fix: selected MenuItem on hover (#1182) * feat: Add icon ContentReference (#1188) * feat: update icon PastAsReference (#1187) * chore: upgrade dependencies (#1186) * fix: color contrast for the helper of field and fieldset (#1191) * Update CHANGELOG.md [skip ci] * Bump version to: 2.17.2 [skip ci] * fix: Improve spacing and styling of CustomDropdown (#1181) * Update CHANGELOG.md [skip ci] * Bump version to: 2.17.3 [skip ci] * Refactor DataTable cell components and column types to handle the cell rendering solution and the render for specific use case - Hover actions in progress - Status Bar in progress * fix: implement new data to handle the merge of tanstack table poc branch * fix: fix the align cell featured and removed the default align function * fix: bring back the sort feature that was not working with my previous changes * feat: Merge TableCellWrapper into the tablecell component and we use now the render function instead of type * feat: Refactor architecture with TanStack Table integration and more abstraction * feat: add actions column and custom render props - Add actions/actionsHeaderLabel props for decoupled actions column - Add renderRow/renderCell props for custom rendering * fix: Removed all the boolean props on datatable component in storie file to avoid duplicate args and props * feat; created TableCellDate and TableCellNumber * fix : removed the RenderCell Props from DataTable and separated the renderCellContent from TableCell in a utils file * feat: Add Column helper for better reusability and the option to override specific props or provide a total custom render. Add a align prop (left, center , right) and fixed nested td rendering.pecific props or provide a total **custom render** * fix : lint fix * fix : fix for build lint * Refactor DataTable cell rendering and types * Refactor DataTable for improved structured view and typing * fix: Refactor DataTable types and imports for clarity * fix: add spread props on tablecell components and condition typing on selection props --------- Co-authored-by: Jahia CI <jahia-ci@jahia.com> Co-authored-by: Félix Vallé <31360150+ffffffelix@users.noreply.github.com>
…sage (#1219) * feat: merge the tablebodycell component into tablecell for simplier usage * feat: Improved logic for the expendable column * fix: changed the hardcoded way of styling by using scss for styling * fix: fix lint error in scss file
* feat: merged sortIndicator in tableheadcell component * fix: put the logic of the sortindicator in tableheadcell component to keep everything in the same file * feat: Changed TableHeadCell sorting API to use single `sorting` object prop - Replace separate isSortable/sortDirection/isSorted props with `sorting?: SortingConfig` - direction is now required when sorting is provided (no undefined) - Add isActive property to highlight currently sorted column - Enable two-state sorting only (asc/desc) via enableSortingRemoval: false
* feat: Improved cell rendering into renderHelpers
- Create renderHelpers.tsx with factory functions for cell rendering
- Rename DataTableColumnUtils.tsx to tableHelpers.tsx
- Add getCellValue (formerly getStringOrObjectValue) to tableHelpers
- Create utils/index.ts for barrel exports
- Merge stringColumn and stringOrObjectColumn into single stringColumn
- Remove duplicate tableCellUtils.tsx (unused)
- Add LocaleOptions type for Intl.NumberFormatOptions and Intl.DateTimeFormatOptions support
- Empty value handling centralized in TableCell ({children ?? '-'})
* fix: Changed the renders function to have a value param
- Removed getcellvalue because renderstring can do the samething
- Added value params to render function helper to be able to use those function in tablecell for example
- RenderString handle only string for simplicity
* fix : unify locale typing in column/render helpers
* fix: improved typing for localeOptions
* feat: reduce HTML nesting and improve TableCell architecture - Create TableStructuredCell for tree-view/expandable functionality - Simplify TableCell to be a pure composable wrapper with children prop - Remove IconTextIcon usage in table context (eliminates extra wrapper div) - Replace TanStack Row prop with primitive props (depth, isExpandable, isExpanded, onToggleExpand) - Delete unused TableCellChips, TableCellDate, TableCellNumber components - Add flex layout with gap for cell content via CSS * fix: fixed the props to be optional and a more better HTML structure * fix: added the gap class to moonstone tablecell * fix: fixing the lint error on the scss and gap rules
* feat: added align method for cell and the primary key prop * fix : numbers aligned to the right * fix: make the isExpendable prop optional * Merge branch 'AlignColumn-PrimaryKey' of https://github.com/Jahia/moonstone into AlignColumn-PrimaryKey * fix: fix a double import due to the merge conflict
* feat: added align method for cell and the primary key prop * feat: add pagination support and refactor structured view Integrated TanStack Table's internal pagination model (getPaginationRowModel) for more robust state management. Created a standalone, reusable DataTablePagination component located within the DataTable module. Refactored the Structured View implementation: Merged TableStructuredCell logic into TableCell for a cleaner architecture. Moved the expand/collapse click handler to the root cell element to improve hit area. Added W3C ARIA accessibility attributes (aria-expanded, aria-level, role="row"). Enhanced component robustness by adding safe initializers for pageSize and handling empty data edge cases (e.g., "0-0" range display). Updated Storybook stories with comprehensive examples, including combined support for pagination, sorting, and structured views. Resolved linting issues and standardized flex layouts for better cross-browser consistency. * feat: custom props to Table and show sort arrow on hover - Forward className and spread props from DataTable to Table component - Add rowProps and cellProps for custom attributes (e.g., data-testid for Cypress) - Hide sort arrow by default on sortable columns, reveal on hover - Keep sort arrow always visible when column is actively sorted * fix: Changes made for props and types naming and removed the wrapper div - Remove wrapper div around DataTable (moonstone-dataTable unused) - Simplify sort icon CSS: hidden by default, visible on hover or when active - Rename ...tableProps to ...props for consistency with other components - Change rowProps from function to object for static attribute support - Change cellProps from function to object for static attribute support
* feat: added align method for cell and the primary key prop * feat: add pagination support and refactor structured view Integrated TanStack Table's internal pagination model (getPaginationRowModel) for more robust state management. Created a standalone, reusable DataTablePagination component located within the DataTable module. Refactored the Structured View implementation: Merged TableStructuredCell logic into TableCell for a cleaner architecture. Moved the expand/collapse click handler to the root cell element to improve hit area. Added W3C ARIA accessibility attributes (aria-expanded, aria-level, role="row"). Enhanced component robustness by adding safe initializers for pageSize and handling empty data edge cases (e.g., "0-0" range display). Updated Storybook stories with comprehensive examples, including combined support for pagination, sorting, and structured views. Resolved linting issues and standardized flex layouts for better cross-browser consistency. * refactor : extract pagniation component from DataTable - Move DataTablePagination to src/components/Pagination as standalone component - Rename row-based props to item-based (rowsPerPage → itemsPerPage, etc.) - Replace margin utility classes with CSS gap for layout - Remove deprecated Dropdown label prop - Change data-sel-role attributes to data-testid - Use type imports for TypeScript types - Update DataTable to consume new Pagination component - Export Pagination from main components index * fix: removed a unused import for lints error * fix: add the flexrow and align center classes * fix: remove unused class * fix: fix lint error * chore: add test for pagination component
* feat: Creating test for the new datatable component * fix: fix lints error * refactor : refactor some datatable tests
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Created new custom types for the component’s columns and properties, independent from TanStack Table.
Refactored the main component to internally convert our custom column format into the format expected by TanStack.
Simplified Storybook stories to use the new abstracted API.
Removed utility functions and intermediate types that exposed TanStack-specific implementation details.