Usage with react-table?

I cloned the react-table’s Simple sandbox to get react-virtual working with it.

But I’m confused what to put instead of rowVirtualizer.virtualItems when using .map() inside tbody?

Also, confused if I have to wrap the whole table or just tbody as it’s the only thing that needs scrolling.

I think all the rows get rendered because the rendering is too slow for only 2000 items. I’m sure I must be doing something wrong.

Here’s my CodeSandbox 👉 https://codesandbox.io/s/react-table-basic-with-react-virtual-tq047?file=/src/App.js

And here’s the same code if I ever delete it:

import React from "react";
import styled from "styled-components";
import { useTable } from "react-table";
import { useVirtual } from "react-virtual";

import makeData from "./makeData";

const Styles = styled.div`
  padding: 1rem;

  table {
    border-spacing: 0;
    border: 1px solid black;

    tr {
      :last-child {
        td {
          border-bottom: 0;
        }
      }
    }

    th,
    td {
      margin: 0;
      padding: 0.5rem;
      border-bottom: 1px solid black;
      border-right: 1px solid black;

      :last-child {
        border-right: 0;
      }
    }
  }
`;

function Table({ columns, data }) {
  // Use the state and functions returned from useTable to build your UI
  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow
  } = useTable({
    columns,
    data
  });

  const parentRef = React.useRef();
  const rowVirtualizer = useVirtual({
    size: rows.length,
    parentRef,
    estimateSize: React.useCallback(i => rows[i], []),
    overscan: 5
  });

  // Render the UI for your table
  return (
    <div
      ref={parentRef}
      className="List"
      style={{
        height: `450px`,
        width: `650px`,
        overflow: "auto"
      }}
    >
      <div
        className="ListInner"
        style={{
          height: `${rowVirtualizer.totalSize}px`,
          width: "100%",
          position: "relative"
        }}
      >
        <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, i) => {
              prepareRow(row);
              return (
                <tr {...row.getRowProps()}>
                  {row.cells.map(cell => {
                    return (
                      <td {...cell.getCellProps()}>{cell.render("Cell")}</td>
                    );
                  })}
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );
}

function App() {
  const columns = React.useMemo(
    () => [
      {
        Header: "Name",
        columns: [
          {
            Header: "First Name",
            accessor: "firstName"
          },
          {
            Header: "Last Name",
            accessor: "lastName"
          }
        ]
      },
      {
        Header: "Info",
        columns: [
          {
            Header: "Age",
            accessor: "age"
          },
          {
            Header: "Visits",
            accessor: "visits"
          },
          {
            Header: "Status",
            accessor: "status"
          },
          {
            Header: "Profile Progress",
            accessor: "progress"
          }
        ]
      }
    ],
    []
  );

  const data = React.useMemo(() => makeData(2000), []);

  return (
    <Styles>
      <Table columns={columns} data={data} />
    </Styles>
  );
}

export default App;

[piecyk]

@tannerlinsley what if we would use pseudo elements on tbody and control them via css custom properties 🤔

https://codesandbox.io/s/poc-react-virtual-table-jyz0m

[eirikaho]

• React Table Pro

ETA on this? 👼