Creating dynamic table

Question

I'm trying to create a table with dynamic data so that I can reuse the table. The headers are displaying as intended but the rows are not displaying at all.

Data:

[
    {
        "id": "1231",
        "name": "Michael",
        "phone": "11223311",
        "medical": "YES"
    },
    {
        "id": "32123",
        "name": "Johnson",
        "phone": "3311323",
        "medical": "NO"
    }
]

Headers:

const headCells = [
        {id: 'id'},
        {id: 'name'},
        {id: 'phone'},
        {id: 'medical'}

What I've done:

const rows = () => {
    if (data) {
        data.map((row) =>
            <TableRow key={row.uuid}>
                <TableCell>{row}</TableCell>
            </TableRow>)
    }
};

return(
<TableContainer component={Paper}>
    <Table stickyHeader aria-label="sticky table">
        <TableHead>
            <TableRow>
                {headers.map((headCell) => (
                    <TableCell>{headCell.id}</TableCell>
                ))}
            </TableRow>
        </TableHead>
        <TableBody>
            {rows}
        </TableBody>
    </Table>
</TableContainer>
)

With this the headers are displaying but the rows are not. Can anybody see why?

Answer 1

You are now calling rows(data) with table data. Also you are not creating cells with data

Here is how you can do it

const headCells = [
    {dataIndex: 'id', name: 'ID' },
    {dataIndex: 'name', name: 'Name' },
    {dataIndex: 'phone', name: 'Phone' },
    {dataIndex: 'medical', name: 'Medical' }
];

const Header = ({ cols }) => {
  return cols.map((col) => (
     <TableCell>{col.name}</TableCell>
   ));
}

const Rows = ({ data, cols }) => {
    if (data) {
        return data.map((row) =>
            <TableRow key={row.uuid}>
                {cols.map(col => <TableCell>{row[col.dataIndex]}</TableCell>)}
            </TableRow>
       );
    }
    else return [];
};

return(
<TableContainer component={Paper}>
    <Table stickyHeader aria-label="sticky table">
        <TableHead>
           <TableRow>
             <Header cols={headCells} />
           </TableRow>
        </TableHead>
        <TableBody>
            <Rows data={data} cols={headCells} />
        </TableBody>
    </Table>
</TableContainer>
)

Answer 2

I think you are trying to render objects.
try this:

const rows = () => {
    if (data) {
        data.map((row) =>
            <TableRow key={row.uuid}>
                <TableCell>{row.name}</TableCell>
                <TableCell>{row.phone}</TableCell>
                <TableCell>{row.meducal}</TableCell>
            </TableRow>)
    }
};

or this if you dont want to hard code it:

const rows = () => {
    if (data) {
        data.map((row) =>
            <TableRow key={row.uuid}>
                {Object.keys(row).map((item, index)=>{
                    return <TableCell key={index}>{row[item]}</TableCell>
                })
            </TableRow>)
    }
};