Material-table: Nested JSON Object mapping from API

[IonutAlexandru97]

Hi,
It is possible to use nested JSON Object from API?

For example, I have following JSON as a result from my API:

[
    {
        "id": "5a5c5030-d3c8-11e9-b39d-df50152ab41d",
        "name": "test",
        "comment": "this is a test",
        "main_cluster": "CAEE",
        "main_apps": "Catia",
        "rate": 200,
        "skills": "Dev",
        "createdAt": "2019-09-10T12:41:47.000Z",
        "updatedAt": "2019-09-11T09:54:57.000Z",
        "availabilities": [
            {
                "id": "4b0bbd70-d47a-11e9-95e1-d33a6730c53e",
                "availability": 32132131,
                "month": "January",
                "createdAt": "2019-09-11T09:55:32.000Z",
                "updatedAt": "2019-09-11T09:55:32.000Z",
                "resourceId": "5a5c5030-d3c8-11e9-b39d-df50152ab41d"
            },
            {
                "id": "5a5c5031-d3c8-11e9-b39d-df50152ab41d",
                "availability": 5,
                "month": "March",
                "createdAt": "2019-09-10T12:41:47.000Z",
                "updatedAt": "2019-09-10T12:41:47.000Z",
                "resourceId": "5a5c5030-d3c8-11e9-b39d-df50152ab41d"
            },
            {
                "id": "ea485110-d479-11e9-95e1-d33a6730c53e",
                "availability": 4000,
                "month": "January",
                "createdAt": "2019-09-11T09:52:49.000Z",
                "updatedAt": "2019-09-11T09:52:49.000Z",
                "resourceId": "5a5c5030-d3c8-11e9-b39d-df50152ab41d"
            },
            {
                "id": "f6bc55e0-d479-11e9-95e1-d33a6730c53e",
                "availability": 3432432,
                "month": "January",
                "createdAt": "2019-09-11T09:53:10.000Z",
                "updatedAt": "2019-09-11T09:53:10.000Z",
                "resourceId": "5a5c5030-d3c8-11e9-b39d-df50152ab41d"
            }
        ]
    }
]

How can I map availability and month to Table Cells?
I tried nested mapping, but it is not working and maybe you have some suggestions.

[perfectstrong]

Did you try Detail Panel?

https://material-table.com/#/docs/features/detail-panel

[IonutAlexandru97]

Did you try Detail Panel?

https://material-table.com/#/docs/features/detail-panel

Yes, but the request from my client is to have all those information in a table, and I tought that this great material table supports, somehow, nested JSON objects

[oze4]

@IonutAlexandru97 it does

https://material-table.com/#/docs/features/tree-data

Be sure to check out the example code.

[IonutAlexandru97]

@IonutAlexandru97 it does

https://material-table.com/#/docs/features/tree-data

Be sure to check out the example code.

I will try to be more specific:

I have an API which returns the following JSON

[
    {
        "id": "eeeaa9b0-d61e-11e9-bc07-6db32c627db3",
        "name": "Ionut Alexandru Candea",
        "comment": "Comment",
        "main_cluster": "CAEE",
        "main_apps": "Catia",
        "rate": 100,
        "skills": "Dev",
        "createdAt": "2019-09-13T12:06:35.000Z",
        "updatedAt": "2019-09-14T17:30:34.000Z",
        "availabilities": [
            {
                "id": "22b568b0-d715-11e9-99e0-8169d6ffe32b",
                "availability": 8,
                "month": "2019-03-01",
                "createdAt": "2019-09-14T17:28:58.000Z",
                "updatedAt": "2019-09-26T15:40:51.000Z",
                "resourceId": "eeeaa9b0-d61e-11e9-bc07-6db32c627db3"
            },
            {
                "id": "2b0f3d20-d61f-11e9-bc07-6db32c627db3",
                "availability": 8,
                "month": "2019-02-01",
                "createdAt": "2019-09-13T12:08:16.000Z",
                "updatedAt": "2019-09-13T12:08:16.000Z",
                "resourceId": "eeeaa9b0-d61e-11e9-bc07-6db32c627db3"
            },
            {
                "id": "eeeaa9b1-d61e-11e9-bc07-6db32c627db3",
                "availability": 8,
                "month": "2019-09-01",
                "createdAt": "2019-09-13T12:06:35.000Z",
                "updatedAt": "2019-09-13T12:06:51.000Z",
                "resourceId": "eeeaa9b0-d61e-11e9-bc07-6db32c627db3"
            }
        ]
    }
]

Using material-table I would like to have something like this:

For getting result from image, i used the following method with Nested Mapping:

function TableComponent() {

    const classes = useStyles();
    const [api, setApi] = useState('/api/resource/availability');
    const [values, setValues] = useState([]);

    useEffect(() => {
      const fetchData = async () => {
        const result = await axios(api);
        setValues(result.data);
      };
      fetchData();
    }, []);

    return (
      <Paper className={classes.root}>
        <CustomToolbar />
        <Table className={classes.table}>
          <TableHead>
            <TableRow>
              <TableCell>Resource Name</TableCell>
              <TableCell align="center">Resource Comment</TableCell>
              <TableCell align="center">Resource Main Cluster</TableCell>
              <TableCell align="center">Resource Main Apps</TableCell>
              <TableCell align="center">Availability</TableCell>
              <TableCell align="center">Resource Rate</TableCell>
              <TableCell align="center">Month</TableCell>
              <TableCell align="center">Resource Skills</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {values.map((row) => (
              <TableRow key={row.id}>
                <TableCell component="th" scope="row">
                  {row.name}
                </TableCell>
                <TableCell align="center">{row.comment}</TableCell>
                <TableCell align="center">{row.main_cluster}</TableCell>
                <TableCell align="center">{row.main_apps}</TableCell>
                {
                  row.availabilities.map((data, index) => (
                    <TableCell key={index++} style={{display: 'flex', justifyContent: 'center'}}>{data.availability}</TableCell>
                  ))
                }
                <TableCell align="center">{row.rate} &euro;</TableCell>
                {
                  row.availabilities.map((data, index) => (
                    <TableCell key={index++} style={{display: 'flex', justifyContent: 'center'}}>
                      {data.month}
                    </TableCell>
                  ))
                }
                <TableCell align="center">{row.skills}</TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </Paper>
    );
  }

It is possible to have the same result using material-table and keeping all its features even if there is a nested JSON Object?
If yes, could it be possible to help me?

[gary-menzel]

I have only just started looking at material-table but have done a lot with other table components. I think you to look at a customer render function for your column and do the map call from your example inside that render function. The render function on a column gets row passed to it - which means you can do what you want with availabilities and create an array of any React component and a result (you might have to wrap it in a Fragment).

[jayarjo]

material-table cannot possibly auto-interpret user-originated data, since it can have every kind of structure, @IonutAlexandru97 you will have to do some mapping/transforming either way.

[jayarjo]

I'd mark @gary-menzel's response as a proper solution in such case.