[Solved]-Material UI Data Grid not working on adding column other than "ID"?-Reactjs

<DataGrid getRowId={row => row.yourUniqueField}

As per the error, Material-UI Datagrid rows must have a column named id. Otherwise, it won't work. What you can do is map all your DT_RowId keys to the id key like this,

const rowsBeforeMapping = [
  {
    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"
  }
];

const rows = rowsBeforeMapping.map((row) => {
  const { DT_RowId, ...rest } = row;
  return { id: DT_RowId, ...rest };
});

You can use getRowId prop to return your unique id DT_RowId.(Material-ui DataGrid doc)

But it has other cons now. If you want to know detail check this issue #1119. ( In your case, it doesn't affect, so don't worry.)

I modify your code and make it work, like:

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>
  );
}

Hope to help you :)