How to make react table to scrollable?

Question

I am trying to make react table scrollable horizontally and vertically but right now it is taking all the space according to the data. I want to make this table of fixed height and scrollable in both direction.

Table component:

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;

Table Container

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;

Anyone please help me with this.

Ailing

Do you want the body to be scrollable or the whole table including the header? – Manaus

I want only body scrollable not the whole table if possible – Ailing

I also added code for table container, please check – Ailing

Answer 1

I know is late but others might be searching also for this, as I found no answers this worked pretty well; actually is simple, wrap always your React Table on a div and a className, then on CSS file do this:

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

The key is to have a fixed height for the div that is wrapping the table and overflow set to scroll. Also, you can keep the table header fixed by doing this:

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

Abstracted

Thanks! been searching this for a while and this finally works. I just wrapped a table in the div and added overflow: scroll; to it. – Wherry

Perfect solution! thanks. – Olin

Finally found this! Works perfect, thank you! – Impetigo

Answer 2

Define the style on the container you want to be fixed-height and scrollable.

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

Estabrook

Is it possible to make the table body scrollable, not the table header? – Ailing

I also added code for table container, please check – Ailing