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

[niralivasoya]

Steps to reproduce

This is how normally icon separators look like when we set disableColumnResize={false}. That means it allows you to resize the column, and this is how it looks when we hover over the header:

Current behavior

I want to allow the resize column only for the first column and disable the resizable to others. So, it is not allowed to resize other columns except the first one.

I want to hide the iron separator for other columns (where I set resizable to false). Ideally, we don't need an icon separator for those columns.

Expected behavior

How can I only show the icon separator for the resizable columns and hide it for others? How can I set the style? Any suggestions?

Thanks.

Context

This is the demo link:

https://codesandbox.io/p/sandbox/column-resizable-78jz77

Your environment

This is my current environment:

Search keywords: data-grid, column resize, hide icon speerator

[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?

[github-actions]

The issue has been inactive for 7 days and has been automatically closed.

[michelengelen]

Hey @niralivasoya ... while writing the recipe I found an easier way to do this:

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

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

const columns: GridColDef[] = [
  {
    field: 'id',
  },
  {
    field: 'username',
    width: 125,
    minWidth: 150,
    maxWidth: 200,
    resizable: false,
  },
  { field: 'age', resizable: false },
];

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

I am still putting this into the recipe section, but wanted to notify you here as well.

[onejeet]

Simplest solution...

 '& .MuiDataGrid-columnSeparator:not(.MuiDataGrid-columnSeparator--resizable)': {
            display: 'none !important',
          },