Skip to content

Conversation

@Elessar1802
Copy link
Contributor

@Elessar1802 Elessar1802 commented Jan 5, 2026

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 isExpandedRow field in CellComponent props. Similarly if we want to style the row that expands we can use the isRowInExpandedState prop of CellComponent

Copilot AI review requested due to automatic review settings January 5, 2026 16:51
Copy link

Copilot AI left a 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.

Comment on lines 190 to 199
const toggleExpandAll = () => {
setExpandState(
visibleRows.reduce((acc, row) => {
if ((row as RowType<RowData>).expandableRows) {
acc[row.id] = !areAllRowsExpanded
}

return acc
}, {}),
)
Copy link

Copilot AI Jan 5, 2026

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.

Copilot uses AI. Check for mistakes.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants