如何为MUI X Data Grid Pro表格的每一行添加自定义属性？

要实现给每一行添加自定义data-testid属性，你可以使用DataGridPro提供的getRowProps属性，这是专门用于自定义行属性的API：

import { DataGridPro } from '@mui/x-data-grid-pro';

function MyDataGrid() {
  const rows = [
    { id: 1, name: 'John Doe', age: 35 },
    { id: 2, name: 'Jane Smith', age: 28 },
  ];

  const columns = [
    { field: 'name', headerName: 'Name', width: 150 },
    { field: 'age', headerName: 'Age', width: 100 },
  ];

  const getRowProps = (params) => {
    return {
      'data-testid': `row-${params.row.id}`,
    };
  };

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGridPro rows={rows} columns={columns} getRowProps={getRowProps} />
    </div>
  );
}

说明： #

• getRowProps会接收包含当前行数据（params.row）的参数对象，你可以基于行的唯一标识（比如id）来生成data-testid的值，确保每个行的属性值唯一。
• 这个方法返回的对象中的属性会被直接应用到行的DOM元素上，完美满足你在行层面添加自定义属性的需求。

之前尝试的方法局限性：

• getRowClassName仅支持添加CSS类名，无法设置自定义HTML属性；
• slotProps主要用于配置DataGrid的内置组件插槽（比如分页栏、工具栏等），不直接作用于行元素；
• renderCell是单元格级别的自定义，只能给单个单元格加属性，无法作用于整行。

内容的提问来源于stack exchange，提问作者claracking