Why are the leafRows and subRows passed to the aggregationFn always the same even when I have multi-level grouping?

[roykathurima]

My Assumptions of the intended behavior

• The aggregationFn is passed the the column id, leafRows and subrows at all levels of grouping.
• The leafRows are the leaf rows under the current grouping (this' always correct) while the subrows are the immediate children of the current grouping which might include other grouping rows.

What am I attempting to do?

• I have a column called title. I want to capture the grouping value for the current level in this title. The leaf rows should have the actual title for the row, so there shouldn't be any issue there.
• To accomplish this, my approach is to read the the id of one of the passed subrows, then iterate over the flattened rows from the groupedRowModel to see if any of them has a subrow with the corresponding ID. If they do, I return the grouping value for that group. I kinda wish the aggregationFn was passed the current row, then I could just read it's grouping value. I did try reading the parentRow of the subRow but that doesn't work all the time. Anyway, I digress.

The question/the problem.

• The leafRows and childRows seem to be the same and they have the same depth. Meaning At all levels, the aggregationFn is being passed the leafRows and childRows as if it was being called on the grouping rows closest to the leaf rows. I would expect the subRows to be passed to have the correct depth depending on where the aggregationFn is called.

Steps to reproduce.

Here's a repository containing a sample react app that you can easily install and test this.

Info about my environment and quick context

node version: 18.12.1
os: ubuntu 24.04.1 lts

my package.json deps

  "dependencies": {
    "@tanstack/react-table": "^8.20.5",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
  },

code snippet

function App() {
  const [grouping, setGrouping] = useState([]);
  const columns = [
    columnHelper.display({
      id: 'expander',
      minSize: 4,
      cell: ({ row }) => {
        if (!row.getCanExpand()) return null;
        const text = row.getIsExpanded() ? "-" : ">"
        return (
          <button onClick={(e) => {
            e.stopPropagation();
            row.toggleExpanded();
          }}>{text}</button>
        );
      }
    }),
    columnHelper.accessor('title', {
      header: 'Title',
      cell: ({ getValue }) => <p>{getValue()}</p>,
      // getGroupingValue: row => row.title,
      aggregationFn: () => null,
    }),
    columnHelper.accessor('firstName', {
      header: 'First Name',
      cell: ({ getValue }) => <p>{getValue()}</p>,
    }),
    columnHelper.accessor('lastName', {
      header: 'Last Name',
      cell: ({ getValue }) => <p>{getValue()}</p>,
      aggregationFn: () => null,
    }),
    columnHelper.accessor('age', {
      header: 'Age',
      cell: ({ getValue }) => <p>{getValue()}</p>,
      aggregationFn: (_, leafRows, childRows) => {
        const leafRowDepths = new Set();
        const childRowDepths = new Set();
        leafRows.forEach(rw => {
          leafRowDepths.add(rw.depth);
        });
        childRows.forEach(rw => {
          childRowDepths.add(rw.depth);
        });
        let groupingValue;
        const tableInstance = leafRows[0].getAllCells()[0].getContext().table;
    
        const gRows = tableInstance.getGroupedRowModel().flatRows;
    
        for (let gRow of gRows) {
          const child = gRow.subRows.find(item => item.id === childRows[0].id);
          if (child) {
            groupingValue = gRow.groupingValue;
          }
        }
        return groupingValue;
      }
    }),
  ];

  const addGrouping = () => {
    const diff = allSet.filter(item => !grouping.find(pItem => pItem === item));
    if (diff.length > 0) {
      const newState = [...grouping, diff[0]];
      setGrouping(newState)
    }
  };

  const removeGrouping = () => {
    if (grouping.length > 0) {
      const newState = [...grouping];
      newState.pop();
      setGrouping(newState);
    }
  };

  const table = useReactTable({
    data,
    columns,
    state: { grouping },
    groupedColumnMode: false,
    onGroupingChange: setGrouping,
    getCoreRowModel: getCoreRowModel(),
    getExpandedRowModel: getExpandedRowModel(),
    getGroupedRowModel: getGroupedRowModel(),
  });

  return (
    <main>
    <button onClick={addGrouping}>Add Grouping</button>
    <button onClick={removeGrouping}>Remove Grouping</button>
    <table>
      <thead>
      {table.getHeaderGroups().map(hg => (
        <tr key={hg.id}>
          {hg.headers.map(header => (
            <th key={header.id}>
              {flexRender(header.column.columnDef.header, header.getContext())}
            </th>
          ))}
        </tr>
      ))}
      </thead>
      <tbody>
        {table.getRowModel().rows.map(row => (
          <tr key={row.id}>
            {row.getVisibleCells().map(cell => (
              <td key={cell.id}>
                {flexRender(cell.column.columnDef.cell, cell.getContext())}
              </td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
    </main>
  )
}