Tables are Hard, Part 3: Streaming Data

- const data = useStaticData(100);
+ const data = useStaticData(50_000);

...

 import {
   useSortBy,
   useResizeColumns,
 } from 'react-table';
+import { FixedSizeList } from 'react-window';
 
 import './Table.css';

...

 export default function Table({ data: { columns, data } }) {
           ))}
         </thead>
         <tbody {...getTableBodyProps()}>
-          {rows.map((row) => {
-            prepareRow(row);
-            return (
-              <tr {...row.getRowProps()}>
+          {/*
+            * This has a few problems once we use 10,000 rows and add virtual scrolling:
+            * - At 10,000 rows, sorting and filtering slow down quite a lot. We'll address that later.
+            *   Virtual scrolling makes scrolling and resizing columns fast again, but sorting and filtering still chug.
+            * - The table's height is no longer dynamic. This can be fixed by detecting the parent's dimensions.
+            * - If the user's browser shows layout-impacting scrollbars (Firefox does so by default for example),
+            *   the header is not part of the scrolling area and thus has a different width than the scroll body.
+            *   This can be fixed by detecting how wide the scrollbar is and whether it's present, then using that
+            *   to adjust the <thead/> width accordingly.
+            */}
+          <FixedSizeList
+            itemCount={rows.length}
+            height={300}
+            itemSize={34}
+          >
+            {({ index, style }) => {
+              const row = rows[index];
+              prepareRow(row);
+              return <tr {...row.getRowProps({ style })}>
                 {row.cells.map(cell => (
                   <td {...cell.getCellProps()}>
                     {cell.render('Cell')}
                   </td>
                 ))}
               </tr>
-            );
-          })}
+            }}
+          </FixedSizeList>
         </tbody>
       </table>
     </div>

export function useStreamingData(
  rowsPerBatch = 5, delay = 1000, maxBatches = 100
) {
  const [minTimestamp, setMinTimestamp] = React.useState(
    Date.now() - 1000 * 60 * 60 * 24 * 7 // Logs since last week
  );
  const [batches, setBatches] = React.useState([]);

  const addBatch = React.useCallback(() => {
    if (batches.length >= maxBatches) return;
    const batch = Array(rowsPerBatch).fill(0).map(
      (_, i) => generateRow(
        minTimestamp + i * 1000,
        minTimestamp + i * 1999
      )
    );
    setBatches([...batches, batch]);
    setMinTimestamp(minTimestamp + rowsPerBatch * 2000);
  }, [batches, maxBatches, minTimestamp, rowsPerBatch]);

  React.useEffect(() => {
    const newTimer = global.setInterval(addBatch, delay);
    return () => {
      global.clearInterval(newTimer);
    };
  }, [delay, addBatch]);

  return React.useMemo(
    () => ({ columns, data: batches.flat() }),
    [batches]
  );
}

+const TableContext = React.createContext(null);
+
+/**
+ * By memoizing this, we ensure that react-window can recycle rendered rows that haven't changed when new data comes in.
+ */
+const BodyRow = React.memo(({ index, style }) => {
+  const { rows, instance: { prepareRow } } = React.useContext(TableContext);
+  const row = rows[index];
+  prepareRow(row);
+  return (
+    <div className={styles.Row} {...row.getRowProps({ style })}>
+      {row.cells.map(cell => (
+        <div className={styles.BodyCell} {...cell.getCellProps()}>
+          {cell.render('Cell')}
+        </div>
+      ))}
+    </div>
+  );
+});
+
+/**
+ * Setting outerElementType on FixedSizeList lets us override properties on the scroll container. However, FixedSizeList
+ * redraws this on every data change, so the wrapper component needs to be memoized for scroll position to be retained.
+ *
+ * Note: If the list is sorted such that new items are added to the top, the items in view will still change
+ * because the ones that _were_ at that scroll position were pushed down.
+ * This can be accounted in a more complete implementation, but it's out of scope of this demonstration.
+ */
+const ForcedScrollWrapper = React.memo((props, ref) => (
+  // Instead of handling complexity with when the scrollbar is/isn't visible for this basic tutorial,
+  // instead force the scrollbar to appear even when it isn't needed. Not great, but out of scope.
+  <div {...props} style={{ ...props.style, overflowY: 'scroll' }} forwardedRef={ref}></div>
+));
+
-export default function Table({ data: { columns, data } }) {
+const Table = React.memo(({ data: { columns, data } }) => {
   const reactTable = useTable({
       columns,
       data,
+      autoResetSortBy: false,
+      autoResetResize: false,
     },
     useFlexLayout,
     useGlobalFilter,
     useSortBy,
     useResizeColumns
  );
  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    allColumns,
-   prepareRow,
    setGlobalFilter
  } = reactTable;

  const { width: scrollbarWidth } = useScrollbarSize();
  const [fillContainer, setFillContainer] = React.useState(null)
  const fillContainerRef = React.useCallback((el) => setFillContainer(el), []);
  const { height: fillHeight } = useContainerSize(fillContainer);

+  const context = React.useMemo(() => ({
+    instance: reactTable,
+    rows,
+    // By also watching reactTable.state specifically, we make sure that resizing columns is reflected immediately.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }), [reactTable, rows, reactTable.state]);
+
   return (
+    <TableContext.Provider value={context}>     
       <div className={styles.root}>
         <header>
           <ColumnSelector columns={allColumns} />
           <Filter onChange={setGlobalFilter} />
         </header>
         <div className={styles.fill} ref={fillContainerRef}>
           <div {...getTableProps()} className={styles.Table}>
             <div className={styles.TableHead}>
               ...
             </div>
             <div className={styles.TableBody} {...getTableBodyProps()}>
               <FixedSizeList
-                outerElementType={(props, ref) => (
-                  // Instead of handling complexity with when the scrollbar is/isn't visible for this basic tutorial,
-                  // we'll instead force the scrollbar to appear even when it isn't needed. Suboptimal, but out of scope.
-                  <div {...props} style={{ ...props.style, overflowY: 'scroll' }} forwardedRef={ref}></div>
-                )}
+                outerElementType={ForcedScrollWrapper}
                 itemCount={rows.length}
                 height={fillHeight - 56}
                 itemSize={34}
+                onItemsRendered={onRowsRendered}
               >
-                {({ index, style }) => {
-                  const row = rows[index];
-                  prepareRow(row);
-                  return <div className={styles.Row} {...row.getRowProps({ style })}>
-                    {row.cells.map(cell => (
-                      <div className={styles.BodyCell} {...cell.getCellProps()}>
-                        {cell.render('Cell')}
-                      </div>
-                    ))}
-                  </div>
-                }}
+                {BodyRow}
               </FixedSizeList>
             </div>
           </div>
         </div>
       </div>
     </div>
+   </TableContext.Provider>
   );
-}
+});
+
+export default Table;

...

     const reactTable = useTable({
       columns,
       data,
       autoResetSortBy: false,
       autoResetResize: false,
+      disableSortRemove: true,
+      initialState: {
+        sortBy: [{ id: 'timestamp', desc: false }],
+      },
     },
     useFlexLayout,
     useGlobalFilter,
     useSortBy,
     useResizeColumns
   );

   ...

+  const [visibleStart, setVisibleStart] = React.useState(1);
+  const [visibleStop, setVisibleStop] = React.useState(1);
+  const viewportDetails = React.useMemo(() => {
+    const count = visibleStop - visibleStart + 1;
+    let text = `Showing ${visibleStart + 1} - ${visibleStop + 1} / ${rows.length} records`;
+    if (rows.length === 500) text += ' (most recent only)';
+
+    if (count <= 0) {
+      text = 'No records to show';
+    } else if (count >= rows.length) {
+      text = ' '; // non-breaking space
+    }
+    return text;
+  }, [rows.length, visibleStart, visibleStop]);
+
+  const onRowsRendered = React.useCallback(({ visibleStartIndex, visibleStopIndex }) => {
+    setVisibleStart(visibleStartIndex);
+    setVisibleStop(visibleStopIndex);
+  }, []);

   ...

   return (
     <TableContext.Provider value={context}>     
       <div className={styles.root}>
         <header>
           <ColumnSelector columns={allColumns} />
           <Filter onChange={setGlobalFilter} />
         </header>
         <div className={styles.fill} ref={fillContainerRef}>
           <div {...getTableProps()} className={styles.Table}>
             <div className={styles.TableHead}>
               ...
             </div>
             <div className={styles.TableBody} {...getTableBodyProps()}>
               ...
             </div>
           </div>
         </div>
+        <div className={styles.ViewportDetails} style={{ marginRight: scrollbarWidth }}>
+          {viewportDetails}
+        </div>
       </div>
     </div>
    </TableContext.Provider>
   );
...