Populating Material-UI DataGrid from MongoDB failing for unique ID not found

Question

Error: Material-UI: The data grid component requires all rows to have a unique id property. A row was provided without in the rows prop is what I am seeing when I call the table.

Here is how I have the table defined.

const columns = [
  { field: "_id", hide: true },
  { field: "user", headerName: "User", width: 70 },
  { field: "fromaddress", headerName: "Sender", width: 70 },
  { field: "dkimSpfChk", headerName: "DKIM/SPF", width: 70 },
  { field: "replySenderMismatch", headerName: "Reply MisMatch", width: 70 },
  { field: "riskywordchk", headerName: "Risky Word", width: 70 },
  { field: "domainagechk", headerName: "Sender Domain Age", width: 70 },
  { field: "attachmentChk", headerName: "Attachments", width: 70 },
  { field: "riskyLinkAge", headerName: "Body Link Age", width: 70 },
  { field: "riskyLinkTypo", headerName: "Link Typosquatting", width: 70 },
  {
    field: "senderTypoSquatting",
    headerName: "Sender TypoSquatting",
    width: 70,
  }
];

I get the data from my api and then populate in the row

 useEffect(() => {
    var apiurl = "http://localhost:5000/adminportal/highRiskEmails";
    axios
      .get(apiurl)
      .then((response) => response.data)
      .then((data) => {
        setIsLoaded(true);
        setRowData(data);
      });
  }, []);

Here is the datagrid

return (
  <div style={{ height: 400, width: "100%" }}>
    <DataGrid
      rows={rowData}
      columns={columns}
      id="_id"
      pageSize={15}
      checkboxSelection
    />
  </div>
);

I know the _id field is unique from Mongo so wondering what I am missing. Do I have to define that the id field is not id but _id?

thanks

Answer 1

You can now use the getRowId property that accepts a function to specify which property on each row should be considered the id.

In the OP's case, you could do: getRowId={(row) => row._id}

Reference: https://github.com/mui-org/material-ui-x/pull/972

Answer 2

I actually had the same problem on my DataGrid component and I solved it with math.random() as an id >> <DataGrid id={Math.random()} />

Answer 3

I just put the option { virtuals: true } in my schema:

const opts = { toJSON: { virtuals: true } };

const schema = new mongoose.Schema({
    lastName: String,
    firstName: String,
    nickname: String,
}, opts);

So when i try to query, the field "id" is added. Something like:

[
    {
        "_id": "602fc7aba323ec87f00f9c76",
        "lastName": "Targaryen",
        "firstName": "Daenerys",
        "nickname": "",
        "__v": 0,
        **"id": "602fc7aba323ec87f00f9c76"**
    }
]

Answer 4

I was having a hard time with this too, turns out you can make virtual ids

https://mongoosejs.com/docs/tutorials/virtuals.html