How to get my array object into a material ui table - arrays

Question

I have an array that I want to get inside a material ui table. This is the structure of my array, which is taken from a file that I import (using react papa parse 3):
https://react-papaparse.js.org/
This is a link to the code I am trying to get the data into:
https://codesandbox.io/s/htvjz?file=/demo.js
I am a bit confused on the structure of the array, being relatively new at this. Does my row data go one extra level deep with the "data" level in there?
How can I get this into the material ui array table linked to above?
Spent all day on this and going round and round in circles.

Answer 1

the link you show uses table. That closely resembles an HTML table.
I can recommend using a instead. It's easier to read, faster to write, it's more powerful.
import * as React from 'react';
import { DataGrid } from '#material-ui/data-grid';
// define which columns you have in your data
const columns = [
{ field: 'id', headerName: 'ID' },
{ field: 'firstName', headerName: 'First name' },
{ field: 'lastName', headerName: 'Last name' },
];
// your rows.. you probably won't hard code them but get them from elsewhere
// but they should look like this:
const rows = [
{ id: 1, lastName: 'Snow', firstName: 'Jon'},
{ id: 2, lastName: 'Lannister', firstName: 'Cersei'},
{ id: 3, lastName: 'Lannister', firstName: 'Jaime' },
{ id: 4, lastName: 'Stark', firstName: 'Arya' }
];
...
// Then, wherever you want to have your grid, do this:
<DataGrid rows={rows} columns={columns} />