@tanstack/react-table 9.0.0-alpha.9 → 9.0.0-beta.2

package/src/useTable.ts

@@ -0,0 +1,191 @@
+'use client'
+
+import { useMemo, useState } from 'react'
+import { constructTable } from '@tanstack/table-core'
+import { shallow, useSelector } from '@tanstack/react-store'
+import { reactReactivity } from './reactivity'
+import { FlexRender } from './FlexRender'
+import { Subscribe } from './Subscribe'
+import type { FlexRenderProps } from './FlexRender'
+import type { SubscribePropsWithStore, SubscribeSource } from './Subscribe'
+import type {
+  CellData,
+  RowData,
+  Table,
+  TableFeatures,
+  TableOptions,
+  TableState,
+} from '@tanstack/table-core'
+import type { FunctionComponent, ReactNode } from 'react'
+
+export type ReactTable<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+  TSelected = TableState<TFeatures>,
+> = Omit<Table<TFeatures, TData>, 'store'> & {
+  /**
+   * @deprecated Prefer `table.state` for render reads,
+   * `table.atoms.<slice>.get()` for slice snapshots, or
+   * `table.Subscribe` / `useSelector(table.store, selector)` for explicit
+   * subscriptions. `table.store.state` is a current-value snapshot and is easy
+   * to misuse in render code.
+   */
+  readonly store: Table<TFeatures, TData>['store']
+  /**
+   * A React HOC (Higher Order Component) that allows you to subscribe to the table state.
+   *
+   * This is useful for opting into state re-renders for specific parts of the table state.
+   *
+   * Pass `source` to subscribe to a single atom or store (e.g. `table.atoms.rowSelection`
+   * or `table.optionsStore`) instead of the full `table.store`.
+   *
+   * @example
+   * <table.Subscribe selector={(state) => ({ rowSelection: state.rowSelection })}>
+   *   {({ rowSelection }) => (
+   *     <tr key={row.id}>...</tr>
+   *   )}
+   * </table.Subscribe>
+   *
+   * @example
+   * <table.Subscribe source={table.atoms.rowSelection}>
+   *   {(rowSelection) => <div>...</div>}
+   * </table.Subscribe>
+   *
+   * @example
+   * <table.Subscribe source={table.atoms.rowSelection} selector={(s) => s?.[row.id]}>
+   *   {() => <tr key={row.id}>...</tr>}
+   * </table.Subscribe>
+   */
+  /**
+   * Overloads (not a single union) so `selector` callbacks get correct contextual
+   * types in JSX; a union of two `selector` signatures degrades to implicit `any`.
+   *
+   * Source **without** `selector` is a separate overload so children receive `TSourceValue`
+   * (identity projection). If `selector` were optional on one overload, `TSubSelected`
+   * would default to `unknown` instead of inferring from the source.
+   *
+   * The **source** overloads are listed first so `TSourceValue` is inferred from `source`.
+   */
+  Subscribe: {
+    <TSourceValue>(props: {
+      source: SubscribeSource<TSourceValue>
+      selector?: undefined
+      children: ((state: TSourceValue) => ReactNode) | ReactNode
+    }): ReturnType<FunctionComponent>
+    <TSourceValue, TSubSelected>(props: {
+      source: SubscribeSource<TSourceValue>
+      selector: (state: TSourceValue) => TSubSelected
+      children: ((state: TSubSelected) => ReactNode) | ReactNode
+    }): ReturnType<FunctionComponent>
+    <TSubSelected>(
+      props: Omit<SubscribePropsWithStore<TFeatures, TSubSelected>, 'source'>,
+    ): ReturnType<FunctionComponent>
+  }
+  /**
+   * A React component that renders headers, cells, or footers with custom markup.
+   * Use this utility component instead of manually calling flexRender.
+   *
+   * @example
+   * ```tsx
+   * <table.FlexRender cell={cell} />
+   * <table.FlexRender header={header} />
+   * <table.FlexRender footer={footer} />
+   * ```
+   *
+   * This replaces calling `flexRender` directly like this:
+   * ```tsx
+   * flexRender(cell.column.columnDef.cell, cell.getContext())
+   * flexRender(header.column.columnDef.header, header.getContext())
+   * flexRender(footer.column.columnDef.footer, footer.getContext())
+   * ```
+   */
+  FlexRender: <TValue extends CellData = CellData>(
+    props: FlexRenderProps<TFeatures, TData, TValue>,
+  ) => ReactNode
+  /**
+   * The selected state of the table. This state may not match the structure of
+   * the full table state because it is selected by the selector function that
+   * you pass as the 2nd argument to `useTable`.
+   *
+   * @example
+   * const table = useTable(options, (state) => ({ globalFilter: state.globalFilter })) // only globalFilter is part of the selected state
+   *
+   * console.log(table.state.globalFilter)
+   */
+  readonly state: Readonly<TSelected>
+}
+
+/**
+ * Creates a React table instance backed by TanStack Store atoms.
+ *
+ * The optional selector projects from `table.store`; the selected value is
+ * exposed on `table.state` and compared shallowly for React re-renders. Omit
+ * the selector to subscribe to every registered table state slice, or pass a
+ * narrower selector and use `table.Subscribe` lower in the tree for targeted
+ * subscriptions.
+ *
+ * @example
+ * ```tsx
+ * const table = useTable(
+ *   {
+ *     features,
+ *     rowModels: {},
+ *     columns,
+ *     data,
+ *   },
+ *   (state) => ({ pagination: state.pagination }),
+ * )
+ *
+ * table.state.pagination
+ * ```
+ */
+export function useTable<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+  TSelected = TableState<TFeatures>,
+>(
+  tableOptions: TableOptions<TFeatures, TData>,
+  selector?: (state: TableState<TFeatures>) => TSelected,
+): ReactTable<TFeatures, TData, TSelected> {
+  const [table] = useState(() => {
+    const tableInstance = constructTable({
+      ...tableOptions,
+      features: {
+        coreReativityFeature: reactReactivity(),
+        ...tableOptions.features,
+      },
+    }) as unknown as ReactTable<TFeatures, TData, TSelected>
+
+    tableInstance.Subscribe = ((props: any) => {
+      const source = props.source ?? tableInstance.store
+
+      return Subscribe({
+        ...props,
+        source,
+      })
+    }) as ReactTable<TFeatures, TData, TSelected>['Subscribe']
+
+    tableInstance.FlexRender = FlexRender
+
+    return tableInstance
+  })
+
+  // sync options on every render
+  table.setOptions((prev) => ({
+    ...prev,
+    ...tableOptions,
+  }))
+
+  const state = useSelector(table.store, selector, { compare: shallow })
+
+  // we know this is not the most efficient way to return the table,
+  // but it is required for the react compiler to work
+  return useMemo(
+    () => ({
+      ...table,
+      options: tableOptions,
+      state,
+    }),
+    [table, tableOptions, state],
+  )
+}

package/dist/cjs/index.cjs

@@ -1,77 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const React = require("react");
-const tableCore = require("@tanstack/table-core");
-function _interopNamespaceDefault(e) {
-  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
-  if (e) {
-    for (const k in e) {
-      if (k !== "default") {
-        const d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: () => e[k]
-        });
-      }
-    }
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
-function flexRender(Comp, props) {
-  return !Comp ? null : isReactComponent(Comp) ? /* @__PURE__ */ jsxRuntime.jsx(Comp, { ...props }) : Comp;
-}
-function isReactComponent(component) {
-  return isClassComponent(component) || typeof component === "function" || isExoticComponent(component);
-}
-function isClassComponent(component) {
-  return typeof component === "function" && (() => {
-    const proto = Object.getPrototypeOf(component);
-    return proto.prototype && proto.prototype.isReactComponent;
-  })();
-}
-function isExoticComponent(component) {
-  return typeof component === "object" && typeof component.$$typeof === "symbol" && ["react.memo", "react.forward_ref"].includes(component.$$typeof.description);
-}
-function useTable(options) {
-  const resolvedOptions = {
-    state: {},
-    // Dummy state
-    onStateChange: () => {
-    },
-    // noop
-    renderFallbackValue: null,
-    ...options
-  };
-  const [tableRef] = React__namespace.useState(() => ({
-    current: tableCore._createTable(resolvedOptions)
-  }));
-  const [state, setState] = React__namespace.useState(() => tableRef.current.initialState);
-  tableRef.current.setOptions((prev) => ({
-    ...prev,
-    ...options,
-    state: {
-      ...state,
-      ...options.state
-    },
-    // Similarly, we'll maintain both our internal state and any user-provided
-    // state.
-    onStateChange: (updater) => {
-      var _a;
-      setState(updater);
-      (_a = options.onStateChange) == null ? void 0 : _a.call(options, updater);
-    }
-  }));
-  return tableRef.current;
-}
-exports.flexRender = flexRender;
-exports.useTable = useTable;
-Object.keys(tableCore).forEach((k) => {
-  if (k !== "default" && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
-    enumerable: true,
-    get: () => tableCore[k]
-  });
-});
-//# sourceMappingURL=index.cjs.map

package/dist/cjs/index.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.cjs","sources":["../../src/index.tsx"],"sourcesContent":["import * as React from 'react'\nexport * from '@tanstack/table-core'\n\nimport {\n  TableOptions,\n  TableOptionsResolved,\n  RowData,\n  _createTable,\n} from '@tanstack/table-core'\n\nexport type Renderable<TProps> = React.ReactNode | React.ComponentType<TProps>\n\n//\n\n/**\n * If rendering headers, cells, or footers with custom markup, use flexRender instead of `cell.getValue()` or `cell.renderValue()`.\n */\nexport function flexRender<TProps extends object>(\n  Comp: Renderable<TProps>,\n  props: TProps\n): React.ReactNode | JSX.Element {\n  return !Comp ? null : isReactComponent<TProps>(Comp) ? (\n    <Comp {...props} />\n  ) : (\n    Comp\n  )\n}\n\nfunction isReactComponent<TProps>(\n  component: unknown\n): component is React.ComponentType<TProps> {\n  return (\n    isClassComponent(component) ||\n    typeof component === 'function' ||\n    isExoticComponent(component)\n  )\n}\n\nfunction isClassComponent(component: any) {\n  return (\n    typeof component === 'function' &&\n    (() => {\n      const proto = Object.getPrototypeOf(component)\n      return proto.prototype && proto.prototype.isReactComponent\n    })()\n  )\n}\n\nfunction isExoticComponent(component: any) {\n  return (\n    typeof component === 'object' &&\n    typeof component.$$typeof === 'symbol' &&\n    ['react.memo', 'react.forward_ref'].includes(component.$$typeof.description)\n  )\n}\n\nexport function useTable<TData extends RowData>(options: TableOptions<TData>) {\n  // Compose in the generic options to the user options\n  const resolvedOptions: TableOptionsResolved<TData> = {\n    state: {}, // Dummy state\n    onStateChange: () => {}, // noop\n    renderFallbackValue: null,\n    ...options,\n  }\n\n  // Create a new table and store it in state\n  const [tableRef] = React.useState(() => ({\n    current: _createTable<TData>(resolvedOptions),\n  }))\n\n  // By default, manage table state here using the table's initial state\n  const [state, setState] = React.useState(() => tableRef.current.initialState)\n\n  // Compose the default state above with any user state. This will allow the user\n  // to only control a subset of the state if desired.\n  tableRef.current.setOptions(prev => ({\n    ...prev,\n    ...options,\n    state: {\n      ...state,\n      ...options.state,\n    },\n    // Similarly, we'll maintain both our internal state and any user-provided\n    // state.\n    onStateChange: updater => {\n      setState(updater)\n      options.onStateChange?.(updater)\n    },\n  }))\n\n  return tableRef.current\n}\n"],"names":["jsx","React","_createTable"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAiBgB,SAAA,WACd,MACA,OAC+B;AACxB,SAAA,CAAC,OAAO,OAAO,iBAAyB,IAAI,IAChDA,+BAAA,MAAA,EAAM,GAAG,MAAO,CAAA,IAEjB;AAEJ;AAEA,SAAS,iBACP,WAC0C;AAC1C,SACE,iBAAiB,SAAS,KAC1B,OAAO,cAAc,cACrB,kBAAkB,SAAS;AAE/B;AAEA,SAAS,iBAAiB,WAAgB;AAEtC,SAAA,OAAO,cAAc,eACpB,MAAM;AACC,UAAA,QAAQ,OAAO,eAAe,SAAS;AACtC,WAAA,MAAM,aAAa,MAAM,UAAU;AAAA,EAAA;AAGhD;AAEA,SAAS,kBAAkB,WAAgB;AACzC,SACE,OAAO,cAAc,YACrB,OAAO,UAAU,aAAa,YAC9B,CAAC,cAAc,mBAAmB,EAAE,SAAS,UAAU,SAAS,WAAW;AAE/E;AAEO,SAAS,SAAgC,SAA8B;AAE5E,QAAM,kBAA+C;AAAA,IACnD,OAAO,CAAC;AAAA;AAAA,IACR,eAAe,MAAM;AAAA,IAAC;AAAA;AAAA,IACtB,qBAAqB;AAAA,IACrB,GAAG;AAAA,EAAA;AAIL,QAAM,CAAC,QAAQ,IAAIC,iBAAM,SAAS,OAAO;AAAA,IACvC,SAASC,uBAAoB,eAAe;AAAA,EAC5C,EAAA;AAGI,QAAA,CAAC,OAAO,QAAQ,IAAID,iBAAM,SAAS,MAAM,SAAS,QAAQ,YAAY;AAInE,WAAA,QAAQ,WAAW,CAAS,UAAA;AAAA,IACnC,GAAG;AAAA,IACH,GAAG;AAAA,IACH,OAAO;AAAA,MACL,GAAG;AAAA,MACH,GAAG,QAAQ;AAAA,IACb;AAAA;AAAA;AAAA,IAGA,eAAe,CAAW,YAAA;;AACxB,eAAS,OAAO;AAChB,oBAAQ,kBAAR,iCAAwB;AAAA,IAC1B;AAAA,EACA,EAAA;AAEF,SAAO,SAAS;AAClB;;;;;;;;;"}

package/dist/cjs/index.d.cts

@@ -1,9 +0,0 @@
-import { TableOptions, RowData } from '@tanstack/table-core';
-import * as React from 'react';
-export * from '@tanstack/table-core';
-export type Renderable<TProps> = React.ReactNode | React.ComponentType<TProps>;
-/**
- * If rendering headers, cells, or footers with custom markup, use flexRender instead of `cell.getValue()` or `cell.renderValue()`.
- */
-export declare function flexRender<TProps extends object>(Comp: Renderable<TProps>, props: TProps): React.ReactNode | JSX.Element;
-export declare function useTable<TData extends RowData>(options: TableOptions<TData>): import('@tanstack/table-core').Table<TData>;

package/dist/esm/index.d.ts

@@ -1,9 +0,0 @@
-import { TableOptions, RowData } from '@tanstack/table-core';
-import * as React from 'react';
-export * from '@tanstack/table-core';
-export type Renderable<TProps> = React.ReactNode | React.ComponentType<TProps>;
-/**
- * If rendering headers, cells, or footers with custom markup, use flexRender instead of `cell.getValue()` or `cell.renderValue()`.
- */
-export declare function flexRender<TProps extends object>(Comp: Renderable<TProps>, props: TProps): React.ReactNode | JSX.Element;
-export declare function useTable<TData extends RowData>(options: TableOptions<TData>): import('@tanstack/table-core').Table<TData>;

package/dist/esm/index.js

@@ -1,55 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import * as React from "react";
-import { _createTable } from "@tanstack/table-core";
-export * from "@tanstack/table-core";
-function flexRender(Comp, props) {
-  return !Comp ? null : isReactComponent(Comp) ? /* @__PURE__ */ jsx(Comp, { ...props }) : Comp;
-}
-function isReactComponent(component) {
-  return isClassComponent(component) || typeof component === "function" || isExoticComponent(component);
-}
-function isClassComponent(component) {
-  return typeof component === "function" && (() => {
-    const proto = Object.getPrototypeOf(component);
-    return proto.prototype && proto.prototype.isReactComponent;
-  })();
-}
-function isExoticComponent(component) {
-  return typeof component === "object" && typeof component.$$typeof === "symbol" && ["react.memo", "react.forward_ref"].includes(component.$$typeof.description);
-}
-function useTable(options) {
-  const resolvedOptions = {
-    state: {},
-    // Dummy state
-    onStateChange: () => {
-    },
-    // noop
-    renderFallbackValue: null,
-    ...options
-  };
-  const [tableRef] = React.useState(() => ({
-    current: _createTable(resolvedOptions)
-  }));
-  const [state, setState] = React.useState(() => tableRef.current.initialState);
-  tableRef.current.setOptions((prev) => ({
-    ...prev,
-    ...options,
-    state: {
-      ...state,
-      ...options.state
-    },
-    // Similarly, we'll maintain both our internal state and any user-provided
-    // state.
-    onStateChange: (updater) => {
-      var _a;
-      setState(updater);
-      (_a = options.onStateChange) == null ? void 0 : _a.call(options, updater);
-    }
-  }));
-  return tableRef.current;
-}
-export {
-  flexRender,
-  useTable
-};
-//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":["../../src/index.tsx"],"sourcesContent":["import * as React from 'react'\nexport * from '@tanstack/table-core'\n\nimport {\n  TableOptions,\n  TableOptionsResolved,\n  RowData,\n  _createTable,\n} from '@tanstack/table-core'\n\nexport type Renderable<TProps> = React.ReactNode | React.ComponentType<TProps>\n\n//\n\n/**\n * If rendering headers, cells, or footers with custom markup, use flexRender instead of `cell.getValue()` or `cell.renderValue()`.\n */\nexport function flexRender<TProps extends object>(\n  Comp: Renderable<TProps>,\n  props: TProps\n): React.ReactNode | JSX.Element {\n  return !Comp ? null : isReactComponent<TProps>(Comp) ? (\n    <Comp {...props} />\n  ) : (\n    Comp\n  )\n}\n\nfunction isReactComponent<TProps>(\n  component: unknown\n): component is React.ComponentType<TProps> {\n  return (\n    isClassComponent(component) ||\n    typeof component === 'function' ||\n    isExoticComponent(component)\n  )\n}\n\nfunction isClassComponent(component: any) {\n  return (\n    typeof component === 'function' &&\n    (() => {\n      const proto = Object.getPrototypeOf(component)\n      return proto.prototype && proto.prototype.isReactComponent\n    })()\n  )\n}\n\nfunction isExoticComponent(component: any) {\n  return (\n    typeof component === 'object' &&\n    typeof component.$$typeof === 'symbol' &&\n    ['react.memo', 'react.forward_ref'].includes(component.$$typeof.description)\n  )\n}\n\nexport function useTable<TData extends RowData>(options: TableOptions<TData>) {\n  // Compose in the generic options to the user options\n  const resolvedOptions: TableOptionsResolved<TData> = {\n    state: {}, // Dummy state\n    onStateChange: () => {}, // noop\n    renderFallbackValue: null,\n    ...options,\n  }\n\n  // Create a new table and store it in state\n  const [tableRef] = React.useState(() => ({\n    current: _createTable<TData>(resolvedOptions),\n  }))\n\n  // By default, manage table state here using the table's initial state\n  const [state, setState] = React.useState(() => tableRef.current.initialState)\n\n  // Compose the default state above with any user state. This will allow the user\n  // to only control a subset of the state if desired.\n  tableRef.current.setOptions(prev => ({\n    ...prev,\n    ...options,\n    state: {\n      ...state,\n      ...options.state,\n    },\n    // Similarly, we'll maintain both our internal state and any user-provided\n    // state.\n    onStateChange: updater => {\n      setState(updater)\n      options.onStateChange?.(updater)\n    },\n  }))\n\n  return tableRef.current\n}\n"],"names":[],"mappings":";;;;AAiBgB,SAAA,WACd,MACA,OAC+B;AACxB,SAAA,CAAC,OAAO,OAAO,iBAAyB,IAAI,IAChD,oBAAA,MAAA,EAAM,GAAG,MAAO,CAAA,IAEjB;AAEJ;AAEA,SAAS,iBACP,WAC0C;AAC1C,SACE,iBAAiB,SAAS,KAC1B,OAAO,cAAc,cACrB,kBAAkB,SAAS;AAE/B;AAEA,SAAS,iBAAiB,WAAgB;AAEtC,SAAA,OAAO,cAAc,eACpB,MAAM;AACC,UAAA,QAAQ,OAAO,eAAe,SAAS;AACtC,WAAA,MAAM,aAAa,MAAM,UAAU;AAAA,EAAA;AAGhD;AAEA,SAAS,kBAAkB,WAAgB;AACzC,SACE,OAAO,cAAc,YACrB,OAAO,UAAU,aAAa,YAC9B,CAAC,cAAc,mBAAmB,EAAE,SAAS,UAAU,SAAS,WAAW;AAE/E;AAEO,SAAS,SAAgC,SAA8B;AAE5E,QAAM,kBAA+C;AAAA,IACnD,OAAO,CAAC;AAAA;AAAA,IACR,eAAe,MAAM;AAAA,IAAC;AAAA;AAAA,IACtB,qBAAqB;AAAA,IACrB,GAAG;AAAA,EAAA;AAIL,QAAM,CAAC,QAAQ,IAAI,MAAM,SAAS,OAAO;AAAA,IACvC,SAAS,aAAoB,eAAe;AAAA,EAC5C,EAAA;AAGI,QAAA,CAAC,OAAO,QAAQ,IAAI,MAAM,SAAS,MAAM,SAAS,QAAQ,YAAY;AAInE,WAAA,QAAQ,WAAW,CAAS,UAAA;AAAA,IACnC,GAAG;AAAA,IACH,GAAG;AAAA,IACH,OAAO;AAAA,MACL,GAAG;AAAA,MACH,GAAG,QAAQ;AAAA,IACb;AAAA;AAAA;AAAA,IAGA,eAAe,CAAW,YAAA;;AACxB,eAAS,OAAO;AAChB,oBAAQ,kBAAR,iCAAwB;AAAA,IAC1B;AAAA,EACA,EAAA;AAEF,SAAO,SAAS;AAClB;"}

package/src/index.tsx

@@ -1,92 +0,0 @@
-import * as React from 'react'
-export * from '@tanstack/table-core'
-
-import {
-  TableOptions,
-  TableOptionsResolved,
-  RowData,
-  _createTable,
-} from '@tanstack/table-core'
-
-export type Renderable<TProps> = React.ReactNode | React.ComponentType<TProps>
-
-//
-
-/**
- * If rendering headers, cells, or footers with custom markup, use flexRender instead of `cell.getValue()` or `cell.renderValue()`.
- */
-export function flexRender<TProps extends object>(
-  Comp: Renderable<TProps>,
-  props: TProps
-): React.ReactNode | JSX.Element {
-  return !Comp ? null : isReactComponent<TProps>(Comp) ? (
-    <Comp {...props} />
-  ) : (
-    Comp
-  )
-}
-
-function isReactComponent<TProps>(
-  component: unknown
-): component is React.ComponentType<TProps> {
-  return (
-    isClassComponent(component) ||
-    typeof component === 'function' ||
-    isExoticComponent(component)
-  )
-}
-
-function isClassComponent(component: any) {
-  return (
-    typeof component === 'function' &&
-    (() => {
-      const proto = Object.getPrototypeOf(component)
-      return proto.prototype && proto.prototype.isReactComponent
-    })()
-  )
-}
-
-function isExoticComponent(component: any) {
-  return (
-    typeof component === 'object' &&
-    typeof component.$$typeof === 'symbol' &&
-    ['react.memo', 'react.forward_ref'].includes(component.$$typeof.description)
-  )
-}
-
-export function useTable<TData extends RowData>(options: TableOptions<TData>) {
-  // Compose in the generic options to the user options
-  const resolvedOptions: TableOptionsResolved<TData> = {
-    state: {}, // Dummy state
-    onStateChange: () => {}, // noop
-    renderFallbackValue: null,
-    ...options,
-  }
-
-  // Create a new table and store it in state
-  const [tableRef] = React.useState(() => ({
-    current: _createTable<TData>(resolvedOptions),
-  }))
-
-  // By default, manage table state here using the table's initial state
-  const [state, setState] = React.useState(() => tableRef.current.initialState)
-
-  // Compose the default state above with any user state. This will allow the user
-  // to only control a subset of the state if desired.
-  tableRef.current.setOptions(prev => ({
-    ...prev,
-    ...options,
-    state: {
-      ...state,
-      ...options.state,
-    },
-    // Similarly, we'll maintain both our internal state and any user-provided
-    // state.
-    onStateChange: updater => {
-      setState(updater)
-      options.onStateChange?.(updater)
-    },
-  }))
-
-  return tableRef.current
-}