[data grid] Hide column icon-separator for column resizable='false'

[niralivasoya]

[data grid] Hide column icon-separator for column resizable='false'

[michelengelen]

Hey @niralivasoya
This is relatively easy to do:

import * as React from 'react';
import { DataGridPro, GridColDef, gridClasses } from '@mui/x-data-grid-pro';

const rows = [
  {
    id: 1,
    username: '@MUI',
    age: 20,
  },
];

const getHeaderClassName: GridColDef['headerClassName'] = (params) => {
  console.log('params', params);
  return !params.colDef.resizable ? 'hide-resize-handle' : '';
};

const columns: GridColDef[] = [
  {
    field: 'id',
  },
  {
    field: 'username',
    width: 125,
    minWidth: 150,
    maxWidth: 200,
    resizable: false,
  },
  { field: 'age', resizable: false },
].map((column) => ({ ...column, headerClassName: getHeaderClassName }));

export default function ColumnSizingGrid() {
  return (
    <div style={{ height: 250, width: '100%' }}>
      <DataGridPro
        columns={columns}
        rows={rows}
        sx={{
          [`& .${gridClasses.columnHeader}.hide-resize-handle`]: {
            [`.${gridClasses.columnSeparator}`]: {
              display: 'none',
            },
          },
        }}
      />
    </div>
  );
}

You can use the headerClassName property on a ColDef to apply a className based on a param.
There is also a page in our docs about this: Styling column headers

Let me know if you need anything else.
Thanks! 🙇🏼

[michelengelen]

@cherniavskii should we add a recipe for this?