Material-UI DataGrid：如何向每个行单元格添加工具提示？

Question

我在reactmaterial ui datagrid文档here中找不到与此相关的任何内容。我注意到您可以通过“描述”字段向列添加工具提示，但找不到与行相关的任何文档或示例。

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 上调试您的代码，并根据您的代码过滤器检查您在参数中获取的数据。

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

这对我有用。

Answer 4

您可以将默认的 mui Row 包装到 Tooltip 中

import React from 'react'
import { DATA_GRID_DEFAULT_SLOTS_COMPONENTS } from '@mui/x-data-grid-pro/node_modules/@mui/x-data-grid/internals'
import { Tooltip } from '@mui/material'

export const TooltipRow = (props: any) => {
  return (
    <Tooltip title='tooltip'>
      <DATA_GRID_DEFAULT_SLOTS_COMPONENTS.Row {...props} />
    </Tooltip>
  )
}

然后将其传递到插槽中

<DataGridPro
 {/* Rest of your props */}
  slots={{ row: TooltipRow }}
/>

Answer 5

如果您使用 TypeScript，您可能需要使用

GridCellParams

类型：

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