Material-UI DataGrid hide header separator for specific cells

user_366549 0
Viewed 4998

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>
            ),
        },
    ]
material-ui reactjs datagrid
3 Answers

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
user_59995670

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.

user_71204590

We can override below class:

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