如何在MUI DataGrid中隐藏列？无ID列时按ID删除行？

一、正确隐藏ID列的方法 #

直接在列定义中给ID列添加hide: true属性，这是最直接有效的方式：

const columns = [
  { field: 'id', headerName: 'ID', hide: true }, // 设置hide为true即可隐藏ID列
  { field: 'name', headerName: '名称', width: 150 },
  { field: 'age', headerName: '年龄', width: 100 },
];

<DataGrid
  rows={rows}
  columns={columns}
  // 其他配置项
/>

如果上述方法未生效，检查是否有代码覆盖列可见性，比如使用columnVisibilityModel时，需确保ID列被设置为不可见：

<DataGrid
  rows={rows}
  columns={columns}
  columnVisibilityModel={{ id: false }} // 强制隐藏ID列
/>

注意不要同时在列定义中设置visible属性，避免配置冲突导致隐藏失效。

二、不显示ID列时按ID删除行的方案 #

只要行数据中保留id字段（DataGrid要求的行唯一标识），无需显示ID列即可实现删除，核心是通过ID匹配目标行：

1. 单条删除（受控状态） #

若行数据存在React状态中，通过过滤数组删除指定ID的行：

const [rows, setRows] = useState([
  { id: 1, name: '张三', age: 25 },
  { id: 2, name: '李四', age: 30 },
]);

const handleDelete = (targetId) => {
  setRows(prevRows => prevRows.filter(row => row.id !== targetId));
};

// 配置操作列触发删除
const columns = [
  { field: 'name', headerName: '名称', width: 150 },
  { field: 'age', headerName: '年龄', width: 100 },
  {
    field: 'actions',
    headerName: '操作',
    width: 120,
    renderCell: (params) => (
      <Button 
        variant="contained" 
        color="error"
        onClick={() => handleDelete(params.row.id)} // 直接获取行数据中的ID
      >
        删除
      </Button>
    ),
  },
];

2. 批量删除（结合行选择） #

开启行选择功能后，通过选中行的ID集合批量删除：

<DataGrid
  rows={rows}
  columns={columns}
  checkboxSelection
  onRowSelectionModelChange={(selectedIds) => {
    const newRows = rows.filter(row => !selectedIds.includes(row.id));
    setRows(newRows);
  }}
/>

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