T
TanStack•5mo ago
stormy-gold

Grouping / Expanding features

Hello, I'm currently looking to implement a feature where I need to expand some data. I've tried to achieve it looking at the documentation without success. I'm trying to do something similar to this: https://glin.github.io/reactable/articles/examples.html#nested-tables My table have rows and nested rows but the parent row does not have the same format as the children rows. It is mostly like having a nested table inside each expanded rows. In all the example I've found the parent rows mostly have the same structure as the children. (even with a similar structure the parent row displays columns that does not match with the children) Does anyone succeed to achieve something similar ? Thanks in advance for the responses
Examples
reactable
2 Replies
foreign-sapphire
foreign-sapphire•5mo ago
I'm doing that. I found that there are different way to achieve the same result but what I do is something like that: 
const rows = table.getRowModel().rows;

rows.map((row) => {
if (!row.getIsGrouped()) {
  return;
}
const leafRows = row.getLeafRows();
<div
  key={row.id + "group"}
>
  <div
    key={row.id}
    onClick={row.getToggleExpandedHandler()}
  >
    {/* Main grouped row (Collapseable Header)*/}
    {row.getVisibleCells().map((cell) => (
    
    ))}
  </div>
  {row.getIsExpanded() &&
    leafRows.map((leaf, index) => (
      <div
        key={leaf.id}
        )}
      >
        {leaf.getVisibleCells().map((cell) => {
        return flexRender(cell.column.columnDef.cell, {
        ...cell.getContext()})
      </div>
    ))
  }
</div>
const rows = table.getRowModel().rows;

rows.map((row) => {
if (!row.getIsGrouped()) {
  return;
}
const leafRows = row.getLeafRows();
<div
  key={row.id + "group"}
>
  <div
    key={row.id}
    onClick={row.getToggleExpandedHandler()}
  >
    {/* Main grouped row (Collapseable Header)*/}
    {row.getVisibleCells().map((cell) => (
    
    ))}
  </div>
  {row.getIsExpanded() &&
    leafRows.map((leaf, index) => (
      <div
        key={leaf.id}
        )}
      >
        {leaf.getVisibleCells().map((cell) => {
        return flexRender(cell.column.columnDef.cell, {
        ...cell.getContext()})
      </div>
    ))
  }
</div>
This is just part of the code to show you the way it is done. Is did something different before where I used the isExpanded but the code became too complex and I prefered this version where I get the leafRows. This makes my table to have expandable part where each day can be expanded. But I will try to do it without TS table as it is the slowest part of the app and I don't know why. I also use react compiler and had to deactivate it on the component that use TS table. Maybe I should try v9 before moving out of it. But I'm start to think that in my use case a data table library might be overkill as I don't really see the benefit right now.
correct-apricot
correct-apricot•5mo ago
How do you define your sub-columns with this method?

Did you find this page helpful?