如何使React表格可以滚动？

Question

我正在尝试让React表格在水平和垂直方向上可滚动，但现在它会根据数据占用整个空间。

我希望将该表格的高度固定，并使其在两个方向上都可以滚动。

表格组件：

import React from "react";
import { useTable } from "react-table";

const Table = ({ columns, data }) => {
  const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } =
    useTable({
      columns,
      data,
    });
  return (
    <table {...getTableProps()} className="text-center">
      <thead>
        {headerGroups.map((headerGroup) => (
          <tr {...headerGroup.getHeaderGroupProps()}>
            {headerGroup.headers.map((column) => (
              <th
                className="bg-primary-dark text-white p-4 text-center"
                {...column.getHeaderProps()}
              >
                {column.render("Header")}
              </th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody
        {...getTableBodyProps()}
        className="bg-primary-light text-primary-dark overflow-scroll"
      >
        {rows.map((row, i) => {
          prepareRow(row);
          return (
            <tr {...row.getRowProps()}>
              {row.cells.map((cell) => {
                return <td {...cell.getCellProps()}>{cell.render("Cell")}</td>;
              })}
            </tr>
          );
        })}
      </tbody>
    </table>
  );
};

export default Table;

表格容器

import React, { useMemo } from "react";
import useData from "../../hooks/useData";
import Table from "./Table";

const TableSection = React.memo(({ query }) => {
  const { data, runtime, error } = useData(query);
  const column =
    data.length > 0 &&
    Object.keys(data[0]).map((key) => {
      return {
        Header: data[0][key],
        accessor: key,
      };
    });
  const columns = useMemo(() => column, [column]);
  const queryData = useMemo(() => data.slice(1), [data]);
  
  return (
    <div className="col-start-2 col-end-3 row-start-3 row-end-4 text-white m-6">
          <Table columns={columns} data={queryData} />
    </div>
  );
});

export default TableSection;

有人可以帮我解决这个问题吗？

- r121

---

你想要主体可滚动还是整个表格包括标题都可滚动？ - Soufiane Boutahlil

如果可能的话，我只想让表格主体可滚动，而不是整个表格。 - r121

我还添加了表格容器的代码，请检查。 - r121

Answer 1

我知道现在有点晚了，但其他人可能也在搜索这个问题，因为我没有找到答案，所以这个方法非常有效。其实很简单，只需将 React Table 始终包装在一个 div 和 className 中，然后在 CSS 文件中执行以下操作：

.tableContainer{
    background-color: #1E1F25;
    border-radius: 20px;
    height: 244px;
    padding: 0 10px 10px 10px;
    overflow: scroll;
}

包裹表格的div要设置固定高度，并将溢出部分滚动显示。此外，您可以通过以下方式使表头固定：

Table thead{
    position: sticky;
    top: 0px;
    margin: 0 0 0 0;
}

- Scene

---

谢谢！我已经寻找了一段时间，现在终于可以正常工作了。 我只是将表格包装在 div 中，并添加了 overflow: scroll;。 - Nika Nabakhteveli

完美的解决方案！谢谢。 - ritz

终于找到了这个！完美运作，谢谢！ - Kachopsticks

Answer 2

在您想要固定高度和可滚动的容器上定义样式。

maxHeight: "30rem",
overflow: "auto",

- Archivec

---

能否使表格主体可滚动，而不是表头？ - r121

我还添加了表格容器的代码，请检查。 - r121