Cannot get horizontal/vertical scrolling to work, need help!

[AlbinCederblad]

I want the table to become horizontally and vertically scrollable at small viewports/res.

Or, if possible i would like to have the table work like this codepen at small resolutions/viewports: https://codepen.io/martinsanne/pen/rzCDb

Is this possible with react-table?

Heres my code. Any help or suggestions are very much appreciated!

Table.js:

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

import "./Table.scss";

export default function Table(props) {
  // memorize columns and data
  const columns = useMemo(() => props.columns, []);
  const data = useMemo(() => props.data, []);

  const tableInstance = useTable({
    columns,
    data,
  });

  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow,
  } = tableInstance;

  return (
    <div className="table-card">
      <table {...getTableProps()}>
        <thead>
          {headerGroups.map((headerGroup) => (
            <tr {...headerGroup.getHeaderGroupProps()}>
              {headerGroup.headers.map((column) => (
                <th {...column.getHeaderProps()}>{column.render("Header")}</th>
              ))}
            </tr>
          ))}
        </thead>
        <tbody {...getTableBodyProps()}>
          {rows.map((row) => {
            prepareRow(row);
            return (
              <tr {...row.getRowProps()}>
                {row.cells.map((cell) => {
                  return (
                    <td {...cell.getCellProps()}>{cell.render("Cell")}</td>
                  );
                })}
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
}

Table.scss:

table {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

.table-card {
  margin: 2rem;
  border-radius: 2px;
  box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 6px, rgba(0, 0, 0, 0.12) 0px 1px 4px;
}

table td {
  border-top: 1px solid #ddd;
  padding: 8px;
}
table th {
  border-left: 1px solid #ddd;
  padding: 8px;
}

table tr:hover {
  background-color: #ddd;
}

table th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #007d41;
  color: white;
}