Expand Tanstack Table Row to display non-uniform data
Tags: tanstack, expandedrow, table, react
Published: 2024-07-04 21:13:26

You can **expand row** in **Tanstack Table** using [getCanExpand](https://tanstack.com/table/v8/docs/api/features/expanding) api as long as the row and sub rows data are uniform in structure.

**_"But what if you want to show non-uniform data in the sub row?"_**
 That is exactly what we will achieve today. :smiley: :cyclone:

<img width="100%" style="width:100%" src="https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExNGFweWpzdzl2ZHRlNHh2c29oZGdkcnQwMmU1bm52amx0OHBsYnV1MSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/5m47o8kmAxJYeZ9SXI/giphy.gif">



Still, if your use case is the later, you can follow tanstack example [here](https://tanstack.com/table/latest/docs/framework/react/examples/expanding) to achieve it.

## Lets begin!:rocket:
The complete code implementation can be found [here](https://github.com/Yanger-Rai/tanstack-table-tutorial), you can follow along.

We will make use of `getIsExpanded` api which is suitable for our use case.

For this tutorial, the table row object look like this; _amount_, _status_ and _email_ are the table column, the rest will be displayed in the expanded row:
```json
 {
      id: "728ed52f",
      amount: 100,
      status: "pending",
      email: "m@example.com",
      date: "2023-07-01",
      method: "credit_card",
      description: "Payment for subscription",
      transactionId: "TXN728ED52F",
 },
```

## Step 1:
 Begin by defining the column, add a click handler and use `getIsExpanded` to get the expanded state of the row.

```typescript
export const columns: ColumnDef<Payment>[] = [
  // this handle the row expands
  {
    id: "select",
    cell: ({ row }) => (
      <button onClick={() => row.toggleExpanded()}>
        {row.getIsExpanded() ? <CircleChevronDown /> : <CircleChevronUp />}
      </button>
    ),
  },
  //rest of the table columns
  {
    accessorKey: "status",
    header: "Status",
  },
  {
    accessorKey: "email",
    header: "Email",
  },
  {
    accessorKey: "amount",
    header: "Amount",
  },
];
```

## Step 2:
Defined your data table component. We will use `getIsExanded` api to get the state of row that is expanded and render rest of the data inside the table cell.

```typescript

export function DataTable<TData, TValue>({
  columns,
  data,
}: DataTableProps<TData, TValue>) {
  //define the expanded state
  const [expanded, setExpanded] = useState<ExpandedState>({});

  const table = useReactTable({
   //.. rest of the code
    onExpandedChange: setExpanded,
    getExpandedRowModel: getExpandedRowModel(),
    state: {
      expanded,
    },
  });

  return (
    <div className="rounded-md border">
      <Table>
        <TableHeader>
          //.. rest of the code
        </TableHeader>

        <TableBody>
          {table.getRowModel().rows?.length ? (
            table.getRowModel().rows.map((row) => (
              <>
              {/* this render the main columns */}
                <TableRow
                  key={row.id}
                  data-state={row.getIsSelected() && "selected"}
                >
                  //.. rest of the code
                </TableRow>
                {/* this render the expanded row */}
                {row.getIsExpanded() && (
                  <TableRow>
                    <TableCell colSpan={columns.length} className="h-24">
                      {/* You can create a seperate component to display the expanded data */}
                      <div className="grid px-10">
                        <h2 className=" font-bold">More Details</h2>
                        <p>
                          Transaction Id:{" "}
                          <span className=" text-slate-500">
                            {row.original.transactionId}
                          </span>
                        </p>
                        <p>
                          Transaction Date:{" "}
                          <span className=" text-slate-500">
                            {row.original.date}
                          </span>
                        </p>
                        <p>
                          Transaction Method:{" "}
                          <span className=" text-slate-500">
                            {row.original.method}
                          </span>
                        </p>
                        <p>
                          Description:{" "}
                          <span className=" text-slate-500">
                            {row.original.description}
                          </span>
                        </p>
                      </div>
                    </TableCell>
                  </TableRow>
                )}
              </>
            ))
          ) : (
            <TableRow>
              <TableCell colSpan={columns.length} className="h-24 text-center">
                No results.
              </TableCell>
            </TableRow>
          )}
        </TableBody>
      </Table>
    </div>
  );
}


```


and you should be able to take it from here, incase you missed it, you will find the complete code [here](https://github.com/Yanger-Rai/tanstack-table-tutorial). Do give a star :blush:

Thanks for dropping by 🌟
Add a ❤️ if you liked it.