Grouped Column Display Value

[sdriffill-tm]

Hi team,

I've come across an issue where a column's Cell function isn't applied when that column is grouped. See minimal reproduction and screenshots below. A workaround is to use an accessorFn to do the value transformation rather than using the Cell function, however in my real-life use case I'm adding initialState sorting on the grouped column and my particular transform will change the sorting results, and I'd rather not have the added complexity of mapping the display value back to the original value.

Is there anything I'm missing here to achieve the desired result?

Thanks in advance for any investigation and appreciate this may be an underlying Tanstack Table issue.

const columnHelper = createMRTColumnHelper<{
    groupedColumn: string;
    ungroupedColumn: string;
  }>();

  const columns = [
    columnHelper.accessor('groupedColumn', {
      header: 'Grouped Column',
      visibleInShowHideMenu: false,
      Cell: ({ cell }) => cell.getValue().toUpperCase(),
    }),
    columnHelper.accessor('ungroupedColumn', {
      header: 'Ungrouped Column',
    }),
  ];

  const data = [
    {
      groupedColumn: 'lorem ipsum',
      ungroupedColumn: 'foo',
    },
    {
      groupedColumn: 'dolor sit amet',
      ungroupedColumn: 'bar',
    },
  ];

  return (
    <MaterialReactTable
      columns={columns}
      data={data}
      enableGrouping={true}
      groupedColumnMode="remove"
      initialState={{
        expanded: true,
        grouping: ['groupedColumn'],
      }}
    />
  );

With grouping on - displaying the original data value:

With grouping off - applying the Cell fn: