[data grid] Inserting custom label element as a prop to ColumnsPanel

[gepa7]

Summary

I would like to insert Column groups' name as a separator into ColumnsPanel. I rolled out a solutions using useRef with plain JavaScript on CustomPanel component. Is there a cleaner way?

import * as React from 'react';
import {
  DataGrid,
  GridColDef,
  GridColumnGroupingModel,
  GridColumnsManagement,
  GridPanelWrapper,
  GridPanelWrapperProps,
  GridToolbar,
  useGridRootProps,
} from '@mui/x-data-grid';
import { useEffect, useRef } from 'react';

const columns: GridColDef[] = [
  { field: 'id', headerName: 'ID', width: 90 },
  {
    field: 'age',
    headerName: 'Age',
    type: 'number',
    width: 110,
  },
  {
    field: 'firstName',
    headerName: 'First name',
    width: 150,
  },
  {
    field: 'lastName',
    headerName: 'Last name',
    width: 150,
  },
];

const rows = [
  { id: 1, lastName: 'Snow', firstName: 'Jon', age: 14 },
  { id: 2, lastName: 'Lannister', firstName: 'Cersei', age: 31 },
  { id: 3, lastName: 'Lannister', firstName: 'Jaime', age: 31 },
  { id: 4, lastName: 'Stark', firstName: 'Arya', age: 11 },
  { id: 5, lastName: 'Targaryen', firstName: 'Daenerys', age: null },
  { id: 6, lastName: 'Melisandre', firstName: null, age: 150 },
  { id: 7, lastName: 'Clifford', firstName: 'Ferrara', age: 44 },
  { id: 8, lastName: 'Frances', firstName: 'Rossini', age: 36 },
  { id: 9, lastName: 'Roxie', firstName: 'Harvey', age: 65 },
];

const columnGroupingModel: GridColumnGroupingModel = [
  {
    groupId: 'Full name',
    children: [{ field: 'lastName' }, { field: 'firstName' }],
  },
];

const CustomGridColumnsPanel = (props: GridPanelWrapperProps) => {
  const rootProps = useGridRootProps();

  const panelWrapperRef = useRef<HTMLDivElement | null>(null);

  useEffect(() => {
    const separator = panelWrapperRef.current?.getElementsByClassName(
      'ColumnGroupingSeparator'
    )[0];

    if (separator) return;

    const label = panelWrapperRef.current?.getElementsByClassName(
      'MuiFormControlLabel-root'
    )[3];

    const div = document.createElement('div');
    div.className = 'ColumnGroupingSeparator';
    div.style.width = '100%';
    div.style.borderBottom = '1px solid grey';
    div.style.lineHeight = '0.1em';
    div.style.margin = '10px -12px';

    const span = document.createElement('span');
    span.textContent = 'Full name';
    span.style.backgroundColor = 'white';
    span.style.margin = '0px 6px';
    span.style.padding = '4px';
    span.style.fontSize = '12px';

    div.appendChild(span);

    label?.insertAdjacentElement('beforebegin', div);
  }, []);

  return (
    <GridPanelWrapper {...props} ref={panelWrapperRef}>
      <GridColumnsManagement {...rootProps.slotProps?.columnsManagement} />
    </GridPanelWrapper>
  );
};

export default function BasicGroupingDemo() {
  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        rows={rows}
        columns={columns}
        checkboxSelection
        disableRowSelectionOnClick
        columnGroupingModel={columnGroupingModel}
        slots={{
          toolbar: GridToolbar,
          columnsPanel: CustomGridColumnsPanel,
        }}
      />
    </div>
  );
}

Examples

No response

Motivation

No response

Search keywords: ColumnsPanel

[michelengelen]

Thanks for opening this @gepa7 ... It is a nice little workaround you have built there.
I do agree though that we might want to introduce an easier way to customize the columns panel with this.

An additional idea: maybe we could add a tree-like structure, so the user can disable a full block of grouped columns with a single click? @KenanYusuf WDYT?

[gepa7]

Yeah but unfortunately its not a proper solution because I should dynamically change the dome based on searched value of the input too. And I cant really get it working...

So I think the only possible solution would be that if we can access the ColumnsPanel as a full node tree(Jsx element). Then every kind of customization could be done.

[KenanYusuf]

Hi @gepa7, customisation is a little limited in the columns panel currently. In the future, we will likely export multiple components to allow you to compose the panel however you like.

An additional idea: maybe we could add a tree-like structure, so the user can disable a full block of grouped columns with a single click? @KenanYusuf WDYT?

@michelengelen I like the idea, we could explore this.