Scroll only on tbody in material ui Table

user_6468641 0
Viewed 422

I'm using material-ui Table component to create my table with the sticky header. This by its implementation gives me the scroll on the entire table i.e both on thead and tbody. However, I want to have the scroll just on the tbody. This is easier to do on a basic table but with mui table component I'm unable to do so. Please help me with this or share some tips which I can implement to accomplish my requirment.

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}
/>
material-ui css
1 Answers

Ok, I've found something which worked out for me, and sharing the same here just in case anyone has the same kind of requirment.

I still think this can be improved. However what I did was used two Table and wrapped with TableContainer only the table which has my tbody.

<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>
</Table>
<TableContainer className={classes.container}>
<Table>
  <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>
user_64686410
Related