feat: reduce HTML nesting and improve TableCell architecture #1223
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
Contributor
BouklifYacine
commented
Dec 23, 2025
BouklifYacine
commented
- 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
- 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
ffffffelix
requested changes
Dec 23, 2025
| } | ||
|
|
||
| // Flex container for cell content (chips, icons, etc.) | ||
| .moonstone-tableCellContentWrapper { |
Collaborator
There was a problem hiding this comment.
To avoid repeating the same CSS, you can use our helper classes from layout.scss flexRow, alignCenter
| className | ||
| )} | ||
| style={{width: width}} | ||
| style={{width}} |
Collaborator
There was a problem hiding this comment.
- I think we need to specify the property
width - Don't forget to add
props.styleto allow our user to add custom style here
| /** | ||
| * Whether this row is currently expanded | ||
| */ | ||
| isExpanded: boolean; |
Collaborator
There was a problem hiding this comment.
Should this prop be optional? Because if the item is not expandable there is no reason to provide isExpanded
| /** | ||
| * Callback fired when the expand/collapse toggle is clicked | ||
| */ | ||
| onToggleExpand: () => void; |
Collaborator
There was a problem hiding this comment.
Should this prop be optional?
Comment on lines
63
to
78
| <Typography | ||
| ref={ref} | ||
| component={component} | ||
| variant="body" | ||
| className={clsx( | ||
| 'moonstone-TableCell', | ||
| 'textAlign' + capitalize(textAlign), | ||
| 'moonstone-verticalAlign' + capitalize(verticalAlign), | ||
| {flexFluid: typeof width === 'undefined'}, | ||
| className | ||
| )} | ||
| style={{width}} | ||
| {...props} | ||
| > | ||
| {renderContent()} | ||
| </Typography> |
Collaborator
There was a problem hiding this comment.
Maybe we should call TableCell directly instead of duplicating the code?
| const renderContent = () => { | ||
| if (isExpandable) { | ||
| return ( | ||
| <div |
Collaborator
There was a problem hiding this comment.
I am wondering if we can simply more, and get rid of some div and span by adding necessary classes directly to the td element.
ffffffelix
reviewed
Dec 23, 2025
| className={clsx( | ||
| 'moonstone-TableCell', | ||
| 'textAlign' + capitalize(textAlign), | ||
| 'flexRow', |
Collaborator
There was a problem hiding this comment.
I think we need to add gap: var(--spacing-nano) to .moonstone-TableCell
ffffffelix
approved these changes
Jan 5, 2026
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.