grouping to break table into separate tables similar to notion

[Fawwaz-2009]

hello all 👋 , I'm trying to figure out what is the best way to build table grouping flow similar to notion, where grouping by column cause the data to be split into multiple mini tables. However, I am concerned that my current approach may disrupt aggregations and filtering. Could anyone you provide some insights or suggestions on how to properly render a grouped table into multiple tables without compromising aggregation or filtering functionality

const ReactTable: React.FC<NotionTableProps> = ({ data, columns, groupingBy, addColumnSlot }) => {
  const dispatch = useDispatch();

  const table = useReactTable({
    data: data,
    columns: columns,
    getCoreRowModel: getCoreRowModel(),
    getExpandedRowModel: getExpandedRowModel(),
    getGroupedRowModel: getGroupedRowModel(),
    aggregationFns: {
        myCustomAggregation: (columnId, leafRows, childRows) => {
            console.log("fired");
            console.log({
                columnId,
                leafRows,
                childRows
            });
        },
      },
    state: {
      grouping: groupingBy,
      expanded: true,
    },
  });
  const groupedRowModel = table.getGroupedRowModel();

  const tableRows: {
    groupedRow: null | Row<any>;
    leafRows: Row<any>[];
  }[] = useMemo(() => {
    const isGrouped = groupedRowModel.rows.some((row) => row.getIsGrouped());
    if (!isGrouped)
      return [
        {
          groupedRow: null,
          leafRows: groupedRowModel.rows,
        },
      ];
    return groupedRowModel.rows.map((groupedRow) => ({
      groupedRow,
      leafRows: groupedRow.getLeafRows(),
    }));
  }, [groupedRowModel.rows]);
  return (
    <div className="flex flex-col gap-28">
      {tableRows.map(({ groupedRow, leafRows }, index) => {
        return (
          <Table className="min-w-[40rem]" key={groupedRow?.id || "root"}>
            <TableHeader>
              {table.getHeaderGroups().map((headerGroup) => (
                <TableRow key={headerGroup.id}>
                  {headerGroup.headers.map((header) => {
                    return <FieldTh key={header.id} columnId={header.id} />;
                  })}
                  <th>{addColumnSlot}</th>
                </TableRow>
              ))}
            </TableHeader>

            <TableBody>
              {leafRows.length ? (
                leafRows.map((row) => (
                  <TableRow key={row.id} className="min-h-[1.5rem]">
                    {row.getVisibleCells().map((cell) => {
                      return <FieldTd key={cell.id} columnId={cell.column.id} rowIndex={row.index} />;
                    })}
                  </TableRow>
                ))
              ) : (
                <TableRow>
                  <TableCell colSpan={columns.length} className="h-24 text-muted-foreground text-start">
                    Empty. Click to add a row.
                  </TableCell>
                </TableRow>
              )}
              <TableRow>
                <TableCell colSpan={columns.length} className="h-24 text-center">
                  {/* <AddRow add={addRow} /> */}
                  <Button variant="ghost" size={"icon"} className="p-1 my-2" onClick={() => dispatch(addRow())}>
                    <Plus size={16} />
                  </Button>
                </TableCell>
              </TableRow>
            </TableBody>
          </Table>
        );
      })}
    </div>
  );
};