如何使反应表可滚动？

Question

我正在尝试使反应表可水平和垂直滚动，但现在它根据数据占用了所有空间。我想使该表格具有固定高度并可在两个方向上滚动。

表组件：

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;

任何人请帮我解决这个问题。

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

Answer 2

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

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