Material-UI DataGrid hide header separator for specific cells

Question

is there any way of hiding the header's column separator for specific (or all) cells?

here is my column definition

    const ordersCols = [
        { field: 'DOCDATE', headerName: 'Fecha', flex: 1 },
        { field: 'DOCTYPE', headerName: 'Tipo', flex: 1 },
        { field: 'SOPNUMBE', headerName: 'Número', flex: 1 },
        { field: 'SUBTOTAL', headerName: 'Subtotal', flex: 1 },
        { field: 'TAXAMNT', headerName: 'Impuesto', flex: 1 },
        { field: 'DOCAMNT', headerName: 'Total', flex: 1 },
        {
            field: '',
            renderCell: params => (
                <Button
                    size='small'
                    onClick={() => onViewOrderClick(params.row)}
                >
                    Ver
                </Button>
            ),
        },
    ]

Polyhymnia

Answer 1

Material-UI v5

Since DataGrid supports the sx prop, one can achieve this with something like

<DataGrid
  sx={{
    '& .hideRightSeparator > .MuiDataGrid-columnSeparator': {
      display: 'none',
    },
  }}

and setting the class "hideRightSeparator" to the desired columns' definition with

headerClassName: 'hideRightSeparator'

Material-UI v4 (or v5)

One can achieve this by creating a style class (using makeStyles()) like

hideRightSeparator: {
  '& > .MuiDataGrid-columnSeparator': {
    display: 'none',
  },
},

and assigning it to the desired columns' definition with

headerClassName: classes.hideRightSeparator

Prop

When I try to pass that object directly to hideRightSeparator, I'm getting ''& > .MuiDataGrid-columnSeparator'' does not exist in type 'GridColumnHeaderClassFn'.. Is that object supposed to live somewhere particular? – Astrogation

Thanks for your question. Yes, hideRightSeparator was a class defined in makeStyles() from @mui/styles/makeStyles. – Prop

I added an update to my solution, adapting it to Material-UI v5 and the new sx prop. Thanks for having me revisit that piece of code. – Prop

Answer 2

I have a slightly different solution for the problem. Add something like this to your index.css file for your project (assuming that you have one):

.lastcolumnSeparator .MuiDataGrid-columnSeparator--sideRight {
  display: none !important;
}

Then in you column definition for the column:

  {

/* What other values you think are important to go here. */

    headerClassName: 'lastcolumnSeparator',
  },

The actual CSS class for the divider is MuiDataGrid-columnSeparator--sideRight, and the divider is a descendant of the column header element. You might want to preserve other content in the column header for display.

Galle

Answer 3

We can override below class:

.MuiDataGrid-cell {
  border-bottom: none;
}

Nottingham

Answer 4

Add the following style to the sxprop of DataGrid

      <DataGrid
        sx={{
          '& .MuiDataGrid-columnHeader:last-child .MuiDataGrid-columnSeparator': {
            display: 'none',
          },
        }}

source: https://github.com/mui/mui-x/issues/4393

Astrogation

Answer 5

For v5^

sx={{ '& .MuiDataGrid-columnSeparator': { display: 'none' } }}

Wolpert

Answer 6

Material-UI Data-Grid v7

import { styled } from '@mui/system';
import { DataGridPro } from '@mui/x-data-grid-pro';

function DataGridGeneric(props) {
    return (
        <CustomDataGridPro
            disableColumnMenu
            {...props}
        />
    );
}

export default DataGridGeneric;

const CustomDataGridPro = styled(DataGridPro)(({ theme }) => ({
    '& .MuiDataGrid-columnSeparator': {
        display: 'none'
    }
}));

in v7 works for me.

Bludgeon