childRows is the same as leafRows in aggregationFns

[tonyxiao]

TanStack Table version

8.17.3

Framework/Library version

React

Describe the bug and the steps to reproduce it

import {
  getCoreRowModel,
  getFacetedRowModel,
  getFacetedUniqueValues,
  getFilteredRowModel,
  getPaginationRowModel,
  getGroupedRowModel,
  getSortedRowModel,
  useReactTable,
} from '@tanstack/react-table';

const events = [
  {id: '12', date: '2022-01-22', sold: 1, product: 'monitor'},
  {id: '1', date: '2022-01-20', sold: 20, product: 'tables'},
  {id: '2', date: '2022-01-21', sold: 4, product: 'tables'},
  {id: '3', date: '2022-01-22', sold: 2, product: 'tables'},
  {id: '4', date: '2022-01-23', sold: 3, product: 'tables'},
  {id: '5', date: '2022-01-20', sold: 10, product: 'chairs'},
  {id: '7', date: '2022-01-22', sold: 4, product: 'chairs'},
  {id: '8', date: '2022-01-23', sold: 1, product: 'chairs'},
  {id: '9', date: '2022-01-20', sold: 3, product: 'computer'},
  {id: '10', date: '2022-01-21', sold: 3, product: 'computer'},
  {id: '11', date: '2022-01-22', sold: 3, product: 'computer'},
];

describe.only('@tanstack/table useReactTable', () => {
  it('recursive grouping', async () => {
    const hook = renderHook(() => {
      return useReactTable({
        data: events,
        columns: [
          {accessorKey: 'date'},
          {accessorKey: 'product'},
          {accessorKey: 'sold', aggregationFn: 'custom' as 'auto'},
          {accessorKey: 'ALL'},
        ],

        getCoreRowModel: getCoreRowModel(),
        getGroupedRowModel: getGroupedRowModel(),
        getFilteredRowModel: getFilteredRowModel(),
        getFacetedRowModel: getFacetedRowModel(),
        getFacetedUniqueValues: getFacetedUniqueValues(),
        getSortedRowModel: getSortedRowModel(),
        getPaginationRowModel: getPaginationRowModel(),
        // debugTable: true,
        state: {
          grouping: ['ALL', 'product', 'date'],
        },
        aggregationFns: {
          custom: (colId, leafRows, childRows) => {
            console.log('custom', {
              colId,
              leafRows: leafRows.map((r) => r.id),
              childRows: childRows.map((r) => r.id),
            });
            return -1;
          },
        },
      });
    });

    act(() => {
      console.log(
        'hook.result.current.getRowModel().rows',

        JSON.stringify(
          hook.result.current.getRowModel().flatRows.map((r) => ({
            id: r.id,
            // original: r.original,
            // originalSubRows: r.originalSubRows,
            sold: r.getValue('sold'),
            subRowsCount: r.subRows.length,
            leafRowsCount: r.getLeafRows().length,
          })),
          null,
          2,
        ),

        // hook.result.current.getRowModel().flatRows.length,
      );
    });
  });
});

This will render the following log for the root row with id of ALL:undefined

console.log
    custom {
      colId: 'sold',
      leafRows: [
        '0', '1', '2',  '3',
        '4', '5', '6',  '7',
        '8', '9', '10'
      ],
      childRows: [
        '0', '1', '2',  '3',
        '4', '5', '6',  '7',
        '8', '9', '10'
      ]
    }

This is really strange. What's the difference between childRows vs. leafRows then?

Your Minimal, Reproducible Example - (Sandbox Highly Recommended)

See above

Screenshots or Videos (Optional)

No response

Do you intend to try to help solve this bug with your own PR?

None

Terms & Code of Conduct

• I agree to follow this project's Code of Conduct
• I understand that if my bug cannot be reliable reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.

[roykathurima]

I have the same issue. I had started a discussion here hoping to get some insight.