-
Notifications
You must be signed in to change notification settings - Fork 6
feat: add expandable rows support in table #996
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: develop
Are you sure you want to change the base?
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Pull request overview
This PR adds expandable rows functionality to the generic table component, allowing rows to have nested child rows that can be expanded or collapsed on demand.
Key Changes:
- Type definitions extended to support expandable and expanded row types with ID constraints
- State management for tracking which rows are expanded
- Toggle functionality for individual rows and "expand/collapse all" feature
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 11 comments.
| File | Description |
|---|---|
| src/Shared/Components/Table/types.ts | Refactored row types to support expandable rows with new ExpandedRowType and modified RowType to include optional expandableRows array; added isExpandedRow and isRowInExpandState props to CellComponentProps |
| src/Shared/Components/Table/styles.scss | Added styling for expanded rows with distinct background color and an unused __expanse class |
| src/Shared/Components/Table/TableContent.tsx | Implemented expand/collapse logic with state management, rendering of expand buttons, filtering visible rows to include expanded children, and grid template adjustments for expand column |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| const toggleExpandAll = () => { | ||
| setExpandState( | ||
| visibleRows.reduce((acc, row) => { | ||
| if ((row as RowType<RowData>).expandableRows) { | ||
| acc[row.id] = !areAllRowsExpanded | ||
| } | ||
|
|
||
| return acc | ||
| }, {}), | ||
| ) |
Copilot
AI
Jan 5, 2026
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The toggleExpandAll function uses visibleRows which already includes expanded rows, but should iterate over only the original rows (paginatedRows) instead. This causes the logic to work on both parent and expanded child rows, when it should only work on parent rows with expandableRows. Consider using the paginatedRows before expansion or filtering out expanded rows from visibleRows.
…-fe-common-lib into feat/app-list-table
Added support for expandable rows in table. Taking in the expanded row data from user in RowType itself.
The expanded rows are like ordinary rows itself. To custom style these differently than normal cells, we can use the
isExpandedRowfield in CellComponent props. Similarly if we want to style the row that expands we can use theisRowInExpandedStateprop of CellComponent