reactjs 材质-UI数据网格隐藏特定单元格的标题分隔符

ifsvaxew  于 2023-02-18  发布在  React
关注(0)|答案(4)|浏览(121)

有没有办法隐藏特定(或所有)单元格的标题列分隔符?
下面是我列定义

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

qeeaahzv1#

材料-UI v4(或v5)

我通过创建一个样式类(使用makeStyles())来实现这一点,例如

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

并将其分配给所需列的定义

headerClassName: classes.hideRightSeparator

材料-UI v5

由于DataGrid支持sx prop,因此可以使用类似于

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

并将类"hideRightSeparator"设置为所需列的定义

headerClassName: 'hideRightSeparator'
piah890a

piah890a2#

对于这个问题,我有一个稍微不同的解决方案。在项目的index.css文件中添加如下内容(假设您有一个):

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

然后在列的列定义中:

{

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

    headerClassName: 'lastcolumnSeparator',
  },

分隔符的实际CSS类是MuiDataGrid-columnSeparator--sideRight,分隔符是列标题元素的 * 后代 *,您可能希望保留列标题中的其他内容以供显示。

yeotifhr

yeotifhr3#

我们可以覆盖以下类:

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

uyhoqukh4#

将以下样式添加到DataGridsx属性

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

来源:https://github.com/mui/mui-x/issues/4393

相关问题