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;
}