DEV Community

Cover image for Expand Tanstack Table Row to display non-uniform data
Yanger Rai
Yanger Rai

Posted on

3

Expand Tanstack Table Row to display non-uniform data

You can expand row in Tanstack Table using getCanExpand 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. 😃 🌀

Still, if your use case is the later, you can follow tanstack example here to achieve it.

Lets begin!🚀

The complete code implementation can be found here, 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:

 {
      id: "728ed52f",
      amount: 100,
      status: "pending",
      email: "m@example.com",
      date: "2023-07-01",
      method: "credit_card",
      description: "Payment for subscription",
      transactionId: "TXN728ED52F",
 },
Enter fullscreen mode Exit fullscreen mode

Step 1:

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

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",
  },
];
Enter fullscreen mode Exit fullscreen mode

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.


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>
  );
}


Enter fullscreen mode Exit fullscreen mode

and you should be able to take it from here, incase you missed it, you will find the complete code here. Do give a star 😊

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

Heroku

Build apps, not infrastructure.

Dealing with servers, hardware, and infrastructure can take up your valuable time. Discover the benefits of Heroku, the PaaS of choice for developers since 2007.

Visit Site

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay