Utilizing the material-ui Table component to build a table with a sticky header presents a challenge. The default behavior is for the scroll to encompass both the thead and tbody of the table. However, I specifically require the scroll functionality to be limited to the tbody only. This customization is straightforward with a basic HTML table but proves to be more complex with the mui table component. Any guidance or tips on how to achieve this unique requirement would be greatly appreciated.
Dummy Data:
const columns = [
{ id: 'name', label: 'Name', minWidth: 170 },
{ id: 'code', label: 'ISO', minWidth: 100 },
{ id: 'population', label: 'Population' },
{ id: 'size', label: 'Size' }
];
const rows = [
{ name: 'India', code: 'IN', population: '1324171354', size: '3287263' },
{ name: 'India', code: 'IN', population: '1324171354', size: '3287263' },
{ name: 'India', code: 'IN', population: '1324171354', size: '3287263' },
{ name: 'India', code: 'IN', population: '1324171354', size: '3287263' },
{ name: 'India', code: 'IN', population: '1324171354', size: '3287263' },
{ name: 'India', code: 'IN', population: '1324171354', size: '3287263' },
{ name: 'India', code: 'IN', population: '1324171354', size: '3287263' }
];Table Component
<TableContainer style={{ maxHeight : 400 }}>
<Table stickyHeader aria-label="sticky table">
<TableHead>
<TableRow>
{columns.map((column) => (
<TableCell
key={column.id}
align={column.align}
style={{ minWidth: column.minWidth }}
>
{column.label}
</TableCell>
))}
</TableRow>
</TableHead>
<TableBody>
{rows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map((row) => {
return (
<TableRow hover role="checkbox" tabIndex={-1} key={row.code}>
{columns.map((column) => {
const value = row[column.id];
return (
<TableCell key={column.id} align={column.align}>
{column.format && typeof value === 'number' ? column.format(value) : value}
</TableCell>
);
})}
</TableRow>
);
})}
</TableBody>
</Table>
</TableContainer>
<TablePagination
rowsPerPageOptions={[10, 25, 100]}
component="div"
count={rows.length}
rowsPerPage={rowsPerPage}
page={page}
onPageChange={handleChangePage}
onRowsPerPageChange={handleChangeRowsPerPage}
/>