如何在无ID列的情况下使用MUI DataGrid组件？

方案一：添加虚拟ID并隐藏（最稳妥） #

MUI DataGrid必须依赖唯一行标识来管理行状态（分页、排序、过滤都需要），所以最直接的方式是给API返回的数据追加一个虚拟ID，同时不在列配置中声明该列，让它只在内部生效。

实现代码示例：

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

// 假设从外部API获取的原始数据
const rawApiData = [
  { name: '张三', age: 28, city: '北京' },
  { name: '李四', age: 32, city: '上海' },
];

// 为每一行添加虚拟ID，可选两种方式：
// 1. 用数组索引（适合数据静态、无增删场景）
const dataWithVirtualId = rawApiData.map((row, idx) => ({
  ...row,
  virtualId: idx,
}));

// 2. 用原生UUID生成器（适合数据动态更新、可能有增删的场景）
// const dataWithVirtualId = rawApiData.map(row => ({
//   ...row,
//   virtualId: crypto.randomUUID(),
// }));

// 仅配置需要显示的列，不包含virtualId
const columns = [
  { field: 'name', headerName: '姓名', width: 150 },
  { field: 'age', headerName: '年龄', width: 100 },
  { field: 'city', headerName: '城市', width: 150 },
];

export default function NoIdDataGrid() {
  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        rows={dataWithVirtualId}
        columns={columns}
        rowId="virtualId" // 指定虚拟ID作为行的唯一标识
        pagination
        sortingMode="single"
        filterMode="single"
      />
    </div>
  );
}

这样设置后，virtualId只会被DataGrid内部用来识别行，不会在表格中显示，完全符合你的需求。

方案二：用现有字段组合生成唯一标识（无需修改数据） #

如果你的数据中存在天然的唯一字段组合（比如「姓名+城市」不会重复），可以通过getRowId函数直接生成唯一标识，不需要额外添加列：

<DataGrid
  rows={rawApiData}
  columns={columns}
  getRowId={(row) => `${row.name}-${row.city}`} // 用现有字段组合生成唯一ID
  pagination
  sortingMode="single"
  filterMode="single"
/>

注意：这个方案的前提是你确定组合字段的唯一性，否则会出现行冲突，导致分页、排序等功能异常。

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