Row grouping in data-table

[JuanPedroPontVerges]

Hello guys.
How can I have row grouping in the current data-table. Meaning that if a click a row, more rows should expand from it? If anyone has an idea please help.

[lucasfelixc]

Hi @JuanPedroPontVerges, to be honest, I've never used an expandable line, but to give you a way to solve this, maybe you could use an accordion component on the row. I just don't know how you can put other lines inside the accordion, but maybe this is a good way to go.

[JuanPedroPontVerges]

So i've figured out a way to have a collapse in a row.

<TableBody>
  {table.getRowModel().rows?.length ? (
    table.getRowModel().rows.map((row) => (
      <Collapsible key={row.id} asChild>
        <>
          <CollapsibleTrigger asChild>
            <TableRow data-state={row.getIsSelected() && "selected"} className="!appearance-none">
              {row.getVisibleCells().map((cell) => (
                <TableCell key={cell.id}>
                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
                </TableCell>
              ))}
            </TableRow>
          </CollapsibleTrigger>
          <CollapsibleContent asChild>
            <ExpandedContent dollars={[]} />
          </CollapsibleContent>
        </>
      </Collapsible>
    ))
  ) : (
    <TableRow>
      <TableCell colSpan={columns.length} className="h-24 text-left sm:text-center">
        Sin resultados.
      </TableCell>
    </TableRow>
  )}
</TableBody>

And this is how the ExpandedContent component looks like:

const ExpandedContent: React.FC<ExpandedContentType> = ({ dollars }) => {
  return (
    <>
      <TableRow>
        <TableCell>{1}</TableCell>
        <TableCell>{2}</TableCell>
        <TableCell>Holis!!</TableCell>
      </TableRow>
      <TableRow>
        <TableCell>{1}</TableCell>
        <TableCell>{2}</TableCell>
        <TableCell>Holis!!</TableCell>
      </TableRow>
      <TableRow>
        <TableCell>{1}</TableCell>
        <TableCell>{2}</TableCell>
        <TableCell>Holis!!</TableCell>
      </TableRow>
    </>
  );
};

export default ExpandedContent;

And you end up having something like this:

[susilthapa]

Works Great!
One question, how sorting works?

[JuanPedroPontVerges]

I dont know how sorting works for default in grouped data structures. You can use the sortingFn in the column definition though, there you can define your own sorting logic

sortingFn: (rowA, rowB, columnId) => { // Your logic inside here }

[susilthapa]

@JuanPedroPontVerges Thanks! Will look into that.

[linaffilomania]

hi , do you know How to allow only one row to be open at a time

[linaffilomania]

hi do you know How to allow only one row to be open at a time?