How can I get the Material-UI DataGrid to read object data from an array?

Question

I'm currently using Redux to fetch data from an API. I am then using this data to populate a DataGrid component from Material-UI. Below is what the api response looks like:

Below is what I currently have setup for the column definitions:

The DataGrid seems to be able to recognize the id field from the results, as seen below, however, I cannot seem to drill down into attributes to get further details.

I'm looking for a solution that will allow me to display the attribute data, along with the id. All help is appretiated, thank you!

Ajeet Shah · Accepted Answer · 2021-08-03 16:58:06Z

7

You can use valueGetter:

const columns = [
  // ...
  {
    field: 'attributeName',
    headerName: 'Attribute Name',
    valueGetter: (params) => {
      return params.getValue(params.id, "attributes").name;
    }
  },
  // ...
];

You may also need a sortComparator to handle the sorting of this column.

answered Aug 3, 2021 at 16:58

Ajeet Shah

19.9k10 gold badges66 silver badges107 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Joshua Brown Over a year ago

Thank you, this solved my issue. I really appreciate your help!

snack overflow · Accepted Answer · 2021-08-03 17:16:50Z

1

try something like this to map the data out obviously change around the names as needed

const detailsRows = rows.map((row) => {
return {
  id: row.item_id,
  model: row.model_no,
  title: row.title,
};

and then pass it in to DataGrid like this

<DataGrid rows={detailsRows} columns={props.columns} pageSize={10}/>

answered Aug 3, 2021 at 17:16

snack overflow

1941 silver badge13 bronze badges

Collectives™ on Stack Overflow

How can I get the Material-UI DataGrid to read object data from an array?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related