Support for Column Grouping and Row Grouping in TreeDataGrid

[eliasmelgaco]

I am trying to use the TreeDataGrid component along with ColumnOrColumnGroup in the columns property to achieve both column grouping and row grouping in react-data-grid. However, it seems that this is not working as expected.

Current Setup

Here is the current setup of my code:

import { SelectColumn, TreeDataGrid, ColumnOrColumnGroup } from 'react-data-grid';
import { useState } from 'react';

const [expandedGroupIds, setExpandedGroupIds] = useState((): ReadonlySet<unknown> => new Set<unknown>([]));

const expandedGroupIds = new Set([
  'contract',
  'change-order',
  ...newData.map((row) => `${row.order_type}__${row.order_id}`)
]);
setExpandedGroupIds(expandedGroupIds);

const columns: ColumnOrColumnGroup<YourRowType>[] = [
  SelectColumn,
  {
    key: 'order_info',
    name: 'Order Information',
    children: [
      {
        key: 'order_type',
        name: 'Type',
        width: 100,
        renderGroupCell: ({ groupKey }) => (groupKey === 'contract' ? 'Contract' : 'Change Order')
      },
      {
        key: 'order_id',
        name: 'Order',
        frozen: true,
        width: 200,
      }
    ]
  },
  {
    key: 'financial_info',
    name: 'Financial Information',
    children: [
      {
        key: 'cost_code_id',
        renderCell: ({ row }) => {
          ...
        },
        name: 'Cost Code',
        frozen: true
      },
      {
        key: 'description',
        name: 'Description of Work',
        width: 200
      }
    ]
  }
];

const MyDataGrid = () => (
  <TreeDataGrid
    rowKeyGetter={rowKeyGetter}
    columns={columns}
    rows={rows}
    onRowsChange={handleChangeRows}
    groupBy={['order_type']}
    rowGrouper={rowGrouper}
    expandedGroupIds={expandedGroupIds}
    onExpandedGroupIdsChange={setExpandedGroupIds}
    className="fill-grid rdg-light"
  />
);

export default MyDataGrid;