feat: added table-state

examples/table-state.tsx

@@ -0,0 +1,54 @@
+import * as React from 'react'
+import { StateSnapshot, TableVirtuoso, TableVirtuosoHandle } from '../src/'
+
+export function Example() {
+  const ref = React.useRef<TableVirtuosoHandle>(null)
+  const state = React.useRef<StateSnapshot | undefined>(undefined)
+  const [key, setKey] = React.useState(0)
+
+  console.log('Rendering with key', key)
+  return (
+    <div>
+      <button
+        onClick={() => {
+          ref.current?.getState((snapshot) => {
+            state.current = snapshot
+          })
+          setKey((value) => value + 1)
+        }}
+      >
+        Rerender + Log State
+      </button>
+
+      <TableVirtuoso
+        key={key}
+        ref={ref}
+        style={{ height: 400, marginTop: 8 }}
+        restoreStateFrom={state.current}
+        computeItemKey={(key: number) => `item-${key.toString()}`}
+        totalCount={250}
+        components={{
+          TableRow: ({ style, ...props }) => <tr style={{ height: props['data-index'] % 2 ? 15 : 60, ...style }} {...props} />,
+        }}
+        fixedHeaderContent={() => (
+          <tr>
+            <th style={{ width: 75, background: 'blue', color: 'white' }}>Item</th>
+            <th style={{ width: 75, background: 'blue', color: 'white' }}>Col 1</th>
+            <th style={{ width: 75, background: 'blue', color: 'white' }}>Col 2</th>
+            <th style={{ width: 75, background: 'blue', color: 'white' }}>Col 3</th>
+            <th style={{ width: 75, background: 'blue', color: 'white' }}>Col 4</th>
+          </tr>
+        )}
+        itemContent={(index) => (
+          <>
+            <td style={{ border: '1px solid gray' }}>Item {index}</td>
+            <td style={{ border: '1px solid gray' }}>Col {index}-1</td>
+            <td style={{ border: '1px solid gray' }}>Col {index}-2</td>
+            <td style={{ border: '1px solid gray' }}>Col {index}-3</td>
+            <td style={{ border: '1px solid gray' }}>Col {index}-4</td>
+          </>
+        )}
+      />
+    </div>
+  )
+}

src/TableVirtuoso.tsx

@@ -266,6 +266,7 @@ const {
   {
     required: {},
     optional: {
+      restoreStateFrom: 'restoreStateFrom',
       context: 'context',
       followOutput: 'followOutput',
       firstItemIndex: 'firstItemIndex',
@@ -300,6 +301,7 @@ const {
       scrollIntoView: 'scrollIntoView',
       scrollTo: 'scrollTo',
       scrollBy: 'scrollBy',
+      getState: 'getState',
     },
     events: {
       isScrolling: 'isScrolling',

src/component-interfaces/TableVirtuoso.ts

@@ -11,6 +11,8 @@ import type {
   ScrollSeekConfiguration,
   SizeFunction,
   TableComponents,
+  StateSnapshot,
+  StateCallback,
 } from '../interfaces'
 import type { VirtuosoProps } from './Virtuoso'
 
@@ -214,11 +216,22 @@ export interface TableVirtuosoProps<D, C> extends Omit<VirtuosoProps<D, C>, 'com
    * By default `4`. Redefine to change how much away from the bottom the scroller can be before the list is not considered not at bottom.
    */
   atBottomThreshold?: number
+  /**
+   * pass a state obtained from the getState() method to restore the list state - this includes the previously measured item sizes and the scroll location.
+   * Notice that you should still pass the same data and totalCount properties as before, so that the list can match the data with the stored measurements.
+   * This is useful when you want to keep the list state when the component is unmounted and remounted, for example when navigating to a different page.
+   */
+  restoreStateFrom?: StateSnapshot
 }
 
 export interface TableVirtuosoHandle {
   scrollIntoView(location: number | FlatScrollIntoViewLocation): void
   scrollToIndex(location: number | FlatIndexLocationWithAlign): void
   scrollTo(location: ScrollToOptions): void
   scrollBy(location: ScrollToOptions): void
+
+  /**
+   * Obtains the internal size state of the component, so that it can be restored later. This does not include the data items.
+   */
+  getState(stateCb: StateCallback): void
 }