Material UI DataGrid:如何向每一行单元格添加工具提示

Question

我在react material ui datagrid文档中找不到与此相关的任何内容。我注意到您可以通过"；描述"；字段，但找不到任何与行相关的文档或示例。

Answer 1

修改列以添加renderCell属性

const columns: Columns = [
{
field: 'id',
headerName: 'ID',
sortable: false,
renderCell: (params: any) =>  (
<Tooltip title={params.data.id} >
<span className="table-cell-trucate">{params.data.id}</span>
</Tooltip>
),
}
]

css更改：

.table-cell-trucate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

Answer 2

我修改了如下列：

const editColumns = columns.map((column) => ({
field: column,
headerName: column,
width:75,
flex: 1,
renderCell: (params: any) => (
<Tooltip title={params.value}>
<span>{params.value}</span>
</Tooltip>
),
}));

Answer 3

只需在rendercell上调试代码，并根据代码过滤器检查params中的数据。

renderCell: (params) =>  (
<Tooltip title={params.value} >
<span className="csutable-cell-trucate">{params.value}</span>
</Tooltip>
),

这对我有用。

Answer 4

如果使用TypeScript:，则可能需要使用GridCellParams类型

renderCell: (params: GridCellParams) => (
<Tooltip title={params.value}>
<span className="table-cell-trucate">{params.value}</span>
</Tooltip>
)