CODEWITHSUNDEEP
reactjsreduxmaterial-ui
Joshua Brown
Joshua Brown

Reputation: 101

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

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:API Response

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

Column Definitions enter image description here

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.

enter image description here

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!

Upvotes: 6

Views: 12272

Answers (2)

snack overflow
snack overflow

Reputation: 184

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}/>

Upvotes: 1

Ajeet Shah
Ajeet Shah

Reputation: 19813

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.

Upvotes: 7

Related Questions