I wanted to try these out where the expandable row data came from the data
itself where it will display these data inside the expandable row
"Personal Information1",
"Personal Information2",
"Personal Information 3"
All examples that I’ve seen is that the data of the expandable row is not from the variable data
itself.
How do I access the data of the 3 different personal informations in which these will be displayed inside the expandable row?
Codesandbox:
https://codesandbox.io/s/mui-datatables-expandable-rows-forked-ulf34d?file=/src/ExpandableRowTable.js:1378-1467
Codes:
const options = {
filter: true,
onFilterChange: (changedColumn, filterList) => {
console.log(changedColumn, filterList);
},
selectableRows: "single",
filterType: "dropdown",
responsive: "scrollMaxHeight",
rowsPerPage: 10,
expandableRows: true,
renderExpandableRow: (rowData, rowMeta) => {
console.log(rowData, rowMeta);
return (
<React.Fragment>
<tr>
<td colSpan={6}>
<TableContainer component={Paper}>
<Table style={{ minWidth: "650" }} aria-label="simple table">
<TableHead>
<TableRow>
<TableCell>Pesonal Information 1 label</TableCell>
<TableCell align="right">
Pesonal Information 2 label
</TableCell>
<TableCell align="right">
Pesonal Information 3 label
</TableCell>
</TableRow>
</TableHead>
<TableBody>
{rows.map((row) => (
<TableRow key={row.name}>
<TableCell component="th" scope="row">
{row.name}
</TableCell>
<TableCell align="right">{row.calories}</TableCell>
<TableCell align="right">{row.fat}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
</td>
</tr>
</React.Fragment>
);
},
page: 1
};
return (
<MUIDataTable
title={"ACME Employee list"}
data={data}
columns={columns}
options={options}
/>
);
};
export default ExpandableRowTable;