Bug Report: cell.isGrouped Always Returns false Despite enableGrouping Being true (REACT)

[Aqib5wani]

TanStack Table version

8.9.3

Framework/Library version

v18.18.2

Describe the bug and the steps to reproduce it

Description When using react-table with grouping enabled, cell.isGrouped always returns false, even though enableGrouping is set to true in the column configuration. This issue persists despite ensuring that the table is properly configured for grouping.

Expected Behavior cell.isGrouped should return true for cells in grouped rows when enableGrouping is set to true in the column configuration.

Actual Behavior cell.isGrouped consistently returns false, regardless of the grouping settings.

Kindly have a look on the below example , also let us know are we doing something wrong.

Here is the minimal code example demonstrating the issue:

import React from 'react';
import { useTable, useGroupBy } from 'react-table';

export const TableComponent = ({ columns, data }) => {
  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow,
  } = useTable({ columns, data }, useGroupBy);

  return (
    <table {...getTableProps()}>
      <thead>
        {headerGroups.map(headerGroup => (
          <tr {...headerGroup.getHeaderGroupProps()}>
            {headerGroup.headers.map(column => (
              <th {...column.getHeaderProps()}>{column.render('Header')}</th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody {...getTableBodyProps()}>
        {rows.map(row => {
          prepareRow(row);
          return (
            <tr {...row.getRowProps()}>
              {row.cells.map(cell => {
                 console.log(cell.isGrouped); // Always false
                return (
                  <td {...cell.getCellProps({
                    className: cell.column.id === 'columnA2' ? 'custom-cell' : ''
                  })}>
                    {cell.render('Cell')}
                  </td>
                );
              })}
            </tr>
          );
        })}
      </tbody>
    </table>
  );
};

export const columnsa = [
  {
    Header: 'Group A',
    enableGrouping: true,
    columns: [
      { Header: 'Column A1', accessor: 'columnA1' },
      { Header: 'Column A2', accessor: 'columnA2' },
    ],
  },
  {
    Header: 'Group B',
    enableGrouping: true,
    columns: [
      { Header: 'Column B1', accessor: 'columnB1' },
      { Header: 'Column B2', accessor: 'columnB2' },
    ],
  },
];

export const data = [
  { columnA1: 'Data A1', columnA2: 'Data A2', columnB1: 'Data B1', columnB2: 'Data B2' },
  { columnA1: 'Data A1', columnA2: 'Data A2', columnB1: 'Data B1', columnB2: 'Data B2' },
];

If you have any ideas about how to resolve the issue, please provide them here

Your Minimal, Reproducible Example - (Sandbox Highly Recommended)

nan

Screenshots or Videos (Optional)

No response

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

No, because I do not know how

Terms & Code of Conduct

• [X] I agree to follow this project's Code of Conduct
• [X] 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.

[KevinVandy]

put this in a sandbox and it will get reviewed a lot faster

[Aqib5wani]

@KevinVandy pfa codeSandbox link codeSandbox