T
TanStack•3y ago
variable-lime

Expanding Row to show non table data

Is it possible to have a row expand to show not the exact same table data, but to show arbitrary data in whatever form I'd like? So far, I've only be able to get rows to expand at all if I implement the "getSubRows" function on the table. This doesn't appear to allow me to have the data I need? Any feedback greatly appreciated. Many thanks.
3 Replies
mere-teal
mere-teal•3y ago
If I got you right and If you use shadcn-ui you need Collapsible and something like that. 
<Collapsible key={row.id} asChild>
  <>
    <TableRow>
      <TableCell>cell data</TableCell>
      <TableCell>cell data/TableCell>
      <TableCell>cell data
        <CollapsibleTrigger asChild>
          <div>cell data</div>
        </CollapsibleTrigger>
      </TableCell>
    </TableRow>
    <CollapsibleContent asChild>
      whatever data
    </CollapsibleContent>
  </>
</Collapsible>
<Collapsible key={row.id} asChild>
  <>
    <TableRow>
      <TableCell>cell data</TableCell>
      <TableCell>cell data/TableCell>
      <TableCell>cell data
        <CollapsibleTrigger asChild>
          <div>cell data</div>
        </CollapsibleTrigger>
      </TableCell>
    </TableRow>
    <CollapsibleContent asChild>
      whatever data
    </CollapsibleContent>
  </>
</Collapsible>
eastern-cyan
eastern-cyan•3y ago
I think this will only work if you, when you expand the row, fetch the data you want to show and update tableData to include it. It would allow for an antipattern in my opinion to have the table display data that is not contained in its state structure. However, nothing stops you from defining a state structure that can be updated with arbitrary data that you can display in any way you want.
like-gold
like-gold•3y ago
There is an example to achieve this: https://tanstack.com/table/v8/docs/examples/react/sub-components
React Table Sub Components Example | TanStack Table Docs
An example showing how to implement Sub Components in React Table

Did you find this page helpful?