Mui-datatables: Allow passing data as an array of objects

[rooby]

It would be very useful to be able to pass in an array of object for data and then in the column definition you would specify the name of the property on the object.

It would be even better if you could specify nested properties with dot notation, similarly to how react-table works.

[gregnb]

I'll leave this open for community feedback

[jkeruzec]

For feedback,

With my spring rest controller, I have developped utils to take my Rest JSON data and transform it to a raw data array mapped to column to be able to display the data.

It will be very usefull to directly be able to read the JSON and avoid this specific mapping technique.

So for short, yes interested in this functionnality ! ;)

[benjaminbours]

Same as @jkeruzec , i'm interested too :)

[x0fma]

Does someone started to work on this ?

[stipe09]

I'm interested too, it will be very usefull.

[alouane]

+1 for this feature

[VIJAYMYSORE]

+1

[pavlovicIvan]

Hi, this feature would be very usefull for our project.
Do you know when will be implemented?

[stipe09]

Are you considering to do this feature?

[sidharthdigiworks]

It's easier if we have array of objects since data from server usually is formatted that way and we can opt to choose which properties need to be shown in the table.

[jpmillan]

+1

[revskill10]

You can use this helper function to transform:

const convertDataToArray = (data, keys) =>
  data.map(obj => Array.from(keys, k=>obj[k]))

[Diaver]

I've made in my fork + TS support: https://www.npmjs.com/package/material-datatable

[rooby]

@Diaver are you going to submitting a pull request to address this issue in this project?

[Diaver]

@rooby I am not sure it is possible: In my form at least one big change - my datatable accept object array, not array of arrays

[revskill10]

@Diaver Why not adding one prop like itemDataType, which could be array or object ?

[Diaver]

@revskill10 because it is not just one required change

[revskill10]

@Diaver I mean let's just reuse the logic, and what we can do is transforming/processing props before passing down the render logic. Because we want to keep maintainance on one project only (?)

[Diaver]

@revskill10
There are some reasons for separated project:

1. It is already applied a lot of changes in my fork.
2. Keep both logic in one project doesn't seems to be good idea for me, at least, until current code required to be completely refactored - now it is pretty ugly, and any changes applied with a lot of digging down into the code.
3. I don't want to be dependent from other people.

[ginman86]

You could even do it dynamically by checking the type on the data elements. Is it an array of strings? Then match it by index to the columns. Is it an object? Then match it by key to a columnKey property on the column object.

[plourenco]

Not sure why it isn't added yet, so I'm here to increase the feedback. Definitely interested on this!

[mgolkardev]

Hi
I pull request to add this option.
https://github.com/gregnb/mui-datatables/pull/331

If confirmed, we will be in the next version.

  const columns = [
      {
        name: "ID",
        field: "id", <= Your object key
      }
  ];
  const options= {
        jsonMode : true
  }

Source: https://github.com/mgolkardev/mui-datatables/tree/patch-1
i hope help you.

[victor-arcane]

Hi,
It would be very useful, do we have any updates on this?

[RafaelRojasCov]

I also would like to know if this feature will be in the mui-datatables cuz its' very useful, i'm having trouble handling the data I fetch from my APIs and transform them into array (Object.values(obj) doesn't work in this case, when the object has nested objects inside)

[chapmanjacobd]

331

If confirmed, we will be in the next version.

  const columns = [
      {
        name: "ID",
        field: "id", <= Your object key
      }
  ];
  const options= {
        jsonMode : true
  }

Source: https://github.com/mgolkardev/mui-datatables/tree/patch-1
i hope help you.

How do I apply this patch to the npm installed mui-datatables?

[gregnb]

The latest release now supports data as objects. Example: https://github.com/gregnb/mui-datatables/blob/master/examples/data-as-objects/index.js

[raikusy]

@gregnb How can I access a nested property? For example:

const data = [
{
  id: 1,
  parent: {
    child: "wah"
  }
}
]

I want to access the child property like:

columns={
  [
    {
      name: 'parent.child',
      label: 'Child'
    }
  ]
}

[saurabh8nitrr]

You can use this helper function to transform:

const convertDataToArray = (data, keys) =>
  data.map(obj => Array.from(keys, k=>obj[k]))

Can you specify in details...what is the key variable and all

[allindeveloper]

https://github.com/gregnb/mui-datatables/blob/master/examples/data-as-objects/index.js

[tjatwood]

This appears to be broken in version 3.7.1. When I upgraded from v2, these columns stopped showing content. Here's a codesandbox to verify. https://codesandbox.io/s/tender-morning-gknfz

[wdh2100]

@tjatwood

thank you for reporting.

As it changed to *v3

• migration guide link

Name | Type | Default | Description
-- | -- | -- | --
enableNestedDataAccess | string | "" | If provided a non-empty string (ex: "."), it will use that value in the column's names to access nested data. For example, given a enableNestedDataAccess value of "." and a column name of "phone.cell", the column would use the value found in phone:{cell:"555-5555"}. Any amount of nesting will work. Example demonstrates the functionality.

• example
  https://github.com/gregnb/mui-datatables/blob/fde3497a552040505f70c274466715fce1d7e8ab/examples/data-as-objects/index.js#L77-L82

• codesandbox : https://codesandbox.io/s/sleepy-pond-mc2xq?file=/src/App.js

[tjatwood]

Thank you! This works great.