仅在材料 ui 表中的 tbody 上滚动

Question

我正在使用Material-ui Table组件创建带有粘性标题的表格。通过它的实现，我可以在整个表格上滚动，即在 thead 和 tbody 上。但是，我想让滚动条仅在身体上。这在基本表上更容易做到，但使用 mui 表组件我无法这样做。请帮助我解决这个问题或分享一些我可以实施来完成我的要求的技巧。

虚拟数据：

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' }
];

表格组件

<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}
/>

Answer 1

好的，我找到了一些对我有用的东西，并在这里分享相同的东西，以防有人有同样的要求。

我仍然认为这一点还可以改进。然而，我所做的是使用两个表，并仅用 TableContainer 包装具有我的 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>