Showing detail row if expanded
Hi all. I am using the getIsExpanded() function to render/not render a details row. (one details row per table row. In the cell of the name column, I use getToggleExpandedHandler() to toggle the expanded state, which then shows/hides the details row.
You can see it in the image below labelled as working.
However if I group on a column, that wont work. Expanding the grouped row, will show a details row before it is clicked. You can see this in the second image.
Is there are better way I could toggle this details row? I cant see a way to not expand that first row.
I'm using @tanstack/react-table: 8.10.7
Thanks,
2 Replies
genetic-orangeOP•2y ago
There is a github post from some time ago that raises the same issue: https://github.com/TanStack/table/discussions/3294. It identifies the issue that the grouping row and the first row of the group are sharing the same row.isExpanded state
genetic-orangeOP•2y ago
I got this working, with a pretty simple solution.
Instead of just checking for getIsExpanded:
{row.getIsExpanded() && (
<TableRow>
{/* 2nd row is a custom 1 cell row /}
<TableCell colSpan={row.getVisibleCells().length}>
{subComponent(row)}
</TableCell>
</TableRow>
)}
Check for a subrows count as follows:
{row.getIsExpanded() && row.subRows.length === 0 && (
<TableRow>
{/ 2nd row is a custom 1 cell row */}
<TableCell colSpan={row.getVisibleCells().length}>
{subComponent(row)}
</TableCell>
</TableRow>
)}
