How to use table inside table?

[jlei523]

I'm using the latest react-table version.

I have a table with rows that expand into more rows:

Expanded state:

How can I recreate this?

Should I put another instance of react-table inside each row that expands? How can the sub-table instance share the same columns as the original table?

Thank you for your work Tanner!

[BrianMitchL]

If you add data to the subRow property on your data object, an expanded row using the useExpanded hook should display that data.

I have a use-case that I'm trying to work through right now where I'd like to fetch data for an expanded row when expanding that row, but without needing to re-supply and build all of the markup. Pre-fetching all of the subRow data for a fully controlled/manual table is too expensive from a backend perspective. Haven't figured out a good solution yet...

[raikusy]

Hey, I'm looking for a similar solution. Did you come up with anything?

[dbertella]

The above is possible to obtain with a single table but it will be very painful to maintain, basically I'm doing the same and I'm just using subRow and useExpanded as mentioned before, the problem are footers. So I precompute all the totals at the beginning and all the footers are just normal rows and I explicitly mapping them as footer (giving them a different style) code it's quite ugly but if you play with it you can make it.

I was looking into the same solution to have multiple tables but then they will go out of sync very easily and since you are using this prepareRow function that mutates the rows it's very hard I believe to extrapolate pieces and work with it.

If you find any solution please share it! I'll be very interested in seeing something like the above working in a nice way

[bytesagar]

@dbertella Do you have any references?

[jlei523]

Maybe @tannerlinsley has a good way to do this?

[vasanthi-d]

@jlei523 - were you able to find a solution to this? I have a similar use case to build.

[jlei523]

I ended up not using React-table for this. Just divs.

[vasanthi-d]

Thank you @jlei523 for the response.

[bipin-n43]

I have a similar use case , can you please suggest me the best approach to do it as im using react-table in all other pages of project so would be better if its possible with react table, i managed to render table inside a table but i couldnt add a logic that displays choosen subtables , apparently i used state to figure out which row is clicked but it displays just one and hides all others, please suggest me an idea to hide show multiple subtables

[yav0602]

Seems, material-react-table which is based on this library has such feature "Detail Panel" to render different stuff, when row is expanded. I tried to research source code of that library, and I couldn't understand how does it bypass "subRows" property, because @tanstack/table, as I understand, depends on "getSubRows" property, when you implement row expanding. One more thing is that the developer of that lib is one of the devs of @tanstack/table. Maybe he could show some example how to do this?

[chie7tain]

Were you able to figure out how to add another table inside the expansion with diff headers ? Because I am trying to do the same now even the Material-react-table lib ? It would really help me out

[hanif-ali]

@chie7tain were to able to figure this out?

[raychengy]

I was able to figure out a way to display a nested table that has different headers/columns.

One method requires you to use "row.toggleExpanded" as your on-click handler instead of getToggleExpandedHandler since that method checks for "row.getCanExpand". And on your UI-table implementation, you'll need to add your own nested table depending on row.isExpanded. Here's an example of something similar to above codesandbox.

Or you can overwrite the table option "getRowCanExpand" to bypass the default check of "row.subRows". This will allow you to use getToggleExpandedHandler for your on-click handler. You'll still need to implement on the UI-table the nested table within your row.

[adamspotlite]

@raychengy looks like this codesandbox link is busted - do you have another / put in a code example?

[javed24]

@raychengy same query as @adamspotlite from above. Could use a working link for the example you mentioned above.

[jhigger]

I had the same issue and I just wanna share the hack that i did to solve this problem in a table for mobile screen size in a project I'm doing.
I added an accordion and it puts a blank row at the bottom when you click it. The sub table is also shown on top of the blank row as an absolute <td></td> tag relative to the row of the main table. This new sub table can also be scrolled horizontally. I only displayed a few column headers on the row of the main table and so I excluded those column headers in the sub table using filter.

I am new to this so please excuse my code thank you.

{/* mobile table */}
<table className="relative w-max min-w-full md:hidden">
  <thead className="title-sm sticky top-0 z-20 bg-white font-medium text-neutral-900">
    {table.getHeaderGroups().map((headerGroup) => (
      <tr key={headerGroup.id}>
        {headerGroup.headers
          .filter((header) => filters.includes(header.column.id))
          .map((header) => (
            <th key={header.id} className="border-0 p-[8px]">
              {header.isPlaceholder ? null : (
                <div
                  {...{
                    className: header.column.getCanSort()
                      ? "cursor-pointer select-none flex gap-[10px]"
                      : "flex items-center",
                    onClick:
                      header.column.getToggleSortingHandler(),
                  }}
                >
                  {flexRender(
                    header.column.columnDef.header,
                    header.getContext(),
                  )}
                  {header.column.getCanSort() && (
                    <ArrowSwapVertical
                      className="self-end text-neutral-500"
                      size="20"
                    />
                  )}
                </div>
              )}
            </th>
          ))}
        <th className="border-0 p-[8px]">
          {/* placeholder for accordion */}
        </th>
      </tr>
    ))}
  </thead>
  <tbody className="border-y-[1px] border-gray-500 [&>tr]:border-b-[1px] [&>tr]:border-gray-500 last:[&>tr]:border-b-0">
    {table
      .getRowModel()
      .rows.slice(startRowIndex, endRowIndex)
      .map((row) => {
        return (
          <TableRow
            key={row.id}
            row={row}
            filters={filters}
            columns={columns}
          />
        );
      })}
  </tbody>
</table>

type TableRowProps<T> = {
  row: Row<T>;
  filters: string[];
  columns: ColumnDef<T>[];
};

const TableRow = <T extends object>({
  row,
  filters,
  columns,
}: TableRowProps<T>) => {
  const { open, toggle } = useAccordion(false);

  return (
    <Fragment>
      <tr className="relative bg-gray-10">
        {row
          .getVisibleCells()
          .filter((cell) => filters.includes(cell.column.id))
          .map((cell) => (
            <td key={cell.id} className="border-0 p-[8px]">
              {flexRender(cell.column.columnDef.cell, cell.getContext())}
            </td>
          ))}

        <td className="border-0 p-[8px]">
          <AccordionButton open={open} toggle={toggle} />
        </td>

        {open && (
          <td className="absolute left-0 top-[76px] z-10 w-full overflow-auto border-0 border-b border-gray-500 bg-gray-10 p-0">
            <SubTable data={[row.original]} columns={columns} />
          </td>
        )}
      </tr>
      {open && (
        <tr>
          <td className="border-0 p-[8px]">
            <div className="mb-[96px]"></div>
          </td>
        </tr>
      )}
    </Fragment>
  );
};

interface SubTableProps<T extends object> {
  data: T[];
  columns: ColumnDef<T>[];
}

const SubTable = <T extends object>({ data, columns }: SubTableProps<T>) => {
  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
  });

  const filters = useMemo(
    () => ["checkbox", "images", "orderId", "actions"],
    [],
  );

  return (
    <table className="relative w-max min-w-full bg-[#EBE0E859]">
      <thead className="title-sm sticky top-0 z-10 font-medium text-neutral-900">
        {table.getHeaderGroups().map((headerGroup) => (
          <tr key={headerGroup.id}>
            {headerGroup.headers
              .filter((header) => !filters.includes(header.column.id))
              .map((header) => (
                <th key={header.id} className="border-0">
                  {header.isPlaceholder ? null : (
                    <>
                      {flexRender(
                        header.column.columnDef.header,
                        header.getContext(),
                      )}
                    </>
                  )}
                </th>
              ))}
          </tr>
        ))}
      </thead>
      <tbody>
        {table.getRowModel().rows.map((row) => (
          <tr key={row.id}>
            {row
              .getVisibleCells()
              .filter((cell) => !filters.includes(cell.column.id))
              .map((cell) => (
                <td key={cell.id} className="border-0">
                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
                </td>
              ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
};

[adamspotlite]

What is the suggested way to do a non-subRow style render? For instance, I would love to render an arbitrary component under a row, e.g. a table inside a table, but every attempt I've tried ends up with the second component only with the width of the first cell of the parent table.

I'm currently rendering like this:

          
            {table.getRowModel().rows.map((row) =>
              row.getIsExpanded() ? (
                <>
                  <UITableRow<T> key={row.id} row={row} />
                  {ExpandedRowComponent && (
                    <div className="flex w-full">
                      <ExpandedRowComponent row={row.original} />
                    </div>
                  )}
                </>
              ) : (
                <UITableRow<T> key={row.id} row={row} />
              ),
            )
          )}
          ```

Where does the onus of that render belong? Inside a `UITableRow` element? Or is it better to render _two_ `TableRow` for an expanded row - one for the principal and one for the expanded component?

Appreciate the help!

[aaronleopold]

every attempt I've tried ends up with the second component only with the width of the first cell of the parent table

I am using a nested table in one of my projects, it isn't perfect (and I haven't figured out coordinating virtualization between the nested tables yet) but hopefully this helps: /~https://github.com/stumpapp/stump/blob/develop/packages/browser/src/scenes/smartList/items/table/GroupedSmartListItemTable.tsx#L153-L159

The TLDR; for getting the sizing right is that I wrap my nested table in a row with one cell that has a colSpan of the number of columns in the parent table.

[adamspotlite]

@aaronleopold you know when you come across someone random on the internet that just has exactly what you're looking for? you were that for me today! Thanks so much.

[dlibis]

@aaronleopold did you delete the conpnent? Getting 404 on dev branch

[aaronleopold]

I've updated the link, the component was relocated