Material UI 数据网格无法添加“ID”以外的列？

Question

我试图从材质 UI 创建数据表，但它仅在“DT_RowId”字段上给我以下错误，尽管 id 是唯一的。如果我只添加“id”，那么它就可以正常工作。有人可以帮我吗？

https://codesandbox.io/s/strange-sanderson-wn3km?file=/demo.js

Answer 1

您可以使用getRowIdprop 返回您的唯一 id DT_RowId。( Material-ui DataGrid 文档)

但现在它还有其他缺点。如果您想了解详细信息，请查看此问题#1119。（对于你的情况，它不会影响，所以不用担心。）

我修改你的代码并使其工作，例如：

import * as React from "react";
import { DataGrid } from "@material-ui/data-grid";

const columns = [
  { field: "DT_RowId", headerName: "DT_RowId(ID)", width: 150 },
  { field: "color", headerName: "Color", width: 100 },
  { field: "value", headerName: "Value", width: 130 }
];

const rows = [
  {
    DT_RowId: "1",
    color: "red",
    value: "#f00"
  },
  {
    DT_RowId: "2",
    color: "green",
    value: "#0f0"
  },
  {
    DT_RowId: "3",
    color: "blue",
    value: "#00f"
  },
  {
    DT_RowId: "4",
    color: "cyan",
    value: "#0ff"
  }
];

export default function DataTable() {
  return (
    <div style={{ height: 400, width: "100%" }}>
      <DataGrid
        getRowId={(r) => r.DT_RowId}
        rows={rows}
        columns={columns}
        pageSize={5}
        checkboxSelection
      />
    </div>
  );
}

希望能帮到你:)