Initial render only shows a few rows

[francislavoie]

I probably missed something obvious. I essentially followed the example from https://tanstack.com/table/v8/docs/examples/react/virtualized-rows but using react-table v7 (will update soon) and the latest tanstack-virtual beta.

I have to do a bunch of calculation to populate the data for my table, so the initial render with the virtualizer has an empty dataset. Then, the data is ready and the table is rendering, the virtualizer only shows a small subset of the rows it should (like, 6 rows when there's room for 29). As soon as I scroll a single tick (or even just call scrollTo(0, 1) on the scroll container), it causes the rest of the rows to pop in.

What could possibly cause this? The height of the ref container doesn't change during all this. I've tried calling rowVirtualizer.measure() to retrigger the render but that doesn't do anything either. I'm pretty confused.

import { useRef } from "react";
import { useVirtualizer } from "@tanstack/react-virtual";
import { Column, useFlexLayout, useSortBy, useTable } from "react-table";
import { Segment, Item, Loaders, Heading } from "../../chat-ui/components";
import { ArrowDown, ArrowUp, Sort } from "../../chat-ui/components/svg";
import { useInitLoading, useSortKey } from "../../lib/hooks";
import { classnames } from "../../chat-ui/utils/helper";

type Props<T extends object> = {
  data: Array<T>;
  columns: Array<Column<T>>;
  sortKeyString: string;
  isSortedString: string;
  sortDescString: string;
};

const SortReactTable = <T extends Object>({
  columns,
  data,
  sortKeyString,
  sortDescString,
  isSortedString,
  ...rest
}: Props<T>) => {
  const [sortKey, sortDesc, isSorted, handleOnClick] = useSortKey(
    sortKeyString,
    sortDescString,
    isSortedString
  );

  const isLoading = useInitLoading(1100);

  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    prepareRow,
    rows
  } = useTable(
    {
      columns,
      data,
      initialState: {
        sortBy: sortKey && isSorted ? [{ id: sortKey, desc: sortDesc }] : [],
      },
    },
    useSortBy,
    useFlexLayout
  );

  const parentRef = useRef<HTMLDivElement>(null);
  const rowVirtualizer = useVirtualizer<HTMLDivElement|null, T>({
    count: rows.length,
    getScrollElement: () => parentRef.current,
    estimateSize: () => 35,
    overscan: 5,
  });

  return (
    <Segment className={classnames({
      "table-wrapper": true,
      [(rest as any).className]: true
    })}>
      <Segment className="table-component" {...getTableProps()}>
        {headerGroups.map((headerGroup, index) => (
          <div
            className="table-header-group"
            {...headerGroup.getHeaderGroupProps()}
            key={index}
          >
            {headerGroup.headers.map((column, i) => (
              <div
                className="table-header"
                {...column.getHeaderProps(column.getSortByToggleProps())}
                key={i}
              >
                <Item
                  onClick={() => {
                    handleOnClick(
                      column.id,
                      column.isSortedDesc === undefined
                        ? false
                        : !column.isSortedDesc,
                      column.isSortedDesc === undefined
                        ? true
                        : !column.isSortedDesc
                    );
                  }}
                >
                  <>
                    {column.render("Header")}
                    {column.isSorted
                      ? (column.isSortedDesc ? <ArrowDown /> : <ArrowUp />)
                      : <Sort />
                    }
                  </>
                </Item>
              </div>
            ))}
          </div>
        ))}
        <div
          className="table-body"
          {...getTableBodyProps()}
        >
          <div
            className="v-list table-row-group"
            ref={parentRef}
            style={{
              height: "100vh",
              overflowY: "auto",
            }}
          >
            {isLoading ? (
              <Item px="2" py="2">
                <Heading headingLevel="h4" label="Loading data" />
                <Loaders.BarLoader />
              </Item>
            ) : (
              <div
                style={{
                  height: `${rowVirtualizer.getTotalSize()}px`,
                  width: "100%",
                  position: "relative",
                }}
              >
                {rowVirtualizer.getVirtualItems().map(virtualRow => {
                  const row = rows[virtualRow.index];
                  if (!row) return <></>;
                  prepareRow(row);
              
                  return (
                    <div
                      {...row.getRowProps({
                        style: {
                          position: 'absolute',
                          top: 0,
                          left: 0,
                          width: '100%',
                          height: `${virtualRow.size}px`,
                          transform: `translateY(${virtualRow.start}px)`,
                        },
                        className: virtualRow.index % 2 ? 'table-odd' : 'table-even'
                      })}
                    >
                      {row.cells.map((cell) => (
                        <div className="table-cell" {...cell.getCellProps()}>
                          {cell.render("Cell")}
                        </div>
                      ))}
                    </div>
                  );
                })}
              </div>
            )}
          </div>
        </div>
      </Segment>
    </Segment>
  );
};

export default SortReactTable;

[wuarmin]

That's possible a duplicate of #363. There's a PR(#366) with a fix, but it is not merged yet.

[francislavoie]

Oh, yeah that would make sense. When the count is 0 and overscan is 5, it seems to render 6 rows initially. When overscan is 0, it renders one row initially. So yeah, the issue I'm seeing does seem to be a factor of the count + overscan, i.e. count not updating in time.

Thanks, hoping #366 gets merged soon (hint hint @tannerlinsley)