How to group rows together like this?
See image, the ability to group rows based on a certain category :) Thanks!
2 Replies
conscious-sapphireOP•2y ago
Would appreciate a hint on how to produce this with tanstack-table! 🙏
helpful-purple•2y ago
We have something like this for that. Not sure if it can be improved but it does the trick.
<TableBody> {virtualRows.map((virtualRow, index) => {
const row = rows[virtualRow.index] as Row<RowType>;
return (
<Fragment key={row.id}>
{row.getIsGrouped() ? (
<TableRow
onClick={(e) => {
e.stopPropagation();
row.toggleExpanded();
}} ref={rowVirtualizer.measureElement}
data-index={row.index}
>
<TableCell component="th" colSpan={row.getVisibleCells().length} className="group">
<Stack direction="row" columnGap={1} alignItems="center">
<RowToggle onToggleExpanded={row.toggleExpanded} expanded={row.getIsExpanded()} />
{groupComponent?.(row.groupingValue as string, row.subRows.length)}
</Stack>
</TableCell>
</TableRow>
) : (
<>
<TableRow className={row.getIsSelected() ? 'selected' : undefined}
data-row-index={`row-${index}`}
onClick={(event) => {...}}
onKeyUp={...}
ref={rowVirtualizer.measureElement}
data-index={row.index}
>
{row.getVisibleCells().map((cell) => (
<TableCell> {flexRender(cell.column.columnDef.cell, cell.getContext())}
</TableCell>
))}
</TableRow>
</>
)}
</Fragment>
);
})}
</TableBody>
<TableBody> {virtualRows.map((virtualRow, index) => {
const row = rows[virtualRow.index] as Row<RowType>;
return (
<Fragment key={row.id}>
{row.getIsGrouped() ? (
<TableRow
onClick={(e) => {
e.stopPropagation();
row.toggleExpanded();
}} ref={rowVirtualizer.measureElement}
data-index={row.index}
>
<TableCell component="th" colSpan={row.getVisibleCells().length} className="group">
<Stack direction="row" columnGap={1} alignItems="center">
<RowToggle onToggleExpanded={row.toggleExpanded} expanded={row.getIsExpanded()} />
{groupComponent?.(row.groupingValue as string, row.subRows.length)}
</Stack>
</TableCell>
</TableRow>
) : (
<>
<TableRow className={row.getIsSelected() ? 'selected' : undefined}
data-row-index={`row-${index}`}
onClick={(event) => {...}}
onKeyUp={...}
ref={rowVirtualizer.measureElement}
data-index={row.index}
>
{row.getVisibleCells().map((cell) => (
<TableCell> {flexRender(cell.column.columnDef.cell, cell.getContext())}
</TableCell>
))}
</TableRow>
</>
)}
</Fragment>
);
})}
</TableBody>