'Material-UI DataGrid hide header separator for specific cells

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>
            ),
        },
    ]

Solution 1:^[1]

I achieved that by creating a style class like

hideRightSeparator: {
    '& > .MuiDataGrid-columnSeparator': {
        visibility: 'hidden',
    },
},

and assigning it to the desired columns' definition with

headerClassName: classes.hideRightSeparator

Solution 2:^[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.

Solution 3:^[3]

We can override below class:

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Joseph Marinier
Solution 2	Peter Murphy
Solution 3	krishna

'Material-UI DataGrid hide header separator for specific cells

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]