0
269
VistasMUI-Datatable: TableHead dentro de Expandable Row sigue repitiéndose para cada fila de la tabla y la tabla no se centra
¿Cómo puedo solucionar esto? Los encabezados de las tablas siguen repitiéndose para cada fila de la tabla, como se ve en la imagen a continuación. Además, la mesa siempre está en el extremo más alejado del lado derecho. ¿Cómo puedo hacer esto en el centro también?
Códigos y caja: https://codesandbox.io/s/xenodochial-fog-s984v0?file=/src/App.js
códigos:
const options = { filter: true, selectableRows: "none", responsive: "simple", expandableRows: true, renderExpandableRow: (rowData, rowMeta) => { console.log(rowData, "rowData"); return Object.entries(rowData[3]).map(([key, value]) => { return ( <TableContainer> <Table> <TableHead> <TableCell align="right">Name</TableCell> <TableCell align="right">Color</TableCell> </TableHead> <TableBody> <TableRow key={key}> <TableCell component="th" scope="row"> {value.name} </TableCell> <TableCell align="right">{value.color}</TableCell> {/* Product: {value.name} + {value.size} +{" "} {value.color + value.quantity} */} </TableRow> </TableBody> </Table> </TableContainer> ); }); } };
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Cambiar su objeto de options como se muestra a continuación, debería resolver el problema.
const options = { filter: true, selectableRows: "none", responsive: "scrollMaxHeight", expandableRows: true, renderExpandableRow: (rowData, rowMeta) => { console.log(rowData); return ( <tr> <td colSpan={4}> <TableContainer> <Table style={{ margin: "0 auto" }}> <TableHead> <TableCell align="right">Name</TableCell> <TableCell align="right">Color</TableCell> </TableHead> <TableBody> {rowData[3].map((row) => { console.log(row); return ( <TableRow key={row.id}> <TableCell component="th" scope="row" align="right"> {row.name} </TableCell> <TableCell align="right">{row.color}</TableCell> </TableRow> ); })} </TableBody> </Table> </TableContainer> </td> </tr> ); } };
·
Juan Pablo Isaza
Denunciar
Responde la pregunta