@tanstack/react-table 9.0.0-beta.7 → 9.0.0-beta.9

package/dist/useTable.cjs

@@ -37,7 +37,7 @@ function useTable(tableOptions, selector) {
 		const tableInstance = (0, _tanstack_table_core.constructTable)({
 			...tableOptions,
 			features: {
-				coreReativityFeature: require_reactivity.reactReactivity(),
+				coreReactivityFeature: require_reactivity.reactReactivity(),
 				...tableOptions.features
 			}
 		});

package/dist/useTable.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useTable.cjs","names":["reactReactivity","Subscribe","FlexRender","shallow"],"sources":["../src/useTable.ts"],"sourcesContent":["'use client'\n\nimport { useMemo, useState } from 'react'\nimport { constructTable } from '@tanstack/table-core'\nimport { shallow, useSelector } from '@tanstack/react-store'\nimport { reactReactivity } from './reactivity'\nimport { FlexRender } from './FlexRender'\nimport { Subscribe } from './Subscribe'\nimport type { FlexRenderProps } from './FlexRender'\nimport type { SubscribePropsWithStore, SubscribeSource } from './Subscribe'\nimport type {\n  CellData,\n  RowData,\n  Table,\n  TableFeatures,\n  TableOptions,\n  TableState,\n} from '@tanstack/table-core'\nimport type { FunctionComponent, ReactNode } from 'react'\n\nexport type ReactTable<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TSelected = TableState<TFeatures>,\n> = Omit<Table<TFeatures, TData>, 'store'> & {\n  /**\n   * @deprecated Prefer `table.state` for render reads,\n   * `table.atoms.<slice>.get()` for slice snapshots, or\n   * `table.Subscribe` / `useSelector(table.store, selector)` for explicit\n   * subscriptions. `table.store.state` is a current-value snapshot and is easy\n   * to misuse in render code.\n   */\n  readonly store: Table<TFeatures, TData>['store']\n  /**\n   * A React HOC (Higher Order Component) that allows you to subscribe to the table state.\n   *\n   * This is useful for opting into state re-renders for specific parts of the table state.\n   *\n   * Pass `source` to subscribe to a single atom or store (e.g. `table.atoms.rowSelection`\n   * or `table.optionsStore`) instead of the full `table.store`.\n   *\n   * @example\n   * <table.Subscribe selector={(state) => ({ rowSelection: state.rowSelection })}>\n   *   {({ rowSelection }) => (\n   *     <tr key={row.id}>...</tr>\n   *   )}\n   * </table.Subscribe>\n   *\n   * @example\n   * <table.Subscribe source={table.atoms.rowSelection}>\n   *   {(rowSelection) => <div>...</div>}\n   * </table.Subscribe>\n   *\n   * @example\n   * <table.Subscribe source={table.atoms.rowSelection} selector={(s) => s?.[row.id]}>\n   *   {() => <tr key={row.id}>...</tr>}\n   * </table.Subscribe>\n   */\n  /**\n   * Overloads (not a single union) so `selector` callbacks get correct contextual\n   * types in JSX; a union of two `selector` signatures degrades to implicit `any`.\n   *\n   * Source **without** `selector` is a separate overload so children receive `TSourceValue`\n   * (identity projection). If `selector` were optional on one overload, `TSubSelected`\n   * would default to `unknown` instead of inferring from the source.\n   *\n   * The **source** overloads are listed first so `TSourceValue` is inferred from `source`.\n   */\n  Subscribe: {\n    <TSourceValue>(props: {\n      source: SubscribeSource<TSourceValue>\n      selector?: undefined\n      children: ((state: TSourceValue) => ReactNode) | ReactNode\n    }): ReturnType<FunctionComponent>\n    <TSourceValue, TSubSelected>(props: {\n      source: SubscribeSource<TSourceValue>\n      selector: (state: TSourceValue) => TSubSelected\n      children: ((state: TSubSelected) => ReactNode) | ReactNode\n    }): ReturnType<FunctionComponent>\n    <TSubSelected>(\n      props: Omit<SubscribePropsWithStore<TFeatures, TSubSelected>, 'source'>,\n    ): ReturnType<FunctionComponent>\n  }\n  /**\n   * A React component that renders headers, cells, or footers with custom markup.\n   * Use this utility component instead of manually calling flexRender.\n   *\n   * @example\n   * ```tsx\n   * <table.FlexRender cell={cell} />\n   * <table.FlexRender header={header} />\n   * <table.FlexRender footer={footer} />\n   * ```\n   *\n   * This replaces calling `flexRender` directly like this:\n   * ```tsx\n   * flexRender(cell.column.columnDef.cell, cell.getContext())\n   * flexRender(header.column.columnDef.header, header.getContext())\n   * flexRender(footer.column.columnDef.footer, footer.getContext())\n   * ```\n   */\n  FlexRender: <TValue extends CellData = CellData>(\n    props: FlexRenderProps<TFeatures, TData, TValue>,\n  ) => ReactNode\n  /**\n   * The selected state of the table. This state may not match the structure of\n   * the full table state because it is selected by the selector function that\n   * you pass as the 2nd argument to `useTable`.\n   *\n   * @example\n   * const table = useTable(options, (state) => ({ globalFilter: state.globalFilter })) // only globalFilter is part of the selected state\n   *\n   * console.log(table.state.globalFilter)\n   */\n  readonly state: Readonly<TSelected>\n}\n\n/**\n * Creates a React table instance backed by TanStack Store atoms.\n *\n * The optional selector projects from `table.store`; the selected value is\n * exposed on `table.state` and compared shallowly for React re-renders. Omit\n * the selector to subscribe to every registered table state slice, or pass a\n * narrower selector and use `table.Subscribe` lower in the tree for targeted\n * subscriptions.\n *\n * @example\n * ```tsx\n * const table = useTable(\n *   {\n *     features,\n *     rowModels: {},\n *     columns,\n *     data,\n *   },\n *   (state) => ({ pagination: state.pagination }),\n * )\n *\n * table.state.pagination\n * ```\n */\nexport function useTable<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TSelected = TableState<TFeatures>,\n>(\n  tableOptions: TableOptions<TFeatures, TData>,\n  selector?: (state: TableState<TFeatures>) => TSelected,\n): ReactTable<TFeatures, TData, TSelected> {\n  const [table] = useState(() => {\n    const tableInstance = constructTable({\n      ...tableOptions,\n      features: {\n        coreReativityFeature: reactReactivity(),\n        ...tableOptions.features,\n      },\n    }) as unknown as ReactTable<TFeatures, TData, TSelected>\n\n    tableInstance.Subscribe = ((props: any) => {\n      const source = props.source ?? tableInstance.store\n\n      return Subscribe({\n        ...props,\n        source,\n      })\n    }) as ReactTable<TFeatures, TData, TSelected>['Subscribe']\n\n    tableInstance.FlexRender = FlexRender\n\n    return tableInstance\n  })\n\n  // sync options on every render\n  table.setOptions((prev) => ({\n    ...prev,\n    ...tableOptions,\n  }))\n\n  const state = useSelector(table.store, selector, { compare: shallow })\n\n  // we know this is not the most efficient way to return the table,\n  // but it is required for the react compiler to work\n  return useMemo(\n    () => ({\n      ...table,\n      options: tableOptions,\n      state,\n    }),\n    [table, tableOptions, state],\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6IA,SAAgB,SAKd,cACA,UACyC;CACzC,MAAM,CAAC,mCAAwB;EAC7B,MAAM,yDAA+B;GACnC,GAAG;GACH,UAAU;IACR,sBAAsBA,mCAAgB;IACtC,GAAG,aAAa;GAClB;EACF,CAAC;EAED,cAAc,cAAc,UAAe;GACzC,MAAM,SAAS,MAAM,UAAU,cAAc;GAE7C,OAAOC,4BAAU;IACf,GAAG;IACH;GACF,CAAC;EACH;EAEA,cAAc,aAAaC;EAE3B,OAAO;CACT,CAAC;CAGD,MAAM,YAAY,UAAU;EAC1B,GAAG;EACH,GAAG;CACL,EAAE;CAEF,MAAM,+CAAoB,MAAM,OAAO,UAAU,EAAE,SAASC,8BAAQ,CAAC;CAIrE,iCACS;EACL,GAAG;EACH,SAAS;EACT;CACF,IACA;EAAC;EAAO;EAAc;CAAK,CAC7B;AACF"}
+{"version":3,"file":"useTable.cjs","names":["reactReactivity","Subscribe","FlexRender","shallow"],"sources":["../src/useTable.ts"],"sourcesContent":["'use client'\n\nimport { useMemo, useState } from 'react'\nimport { constructTable } from '@tanstack/table-core'\nimport { shallow, useSelector } from '@tanstack/react-store'\nimport { reactReactivity } from './reactivity'\nimport { FlexRender } from './FlexRender'\nimport { Subscribe } from './Subscribe'\nimport type { FlexRenderProps } from './FlexRender'\nimport type { SubscribePropsWithStore, SubscribeSource } from './Subscribe'\nimport type {\n  CellData,\n  RowData,\n  Table,\n  TableFeatures,\n  TableOptions,\n  TableState,\n} from '@tanstack/table-core'\nimport type { FunctionComponent, ReactNode } from 'react'\n\nexport type ReactTable<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TSelected = TableState<TFeatures>,\n> = Omit<Table<TFeatures, TData>, 'store'> & {\n  /**\n   * @deprecated Prefer `table.state` for render reads,\n   * `table.atoms.<slice>.get()` for slice snapshots, or\n   * `table.Subscribe` / `useSelector(table.store, selector)` for explicit\n   * subscriptions. `table.store.state` is a current-value snapshot and is easy\n   * to misuse in render code.\n   */\n  readonly store: Table<TFeatures, TData>['store']\n  /**\n   * A React HOC (Higher Order Component) that allows you to subscribe to the table state.\n   *\n   * This is useful for opting into state re-renders for specific parts of the table state.\n   *\n   * Pass `source` to subscribe to a single atom or store (e.g. `table.atoms.rowSelection`\n   * or `table.optionsStore`) instead of the full `table.store`.\n   *\n   * @example\n   * <table.Subscribe selector={(state) => ({ rowSelection: state.rowSelection })}>\n   *   {({ rowSelection }) => (\n   *     <tr key={row.id}>...</tr>\n   *   )}\n   * </table.Subscribe>\n   *\n   * @example\n   * <table.Subscribe source={table.atoms.rowSelection}>\n   *   {(rowSelection) => <div>...</div>}\n   * </table.Subscribe>\n   *\n   * @example\n   * <table.Subscribe source={table.atoms.rowSelection} selector={(s) => s?.[row.id]}>\n   *   {() => <tr key={row.id}>...</tr>}\n   * </table.Subscribe>\n   */\n  /**\n   * Overloads (not a single union) so `selector` callbacks get correct contextual\n   * types in JSX; a union of two `selector` signatures degrades to implicit `any`.\n   *\n   * Source **without** `selector` is a separate overload so children receive `TSourceValue`\n   * (identity projection). If `selector` were optional on one overload, `TSubSelected`\n   * would default to `unknown` instead of inferring from the source.\n   *\n   * The **source** overloads are listed first so `TSourceValue` is inferred from `source`.\n   */\n  Subscribe: {\n    <TSourceValue>(props: {\n      source: SubscribeSource<TSourceValue>\n      selector?: undefined\n      children: ((state: TSourceValue) => ReactNode) | ReactNode\n    }): ReturnType<FunctionComponent>\n    <TSourceValue, TSubSelected>(props: {\n      source: SubscribeSource<TSourceValue>\n      selector: (state: TSourceValue) => TSubSelected\n      children: ((state: TSubSelected) => ReactNode) | ReactNode\n    }): ReturnType<FunctionComponent>\n    <TSubSelected>(\n      props: Omit<SubscribePropsWithStore<TFeatures, TSubSelected>, 'source'>,\n    ): ReturnType<FunctionComponent>\n  }\n  /**\n   * A React component that renders headers, cells, or footers with custom markup.\n   * Use this utility component instead of manually calling flexRender.\n   *\n   * @example\n   * ```tsx\n   * <table.FlexRender cell={cell} />\n   * <table.FlexRender header={header} />\n   * <table.FlexRender footer={footer} />\n   * ```\n   *\n   * This replaces calling `flexRender` directly like this:\n   * ```tsx\n   * flexRender(cell.column.columnDef.cell, cell.getContext())\n   * flexRender(header.column.columnDef.header, header.getContext())\n   * flexRender(footer.column.columnDef.footer, footer.getContext())\n   * ```\n   */\n  FlexRender: <TValue extends CellData = CellData>(\n    props: FlexRenderProps<TFeatures, TData, TValue>,\n  ) => ReactNode\n  /**\n   * The selected state of the table. This state may not match the structure of\n   * the full table state because it is selected by the selector function that\n   * you pass as the 2nd argument to `useTable`.\n   *\n   * @example\n   * const table = useTable(options, (state) => ({ globalFilter: state.globalFilter })) // only globalFilter is part of the selected state\n   *\n   * console.log(table.state.globalFilter)\n   */\n  readonly state: Readonly<TSelected>\n}\n\n/**\n * Creates a React table instance backed by TanStack Store atoms.\n *\n * The optional selector projects from `table.store`; the selected value is\n * exposed on `table.state` and compared shallowly for React re-renders. Omit\n * the selector to subscribe to every registered table state slice, or pass a\n * narrower selector and use `table.Subscribe` lower in the tree for targeted\n * subscriptions.\n *\n * @example\n * ```tsx\n * const table = useTable(\n *   {\n *     features,\n *     rowModels: {},\n *     columns,\n *     data,\n *   },\n *   (state) => ({ pagination: state.pagination }),\n * )\n *\n * table.state.pagination\n * ```\n */\nexport function useTable<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TSelected = TableState<TFeatures>,\n>(\n  tableOptions: TableOptions<TFeatures, TData>,\n  selector?: (state: TableState<TFeatures>) => TSelected,\n): ReactTable<TFeatures, TData, TSelected> {\n  const [table] = useState(() => {\n    const tableInstance = constructTable({\n      ...tableOptions,\n      features: {\n        coreReactivityFeature: reactReactivity(),\n        ...tableOptions.features,\n      },\n    }) as unknown as ReactTable<TFeatures, TData, TSelected>\n\n    tableInstance.Subscribe = ((props: any) => {\n      const source = props.source ?? tableInstance.store\n\n      return Subscribe({\n        ...props,\n        source,\n      })\n    }) as ReactTable<TFeatures, TData, TSelected>['Subscribe']\n\n    tableInstance.FlexRender = FlexRender\n\n    return tableInstance\n  })\n\n  // sync options on every render\n  table.setOptions((prev) => ({\n    ...prev,\n    ...tableOptions,\n  }))\n\n  const state = useSelector(table.store, selector, { compare: shallow })\n\n  // we know this is not the most efficient way to return the table,\n  // but it is required for the react compiler to work\n  return useMemo(\n    () => ({\n      ...table,\n      options: tableOptions,\n      state,\n    }),\n    [table, tableOptions, state],\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6IA,SAAgB,SAKd,cACA,UACyC;CACzC,MAAM,CAAC,mCAAwB;EAC7B,MAAM,yDAA+B;GACnC,GAAG;GACH,UAAU;IACR,uBAAuBA,mCAAgB;IACvC,GAAG,aAAa;GAClB;EACF,CAAC;EAED,cAAc,cAAc,UAAe;GACzC,MAAM,SAAS,MAAM,UAAU,cAAc;GAE7C,OAAOC,4BAAU;IACf,GAAG;IACH;GACF,CAAC;EACH;EAEA,cAAc,aAAaC;EAE3B,OAAO;CACT,CAAC;CAGD,MAAM,YAAY,UAAU;EAC1B,GAAG;EACH,GAAG;CACL,EAAE;CAEF,MAAM,+CAAoB,MAAM,OAAO,UAAU,EAAE,SAASC,8BAAQ,CAAC;CAIrE,iCACS;EACL,GAAG;EACH,SAAS;EACT;CACF,IACA;EAAC;EAAO;EAAc;CAAK,CAC7B;AACF"}

package/dist/useTable.js

@@ -37,7 +37,7 @@ function useTable(tableOptions, selector) {
 		const tableInstance = constructTable({
 			...tableOptions,
 			features: {
-				coreReativityFeature: reactReactivity(),
+				coreReactivityFeature: reactReactivity(),
 				...tableOptions.features
 			}
 		});

package/dist/useTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTable.js","names":[],"sources":["../src/useTable.ts"],"sourcesContent":["'use client'\n\nimport { useMemo, useState } from 'react'\nimport { constructTable } from '@tanstack/table-core'\nimport { shallow, useSelector } from '@tanstack/react-store'\nimport { reactReactivity } from './reactivity'\nimport { FlexRender } from './FlexRender'\nimport { Subscribe } from './Subscribe'\nimport type { FlexRenderProps } from './FlexRender'\nimport type { SubscribePropsWithStore, SubscribeSource } from './Subscribe'\nimport type {\n  CellData,\n  RowData,\n  Table,\n  TableFeatures,\n  TableOptions,\n  TableState,\n} from '@tanstack/table-core'\nimport type { FunctionComponent, ReactNode } from 'react'\n\nexport type ReactTable<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TSelected = TableState<TFeatures>,\n> = Omit<Table<TFeatures, TData>, 'store'> & {\n  /**\n   * @deprecated Prefer `table.state` for render reads,\n   * `table.atoms.<slice>.get()` for slice snapshots, or\n   * `table.Subscribe` / `useSelector(table.store, selector)` for explicit\n   * subscriptions. `table.store.state` is a current-value snapshot and is easy\n   * to misuse in render code.\n   */\n  readonly store: Table<TFeatures, TData>['store']\n  /**\n   * A React HOC (Higher Order Component) that allows you to subscribe to the table state.\n   *\n   * This is useful for opting into state re-renders for specific parts of the table state.\n   *\n   * Pass `source` to subscribe to a single atom or store (e.g. `table.atoms.rowSelection`\n   * or `table.optionsStore`) instead of the full `table.store`.\n   *\n   * @example\n   * <table.Subscribe selector={(state) => ({ rowSelection: state.rowSelection })}>\n   *   {({ rowSelection }) => (\n   *     <tr key={row.id}>...</tr>\n   *   )}\n   * </table.Subscribe>\n   *\n   * @example\n   * <table.Subscribe source={table.atoms.rowSelection}>\n   *   {(rowSelection) => <div>...</div>}\n   * </table.Subscribe>\n   *\n   * @example\n   * <table.Subscribe source={table.atoms.rowSelection} selector={(s) => s?.[row.id]}>\n   *   {() => <tr key={row.id}>...</tr>}\n   * </table.Subscribe>\n   */\n  /**\n   * Overloads (not a single union) so `selector` callbacks get correct contextual\n   * types in JSX; a union of two `selector` signatures degrades to implicit `any`.\n   *\n   * Source **without** `selector` is a separate overload so children receive `TSourceValue`\n   * (identity projection). If `selector` were optional on one overload, `TSubSelected`\n   * would default to `unknown` instead of inferring from the source.\n   *\n   * The **source** overloads are listed first so `TSourceValue` is inferred from `source`.\n   */\n  Subscribe: {\n    <TSourceValue>(props: {\n      source: SubscribeSource<TSourceValue>\n      selector?: undefined\n      children: ((state: TSourceValue) => ReactNode) | ReactNode\n    }): ReturnType<FunctionComponent>\n    <TSourceValue, TSubSelected>(props: {\n      source: SubscribeSource<TSourceValue>\n      selector: (state: TSourceValue) => TSubSelected\n      children: ((state: TSubSelected) => ReactNode) | ReactNode\n    }): ReturnType<FunctionComponent>\n    <TSubSelected>(\n      props: Omit<SubscribePropsWithStore<TFeatures, TSubSelected>, 'source'>,\n    ): ReturnType<FunctionComponent>\n  }\n  /**\n   * A React component that renders headers, cells, or footers with custom markup.\n   * Use this utility component instead of manually calling flexRender.\n   *\n   * @example\n   * ```tsx\n   * <table.FlexRender cell={cell} />\n   * <table.FlexRender header={header} />\n   * <table.FlexRender footer={footer} />\n   * ```\n   *\n   * This replaces calling `flexRender` directly like this:\n   * ```tsx\n   * flexRender(cell.column.columnDef.cell, cell.getContext())\n   * flexRender(header.column.columnDef.header, header.getContext())\n   * flexRender(footer.column.columnDef.footer, footer.getContext())\n   * ```\n   */\n  FlexRender: <TValue extends CellData = CellData>(\n    props: FlexRenderProps<TFeatures, TData, TValue>,\n  ) => ReactNode\n  /**\n   * The selected state of the table. This state may not match the structure of\n   * the full table state because it is selected by the selector function that\n   * you pass as the 2nd argument to `useTable`.\n   *\n   * @example\n   * const table = useTable(options, (state) => ({ globalFilter: state.globalFilter })) // only globalFilter is part of the selected state\n   *\n   * console.log(table.state.globalFilter)\n   */\n  readonly state: Readonly<TSelected>\n}\n\n/**\n * Creates a React table instance backed by TanStack Store atoms.\n *\n * The optional selector projects from `table.store`; the selected value is\n * exposed on `table.state` and compared shallowly for React re-renders. Omit\n * the selector to subscribe to every registered table state slice, or pass a\n * narrower selector and use `table.Subscribe` lower in the tree for targeted\n * subscriptions.\n *\n * @example\n * ```tsx\n * const table = useTable(\n *   {\n *     features,\n *     rowModels: {},\n *     columns,\n *     data,\n *   },\n *   (state) => ({ pagination: state.pagination }),\n * )\n *\n * table.state.pagination\n * ```\n */\nexport function useTable<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TSelected = TableState<TFeatures>,\n>(\n  tableOptions: TableOptions<TFeatures, TData>,\n  selector?: (state: TableState<TFeatures>) => TSelected,\n): ReactTable<TFeatures, TData, TSelected> {\n  const [table] = useState(() => {\n    const tableInstance = constructTable({\n      ...tableOptions,\n      features: {\n        coreReativityFeature: reactReactivity(),\n        ...tableOptions.features,\n      },\n    }) as unknown as ReactTable<TFeatures, TData, TSelected>\n\n    tableInstance.Subscribe = ((props: any) => {\n      const source = props.source ?? tableInstance.store\n\n      return Subscribe({\n        ...props,\n        source,\n      })\n    }) as ReactTable<TFeatures, TData, TSelected>['Subscribe']\n\n    tableInstance.FlexRender = FlexRender\n\n    return tableInstance\n  })\n\n  // sync options on every render\n  table.setOptions((prev) => ({\n    ...prev,\n    ...tableOptions,\n  }))\n\n  const state = useSelector(table.store, selector, { compare: shallow })\n\n  // we know this is not the most efficient way to return the table,\n  // but it is required for the react compiler to work\n  return useMemo(\n    () => ({\n      ...table,\n      options: tableOptions,\n      state,\n    }),\n    [table, tableOptions, state],\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6IA,SAAgB,SAKd,cACA,UACyC;CACzC,MAAM,CAAC,SAAS,eAAe;EAC7B,MAAM,gBAAgB,eAAe;GACnC,GAAG;GACH,UAAU;IACR,sBAAsB,gBAAgB;IACtC,GAAG,aAAa;GAClB;EACF,CAAC;EAED,cAAc,cAAc,UAAe;GACzC,MAAM,SAAS,MAAM,UAAU,cAAc;GAE7C,OAAO,UAAU;IACf,GAAG;IACH;GACF,CAAC;EACH;EAEA,cAAc,aAAa;EAE3B,OAAO;CACT,CAAC;CAGD,MAAM,YAAY,UAAU;EAC1B,GAAG;EACH,GAAG;CACL,EAAE;CAEF,MAAM,QAAQ,YAAY,MAAM,OAAO,UAAU,EAAE,SAAS,QAAQ,CAAC;CAIrE,OAAO,eACE;EACL,GAAG;EACH,SAAS;EACT;CACF,IACA;EAAC;EAAO;EAAc;CAAK,CAC7B;AACF"}
+{"version":3,"file":"useTable.js","names":[],"sources":["../src/useTable.ts"],"sourcesContent":["'use client'\n\nimport { useMemo, useState } from 'react'\nimport { constructTable } from '@tanstack/table-core'\nimport { shallow, useSelector } from '@tanstack/react-store'\nimport { reactReactivity } from './reactivity'\nimport { FlexRender } from './FlexRender'\nimport { Subscribe } from './Subscribe'\nimport type { FlexRenderProps } from './FlexRender'\nimport type { SubscribePropsWithStore, SubscribeSource } from './Subscribe'\nimport type {\n  CellData,\n  RowData,\n  Table,\n  TableFeatures,\n  TableOptions,\n  TableState,\n} from '@tanstack/table-core'\nimport type { FunctionComponent, ReactNode } from 'react'\n\nexport type ReactTable<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TSelected = TableState<TFeatures>,\n> = Omit<Table<TFeatures, TData>, 'store'> & {\n  /**\n   * @deprecated Prefer `table.state` for render reads,\n   * `table.atoms.<slice>.get()` for slice snapshots, or\n   * `table.Subscribe` / `useSelector(table.store, selector)` for explicit\n   * subscriptions. `table.store.state` is a current-value snapshot and is easy\n   * to misuse in render code.\n   */\n  readonly store: Table<TFeatures, TData>['store']\n  /**\n   * A React HOC (Higher Order Component) that allows you to subscribe to the table state.\n   *\n   * This is useful for opting into state re-renders for specific parts of the table state.\n   *\n   * Pass `source` to subscribe to a single atom or store (e.g. `table.atoms.rowSelection`\n   * or `table.optionsStore`) instead of the full `table.store`.\n   *\n   * @example\n   * <table.Subscribe selector={(state) => ({ rowSelection: state.rowSelection })}>\n   *   {({ rowSelection }) => (\n   *     <tr key={row.id}>...</tr>\n   *   )}\n   * </table.Subscribe>\n   *\n   * @example\n   * <table.Subscribe source={table.atoms.rowSelection}>\n   *   {(rowSelection) => <div>...</div>}\n   * </table.Subscribe>\n   *\n   * @example\n   * <table.Subscribe source={table.atoms.rowSelection} selector={(s) => s?.[row.id]}>\n   *   {() => <tr key={row.id}>...</tr>}\n   * </table.Subscribe>\n   */\n  /**\n   * Overloads (not a single union) so `selector` callbacks get correct contextual\n   * types in JSX; a union of two `selector` signatures degrades to implicit `any`.\n   *\n   * Source **without** `selector` is a separate overload so children receive `TSourceValue`\n   * (identity projection). If `selector` were optional on one overload, `TSubSelected`\n   * would default to `unknown` instead of inferring from the source.\n   *\n   * The **source** overloads are listed first so `TSourceValue` is inferred from `source`.\n   */\n  Subscribe: {\n    <TSourceValue>(props: {\n      source: SubscribeSource<TSourceValue>\n      selector?: undefined\n      children: ((state: TSourceValue) => ReactNode) | ReactNode\n    }): ReturnType<FunctionComponent>\n    <TSourceValue, TSubSelected>(props: {\n      source: SubscribeSource<TSourceValue>\n      selector: (state: TSourceValue) => TSubSelected\n      children: ((state: TSubSelected) => ReactNode) | ReactNode\n    }): ReturnType<FunctionComponent>\n    <TSubSelected>(\n      props: Omit<SubscribePropsWithStore<TFeatures, TSubSelected>, 'source'>,\n    ): ReturnType<FunctionComponent>\n  }\n  /**\n   * A React component that renders headers, cells, or footers with custom markup.\n   * Use this utility component instead of manually calling flexRender.\n   *\n   * @example\n   * ```tsx\n   * <table.FlexRender cell={cell} />\n   * <table.FlexRender header={header} />\n   * <table.FlexRender footer={footer} />\n   * ```\n   *\n   * This replaces calling `flexRender` directly like this:\n   * ```tsx\n   * flexRender(cell.column.columnDef.cell, cell.getContext())\n   * flexRender(header.column.columnDef.header, header.getContext())\n   * flexRender(footer.column.columnDef.footer, footer.getContext())\n   * ```\n   */\n  FlexRender: <TValue extends CellData = CellData>(\n    props: FlexRenderProps<TFeatures, TData, TValue>,\n  ) => ReactNode\n  /**\n   * The selected state of the table. This state may not match the structure of\n   * the full table state because it is selected by the selector function that\n   * you pass as the 2nd argument to `useTable`.\n   *\n   * @example\n   * const table = useTable(options, (state) => ({ globalFilter: state.globalFilter })) // only globalFilter is part of the selected state\n   *\n   * console.log(table.state.globalFilter)\n   */\n  readonly state: Readonly<TSelected>\n}\n\n/**\n * Creates a React table instance backed by TanStack Store atoms.\n *\n * The optional selector projects from `table.store`; the selected value is\n * exposed on `table.state` and compared shallowly for React re-renders. Omit\n * the selector to subscribe to every registered table state slice, or pass a\n * narrower selector and use `table.Subscribe` lower in the tree for targeted\n * subscriptions.\n *\n * @example\n * ```tsx\n * const table = useTable(\n *   {\n *     features,\n *     rowModels: {},\n *     columns,\n *     data,\n *   },\n *   (state) => ({ pagination: state.pagination }),\n * )\n *\n * table.state.pagination\n * ```\n */\nexport function useTable<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TSelected = TableState<TFeatures>,\n>(\n  tableOptions: TableOptions<TFeatures, TData>,\n  selector?: (state: TableState<TFeatures>) => TSelected,\n): ReactTable<TFeatures, TData, TSelected> {\n  const [table] = useState(() => {\n    const tableInstance = constructTable({\n      ...tableOptions,\n      features: {\n        coreReactivityFeature: reactReactivity(),\n        ...tableOptions.features,\n      },\n    }) as unknown as ReactTable<TFeatures, TData, TSelected>\n\n    tableInstance.Subscribe = ((props: any) => {\n      const source = props.source ?? tableInstance.store\n\n      return Subscribe({\n        ...props,\n        source,\n      })\n    }) as ReactTable<TFeatures, TData, TSelected>['Subscribe']\n\n    tableInstance.FlexRender = FlexRender\n\n    return tableInstance\n  })\n\n  // sync options on every render\n  table.setOptions((prev) => ({\n    ...prev,\n    ...tableOptions,\n  }))\n\n  const state = useSelector(table.store, selector, { compare: shallow })\n\n  // we know this is not the most efficient way to return the table,\n  // but it is required for the react compiler to work\n  return useMemo(\n    () => ({\n      ...table,\n      options: tableOptions,\n      state,\n    }),\n    [table, tableOptions, state],\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6IA,SAAgB,SAKd,cACA,UACyC;CACzC,MAAM,CAAC,SAAS,eAAe;EAC7B,MAAM,gBAAgB,eAAe;GACnC,GAAG;GACH,UAAU;IACR,uBAAuB,gBAAgB;IACvC,GAAG,aAAa;GAClB;EACF,CAAC;EAED,cAAc,cAAc,UAAe;GACzC,MAAM,SAAS,MAAM,UAAU,cAAc;GAE7C,OAAO,UAAU;IACf,GAAG;IACH;GACF,CAAC;EACH;EAEA,cAAc,aAAa;EAE3B,OAAO;CACT,CAAC;CAGD,MAAM,YAAY,UAAU;EAC1B,GAAG;EACH,GAAG;CACL,EAAE;CAEF,MAAM,QAAQ,YAAY,MAAM,OAAO,UAAU,EAAE,SAAS,QAAQ,CAAC;CAIrE,OAAO,eACE;EACL,GAAG;EACH,SAAS;EACT;CACF,IACA;EAAC;EAAO;EAAc;CAAK,CAC7B;AACF"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/react-table",
-  "version": "9.0.0-beta.7",
+  "version": "9.0.0-beta.9",
   "description": "Headless UI for building powerful tables & datagrids for React.",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -55,7 +55,7 @@
   ],
   "dependencies": {
     "@tanstack/react-store": "^0.11.0",
-    "@tanstack/table-core": "9.0.0-beta.7"
+    "@tanstack/table-core": "9.0.0-beta.9"
   },
   "devDependencies": {
     "@eslint-react/eslint-plugin": "^5.8.16",

package/src/useTable.ts

@@ -151,7 +151,7 @@ export function useTable<
     const tableInstance = constructTable({
       ...tableOptions,
       features: {
-        coreReativityFeature: reactReactivity(),
+        coreReactivityFeature: reactReactivity(),
         ...tableOptions.features,
       },
     }) as unknown as ReactTable<TFeatures, TData, TSelected>