在Material UI表格中仅在tbody上滚动

Question

我正在使用material-ui表格组件创建带有粘性表头的表格。通过它的实现，整个表格即thead和tbody都可以滚动。但是，我希望只在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}
/>

- Deepak Singh

---

我在沙盒中运行了这段代码，标题栏像预期的那样粘性。你能否用更清晰或在线播放场地来解释一下？ - Sundaramoorthy Anandh

没问题。你可能会注意到现在滚动条是整个表格的，即thead和tbody都有。我希望滚动条只在tbody上。 - Deepak Singh

Answer 1

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

我仍然认为这可以改进。但是我所做的是使用了两个表格，并将只包含我的tbody的表格包装在TableContainer中。

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

- Deepak Singh