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:

[dicadev]

I have this same issue.
The GroupedCell only seems to work when groupedColumnMode="reorder".
I was also using the accessorFn as a workaround; however, this is not enough if your cell component is more complex (e.g. being a totally customized component) instead of just a value transforamtion.

[dicadev]

In case it helps, I have also made a workaround for custom components.
in my case, I produce the columns aside with extra parameters which are not directly accessible from the table component.
Thus, I have added them to the column definition and used them inside the Cell in mrt-row-expand:

  displayColumnDefOptions: {
      'mrt-row-expand': {
        Cell: ({ row, table }): React.ReactNode => {
          const { grouping } = table.getState()
          const groupedColumnId = grouping[grouping.length - 1]

          // Get the column definition for the grouped column
          const groupedColumn = table.getColumn(groupedColumnId)
          const columnDef =
            groupedColumn?.columnDef as ExtendedColumnDef<MRT_RowData>

          if (columnDef == null) return null

          const name = groupedColumnId
          const value = row.getValue(groupedColumnId)
          const subRowsCount = row.subRows?.length ?? 0
          const {
            attachments,
            versionsAppearing,
            fieldType,
            trueValue,
            falseValue,
          } = columnDef

          // Get attachment values if available
          const attachmentValues:
            | Array<{ uid: string; document_type: string }>
            | undefined =
            attachments !== undefined ? row.original[attachments[0]] : undefined

          // Check version applicability
          if (
            name !== 'version' &&
            name !== 'validFrom' &&
            name !== 'validTo'
          ) {
            const currentVersion = row.original.version
            const isVersionApplicable =
              !currentVersion ||
              !versionsAppearing ||
              (Array.isArray(versionsAppearing) &&
                versionsAppearing.includes(currentVersion as string))

            if (!isVersionApplicable) {
              return (
                <div>
                  Not applicable to version {currentVersion} ({subRowsCount})
                </div>
              )
            }
          }

          // Handle boolean fields
          if (fieldType === 'boolean') {
            return `${value === 'true' ? trueValue : falseValue} (${subRowsCount})`
          }

          // Default rendering with CollapsedCell
          return (
            <div className="flex flex-row gap-2">
              <MRT_ExpandButton row={row} table={table} />
              <CollapsedCell
                value={value as string}
                size={300}
                showTooltip={table.getState().density === 'compact'}
                attachment={attachmentValues}
              />
              <span className="flex items-center">({subRowsCount})</span>
            </div>
          )
        },
      },
    },

@sdriffill-tm I hope this helps you with your case.