如何向 MUI DataGrid（专业版）表的每一行添加自定义属性？

Question

我需要向表的每一行添加属性“data-testid”，但我不知道如何使用 MUI DataGrid Pro 来执行此操作。添加 classNames 是可能的（使用 getRowClassName），但添加属性及其值（例如 'data-testid='row-{key}' ）似乎更复杂。

有人已经问了一个类似的问题，但是对于列 - 该解决方案似乎不适用于行。

我尝试使用 getRowClassName 和 slotProps，但没有成功。我还尝试找到解决方法并使用 renderCell() 将属性移动到单元格级别，但我确实需要该属性位于行级别。

谢谢！

Answer 1

通过导入

row

组件并包装它，使用自定义组件作为 GridRow slot：

import { GridRow, DataGridPro } from '@mui/x-data-grid'

const CustomGridRow = (props) => (
  <GridRow
    {...props}
    data-test-id={props.foo}
  />
)

...
// lots of code...
...

<DataGridPro 
  rows={rows}
  columns={columns}
  // ...some more props...
  slots = {
    row: CustomGridRow,
  }
/>

如果

slotProps

接受插槽的函数，事情可能会更容易，但遗憾的是它只接受一个对象。