@tanstack/preact-table 9.0.0-alpha.40 → 9.0.0-alpha.42

package/dist/useTable.cjs

@@ -3,11 +3,18 @@ const require_Subscribe = require('./Subscribe.cjs');
 let _tanstack_table_core = require("@tanstack/table-core");
 let _tanstack_preact_store = require("@tanstack/preact-store");
 let preact_hooks = require("preact/hooks");
+let _tanstack_table_core_reactivity = require("@tanstack/table-core/reactivity");
 
 //#region src/useTable.ts
 function useTable(tableOptions, selector = () => ({})) {
 	const [table] = (0, preact_hooks.useState)(() => {
-		const tableInstance = (0, _tanstack_table_core.constructTable)(tableOptions);
+		const tableInstance = (0, _tanstack_table_core.constructTable)({
+			...tableOptions,
+			_features: {
+				coreReativityFeature: (0, _tanstack_table_core_reactivity.constructReactivityBindings)(),
+				...tableOptions._features
+			}
+		});
 		tableInstance.Subscribe = ((props) => {
 			return require_Subscribe.Subscribe({
 				...props,
@@ -17,20 +24,23 @@ function useTable(tableOptions, selector = () => ({})) {
 		tableInstance.FlexRender = require_FlexRender.FlexRender;
 		return tableInstance;
 	});
-	table.setOptions((prev) => ({
-		...prev,
-		...tableOptions
-	}));
-	const selectorWithDataAndColumns = (state) => ({
-		columns: tableOptions.columns,
-		data: tableOptions.data,
-		...selector(state)
-	});
-	const state = (0, _tanstack_preact_store.useSelector)(table.store, selectorWithDataAndColumns, { compare: _tanstack_preact_store.shallow });
+	(0, preact_hooks.useEffect)(() => {
+		table.setOptions((prev) => ({
+			...prev,
+			...tableOptions
+		}));
+	}, [table, tableOptions]);
+	const state = (0, _tanstack_preact_store.useSelector)(table.store, selector, { compare: _tanstack_preact_store.shallow });
+	const options = (0, _tanstack_preact_store.useSelector)(table.optionsStore, (options) => options, { compare: _tanstack_preact_store.shallow });
 	return (0, preact_hooks.useMemo)(() => ({
 		...table,
+		options,
+		state
+	}), [
+		table,
+		options,
 		state
-	}), [state, table]);
+	]);
 }
 
 //#endregion

package/dist/useTable.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useTable.cjs","names":["Subscribe","FlexRender","shallow"],"sources":["../src/useTable.ts"],"sourcesContent":["import { useMemo, useState } from 'preact/hooks'\nimport { constructTable } from '@tanstack/table-core'\nimport { shallow, useSelector } from '@tanstack/preact-store'\nimport { FlexRender } from './FlexRender'\nimport { Subscribe } from './Subscribe'\nimport type {\n  CellData,\n  RowData,\n  Table,\n  TableFeatures,\n  TableOptions,\n  TableState,\n} from '@tanstack/table-core'\nimport type { Atom, ReadonlyAtom } from '@tanstack/preact-store'\nimport type { ComponentChildren } from 'preact'\nimport type { FlexRenderProps } from './FlexRender'\nimport type { SubscribePropsWithStore } from './Subscribe'\n\nexport type PreactTable<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TSelected = {},\n> = Table<TFeatures, TData> & {\n  /**\n   * A Preact HOC (Higher Order Component) that allows you to subscribe to 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 (source first, then store) so JSX contextual typing works for both modes.\n   * Source without `selector` is separate so children infer `TSourceValue` (identity projection).\n   */\n  Subscribe: {\n    <TSourceValue>(props: {\n      source: Atom<TSourceValue> | ReadonlyAtom<TSourceValue>\n      selector?: undefined\n      children: ((state: TSourceValue) => ComponentChildren) | ComponentChildren\n    }): ComponentChildren\n    <TSourceValue, TSubSelected>(props: {\n      source: Atom<TSourceValue> | ReadonlyAtom<TSourceValue>\n      selector: (state: TSourceValue) => TSubSelected\n      children: ((state: TSubSelected) => ComponentChildren) | ComponentChildren\n    }): ComponentChildren\n    <TSubSelected>(\n      props: Omit<\n        SubscribePropsWithStore<TFeatures, TData, TSubSelected>,\n        'table'\n      >,\n    ): ComponentChildren\n  }\n  /**\n   * A Preact component that renders headers, cells, or footers with custom markup.\n   * Use this utility component instead of manually calling flexRender.\n   */\n  FlexRender: <TValue extends CellData = CellData>(\n    props: FlexRenderProps<TFeatures, TData, TValue>,\n  ) => ComponentChildren\n  /**\n   * The selected state of the table. This state may not match the structure of `table.store.state` because it is selected by the `selector` function that you pass as the 2nd argument to `useTable`.\n   */\n  readonly state: Readonly<TSelected> & {\n    columns: TableOptions<TFeatures, TData>['columns']\n    data: TableOptions<TFeatures, TData>['data']\n  }\n}\n\nexport function useTable<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TSelected = {},\n>(\n  tableOptions: TableOptions<TFeatures, TData>,\n  selector: (state: TableState<TFeatures>) => TSelected = () =>\n    ({}) as TSelected,\n): PreactTable<TFeatures, TData, TSelected> {\n  const [table] = useState(() => {\n    const tableInstance = constructTable(tableOptions) as PreactTable<\n      TFeatures,\n      TData,\n      TSelected\n    >\n\n    tableInstance.Subscribe = ((props: any) => {\n      return Subscribe({\n        ...props,\n        table: tableInstance,\n      })\n    }) as PreactTable<TFeatures, TData, TSelected>['Subscribe']\n\n    tableInstance.FlexRender = FlexRender\n\n    return tableInstance\n  })\n\n  // sync table options on every render\n  table.setOptions((prev) => ({\n    ...prev,\n    ...tableOptions,\n  }))\n\n  const selectorWithDataAndColumns = (state: TableState<TFeatures>) => ({\n    columns: tableOptions.columns,\n    data: tableOptions.data,\n    ...selector(state),\n  })\n\n  const state = useSelector(table.store, selectorWithDataAndColumns, {\n    compare: shallow,\n  })\n\n  return useMemo(\n    () => ({\n      ...table,\n      state,\n    }),\n    [state, table],\n  ) as PreactTable<TFeatures, TData, TSelected>\n}\n"],"mappings":";;;;;;;AAoFA,SAAgB,SAKd,cACA,kBACG,EAAE,GACqC;CAC1C,MAAM,CAAC,0CAAwB;EAC7B,MAAM,yDAA+B,aAAa;AAMlD,gBAAc,cAAc,UAAe;AACzC,UAAOA,4BAAU;IACf,GAAG;IACH,OAAO;IACR,CAAC;;AAGJ,gBAAc,aAAaC;AAE3B,SAAO;GACP;AAGF,OAAM,YAAY,UAAU;EAC1B,GAAG;EACH,GAAG;EACJ,EAAE;CAEH,MAAM,8BAA8B,WAAkC;EACpE,SAAS,aAAa;EACtB,MAAM,aAAa;EACnB,GAAG,SAAS,MAAM;EACnB;CAED,MAAM,gDAAoB,MAAM,OAAO,4BAA4B,EACjE,SAASC,gCACV,CAAC;AAEF,yCACS;EACL,GAAG;EACH;EACD,GACD,CAAC,OAAO,MAAM,CACf"}
+{"version":3,"file":"useTable.cjs","names":["Subscribe","FlexRender","shallow"],"sources":["../src/useTable.ts"],"sourcesContent":["import { useEffect, useMemo, useState } from 'preact/hooks'\nimport { constructTable } from '@tanstack/table-core'\nimport { shallow, useSelector } from '@tanstack/preact-store'\nimport { constructReactivityBindings } from '@tanstack/table-core/reactivity'\nimport { FlexRender } from './FlexRender'\nimport { Subscribe } from './Subscribe'\n// import { preactReactivity } from './reactivity'\nimport type {\n  CellData,\n  RowData,\n  Table,\n  TableFeatures,\n  TableOptions,\n  TableState,\n} from '@tanstack/table-core'\nimport type { Atom, ReadonlyAtom } from '@tanstack/preact-store'\nimport type { ComponentChildren } from 'preact'\nimport type { FlexRenderProps } from './FlexRender'\nimport type { SubscribePropsWithStore } from './Subscribe'\n\nexport type PreactTable<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TSelected = {},\n> = Table<TFeatures, TData> & {\n  /**\n   * A Preact HOC (Higher Order Component) that allows you to subscribe to 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 (source first, then store) so JSX contextual typing works for both modes.\n   * Source without `selector` is separate so children infer `TSourceValue` (identity projection).\n   */\n  Subscribe: {\n    <TSourceValue>(props: {\n      source: Atom<TSourceValue> | ReadonlyAtom<TSourceValue>\n      selector?: undefined\n      children: ((state: TSourceValue) => ComponentChildren) | ComponentChildren\n    }): ComponentChildren\n    <TSourceValue, TSubSelected>(props: {\n      source: Atom<TSourceValue> | ReadonlyAtom<TSourceValue>\n      selector: (state: TSourceValue) => TSubSelected\n      children: ((state: TSubSelected) => ComponentChildren) | ComponentChildren\n    }): ComponentChildren\n    <TSubSelected>(\n      props: Omit<\n        SubscribePropsWithStore<TFeatures, TData, TSubSelected>,\n        'table'\n      >,\n    ): ComponentChildren\n  }\n  /**\n   * A Preact component that renders headers, cells, or footers with custom markup.\n   * Use this utility component instead of manually calling flexRender.\n   */\n  FlexRender: <TValue extends CellData = CellData>(\n    props: FlexRenderProps<TFeatures, TData, TValue>,\n  ) => ComponentChildren\n  /**\n   * The selected state of the table. This state may not match the structure of `table.store.state` because it is selected by the `selector` function that you pass as the 2nd argument to `useTable`.\n   */\n  readonly state: Readonly<TSelected> & {\n    columns: TableOptions<TFeatures, TData>['columns']\n    data: TableOptions<TFeatures, TData>['data']\n  }\n}\n\nexport function useTable<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TSelected = {},\n>(\n  tableOptions: TableOptions<TFeatures, TData>,\n  selector: (state: TableState<TFeatures>) => TSelected = () =>\n    ({}) as TSelected,\n): PreactTable<TFeatures, TData, TSelected> {\n  const [table] = useState(() => {\n    const tableInstance = constructTable({\n      ...tableOptions,\n      _features: {\n        coreReativityFeature: constructReactivityBindings(), // preactReactivity() currently causes infinite re-renders\n        ...tableOptions._features,\n      },\n    }) as PreactTable<TFeatures, TData, TSelected>\n\n    tableInstance.Subscribe = ((props: any) => {\n      return Subscribe({\n        ...props,\n        table: tableInstance,\n      })\n    }) as PreactTable<TFeatures, TData, TSelected>['Subscribe']\n\n    tableInstance.FlexRender = FlexRender\n\n    return tableInstance\n  })\n\n  useEffect(() => {\n    table.setOptions((prev) => ({\n      ...prev,\n      ...tableOptions,\n    }))\n  }, [table, tableOptions])\n\n  const state = useSelector(table.store, selector, { compare: shallow })\n  const options = useSelector(table.optionsStore, (options) => options, {\n    compare: shallow,\n  })\n\n  return useMemo(\n    () => ({\n      ...table,\n      options,\n      state,\n    }),\n    [table, options, state],\n  ) as PreactTable<TFeatures, TData, TSelected>\n}\n"],"mappings":";;;;;;;;AAsFA,SAAgB,SAKd,cACA,kBACG,EAAE,GACqC;CAC1C,MAAM,CAAC,0CAAwB;EAC7B,MAAM,yDAA+B;GACnC,GAAG;GACH,WAAW;IACT,wFAAmD;IACnD,GAAG,aAAa;IACjB;GACF,CAAC;AAEF,gBAAc,cAAc,UAAe;AACzC,UAAOA,4BAAU;IACf,GAAG;IACH,OAAO;IACR,CAAC;;AAGJ,gBAAc,aAAaC;AAE3B,SAAO;GACP;AAEF,mCAAgB;AACd,QAAM,YAAY,UAAU;GAC1B,GAAG;GACH,GAAG;GACJ,EAAE;IACF,CAAC,OAAO,aAAa,CAAC;CAEzB,MAAM,gDAAoB,MAAM,OAAO,UAAU,EAAE,SAASC,gCAAS,CAAC;CACtE,MAAM,kDAAsB,MAAM,eAAe,YAAY,SAAS,EACpE,SAASA,gCACV,CAAC;AAEF,yCACS;EACL,GAAG;EACH;EACA;EACD,GACD;EAAC;EAAO;EAAS;EAAM,CACxB"}

package/dist/useTable.js

@@ -2,12 +2,19 @@ import { FlexRender } from "./FlexRender.js";
 import { Subscribe } from "./Subscribe.js";
 import { constructTable } from "@tanstack/table-core";
 import { shallow, useSelector } from "@tanstack/preact-store";
-import { useMemo, useState } from "preact/hooks";
+import { useEffect, useMemo, useState } from "preact/hooks";
+import { constructReactivityBindings } from "@tanstack/table-core/reactivity";
 
 //#region src/useTable.ts
 function useTable(tableOptions, selector = () => ({})) {
 	const [table] = useState(() => {
-		const tableInstance = constructTable(tableOptions);
+		const tableInstance = constructTable({
+			...tableOptions,
+			_features: {
+				coreReativityFeature: constructReactivityBindings(),
+				...tableOptions._features
+			}
+		});
 		tableInstance.Subscribe = ((props) => {
 			return Subscribe({
 				...props,
@@ -17,20 +24,23 @@ function useTable(tableOptions, selector = () => ({})) {
 		tableInstance.FlexRender = FlexRender;
 		return tableInstance;
 	});
-	table.setOptions((prev) => ({
-		...prev,
-		...tableOptions
-	}));
-	const selectorWithDataAndColumns = (state) => ({
-		columns: tableOptions.columns,
-		data: tableOptions.data,
-		...selector(state)
-	});
-	const state = useSelector(table.store, selectorWithDataAndColumns, { compare: shallow });
+	useEffect(() => {
+		table.setOptions((prev) => ({
+			...prev,
+			...tableOptions
+		}));
+	}, [table, tableOptions]);
+	const state = useSelector(table.store, selector, { compare: shallow });
+	const options = useSelector(table.optionsStore, (options) => options, { compare: shallow });
 	return useMemo(() => ({
 		...table,
+		options,
+		state
+	}), [
+		table,
+		options,
 		state
-	}), [state, table]);
+	]);
 }
 
 //#endregion

package/dist/useTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTable.js","names":[],"sources":["../src/useTable.ts"],"sourcesContent":["import { useMemo, useState } from 'preact/hooks'\nimport { constructTable } from '@tanstack/table-core'\nimport { shallow, useSelector } from '@tanstack/preact-store'\nimport { FlexRender } from './FlexRender'\nimport { Subscribe } from './Subscribe'\nimport type {\n  CellData,\n  RowData,\n  Table,\n  TableFeatures,\n  TableOptions,\n  TableState,\n} from '@tanstack/table-core'\nimport type { Atom, ReadonlyAtom } from '@tanstack/preact-store'\nimport type { ComponentChildren } from 'preact'\nimport type { FlexRenderProps } from './FlexRender'\nimport type { SubscribePropsWithStore } from './Subscribe'\n\nexport type PreactTable<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TSelected = {},\n> = Table<TFeatures, TData> & {\n  /**\n   * A Preact HOC (Higher Order Component) that allows you to subscribe to 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 (source first, then store) so JSX contextual typing works for both modes.\n   * Source without `selector` is separate so children infer `TSourceValue` (identity projection).\n   */\n  Subscribe: {\n    <TSourceValue>(props: {\n      source: Atom<TSourceValue> | ReadonlyAtom<TSourceValue>\n      selector?: undefined\n      children: ((state: TSourceValue) => ComponentChildren) | ComponentChildren\n    }): ComponentChildren\n    <TSourceValue, TSubSelected>(props: {\n      source: Atom<TSourceValue> | ReadonlyAtom<TSourceValue>\n      selector: (state: TSourceValue) => TSubSelected\n      children: ((state: TSubSelected) => ComponentChildren) | ComponentChildren\n    }): ComponentChildren\n    <TSubSelected>(\n      props: Omit<\n        SubscribePropsWithStore<TFeatures, TData, TSubSelected>,\n        'table'\n      >,\n    ): ComponentChildren\n  }\n  /**\n   * A Preact component that renders headers, cells, or footers with custom markup.\n   * Use this utility component instead of manually calling flexRender.\n   */\n  FlexRender: <TValue extends CellData = CellData>(\n    props: FlexRenderProps<TFeatures, TData, TValue>,\n  ) => ComponentChildren\n  /**\n   * The selected state of the table. This state may not match the structure of `table.store.state` because it is selected by the `selector` function that you pass as the 2nd argument to `useTable`.\n   */\n  readonly state: Readonly<TSelected> & {\n    columns: TableOptions<TFeatures, TData>['columns']\n    data: TableOptions<TFeatures, TData>['data']\n  }\n}\n\nexport function useTable<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TSelected = {},\n>(\n  tableOptions: TableOptions<TFeatures, TData>,\n  selector: (state: TableState<TFeatures>) => TSelected = () =>\n    ({}) as TSelected,\n): PreactTable<TFeatures, TData, TSelected> {\n  const [table] = useState(() => {\n    const tableInstance = constructTable(tableOptions) as PreactTable<\n      TFeatures,\n      TData,\n      TSelected\n    >\n\n    tableInstance.Subscribe = ((props: any) => {\n      return Subscribe({\n        ...props,\n        table: tableInstance,\n      })\n    }) as PreactTable<TFeatures, TData, TSelected>['Subscribe']\n\n    tableInstance.FlexRender = FlexRender\n\n    return tableInstance\n  })\n\n  // sync table options on every render\n  table.setOptions((prev) => ({\n    ...prev,\n    ...tableOptions,\n  }))\n\n  const selectorWithDataAndColumns = (state: TableState<TFeatures>) => ({\n    columns: tableOptions.columns,\n    data: tableOptions.data,\n    ...selector(state),\n  })\n\n  const state = useSelector(table.store, selectorWithDataAndColumns, {\n    compare: shallow,\n  })\n\n  return useMemo(\n    () => ({\n      ...table,\n      state,\n    }),\n    [state, table],\n  ) as PreactTable<TFeatures, TData, TSelected>\n}\n"],"mappings":";;;;;;;AAoFA,SAAgB,SAKd,cACA,kBACG,EAAE,GACqC;CAC1C,MAAM,CAAC,SAAS,eAAe;EAC7B,MAAM,gBAAgB,eAAe,aAAa;AAMlD,gBAAc,cAAc,UAAe;AACzC,UAAO,UAAU;IACf,GAAG;IACH,OAAO;IACR,CAAC;;AAGJ,gBAAc,aAAa;AAE3B,SAAO;GACP;AAGF,OAAM,YAAY,UAAU;EAC1B,GAAG;EACH,GAAG;EACJ,EAAE;CAEH,MAAM,8BAA8B,WAAkC;EACpE,SAAS,aAAa;EACtB,MAAM,aAAa;EACnB,GAAG,SAAS,MAAM;EACnB;CAED,MAAM,QAAQ,YAAY,MAAM,OAAO,4BAA4B,EACjE,SAAS,SACV,CAAC;AAEF,QAAO,eACE;EACL,GAAG;EACH;EACD,GACD,CAAC,OAAO,MAAM,CACf"}
+{"version":3,"file":"useTable.js","names":[],"sources":["../src/useTable.ts"],"sourcesContent":["import { useEffect, useMemo, useState } from 'preact/hooks'\nimport { constructTable } from '@tanstack/table-core'\nimport { shallow, useSelector } from '@tanstack/preact-store'\nimport { constructReactivityBindings } from '@tanstack/table-core/reactivity'\nimport { FlexRender } from './FlexRender'\nimport { Subscribe } from './Subscribe'\n// import { preactReactivity } from './reactivity'\nimport type {\n  CellData,\n  RowData,\n  Table,\n  TableFeatures,\n  TableOptions,\n  TableState,\n} from '@tanstack/table-core'\nimport type { Atom, ReadonlyAtom } from '@tanstack/preact-store'\nimport type { ComponentChildren } from 'preact'\nimport type { FlexRenderProps } from './FlexRender'\nimport type { SubscribePropsWithStore } from './Subscribe'\n\nexport type PreactTable<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TSelected = {},\n> = Table<TFeatures, TData> & {\n  /**\n   * A Preact HOC (Higher Order Component) that allows you to subscribe to 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 (source first, then store) so JSX contextual typing works for both modes.\n   * Source without `selector` is separate so children infer `TSourceValue` (identity projection).\n   */\n  Subscribe: {\n    <TSourceValue>(props: {\n      source: Atom<TSourceValue> | ReadonlyAtom<TSourceValue>\n      selector?: undefined\n      children: ((state: TSourceValue) => ComponentChildren) | ComponentChildren\n    }): ComponentChildren\n    <TSourceValue, TSubSelected>(props: {\n      source: Atom<TSourceValue> | ReadonlyAtom<TSourceValue>\n      selector: (state: TSourceValue) => TSubSelected\n      children: ((state: TSubSelected) => ComponentChildren) | ComponentChildren\n    }): ComponentChildren\n    <TSubSelected>(\n      props: Omit<\n        SubscribePropsWithStore<TFeatures, TData, TSubSelected>,\n        'table'\n      >,\n    ): ComponentChildren\n  }\n  /**\n   * A Preact component that renders headers, cells, or footers with custom markup.\n   * Use this utility component instead of manually calling flexRender.\n   */\n  FlexRender: <TValue extends CellData = CellData>(\n    props: FlexRenderProps<TFeatures, TData, TValue>,\n  ) => ComponentChildren\n  /**\n   * The selected state of the table. This state may not match the structure of `table.store.state` because it is selected by the `selector` function that you pass as the 2nd argument to `useTable`.\n   */\n  readonly state: Readonly<TSelected> & {\n    columns: TableOptions<TFeatures, TData>['columns']\n    data: TableOptions<TFeatures, TData>['data']\n  }\n}\n\nexport function useTable<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TSelected = {},\n>(\n  tableOptions: TableOptions<TFeatures, TData>,\n  selector: (state: TableState<TFeatures>) => TSelected = () =>\n    ({}) as TSelected,\n): PreactTable<TFeatures, TData, TSelected> {\n  const [table] = useState(() => {\n    const tableInstance = constructTable({\n      ...tableOptions,\n      _features: {\n        coreReativityFeature: constructReactivityBindings(), // preactReactivity() currently causes infinite re-renders\n        ...tableOptions._features,\n      },\n    }) as PreactTable<TFeatures, TData, TSelected>\n\n    tableInstance.Subscribe = ((props: any) => {\n      return Subscribe({\n        ...props,\n        table: tableInstance,\n      })\n    }) as PreactTable<TFeatures, TData, TSelected>['Subscribe']\n\n    tableInstance.FlexRender = FlexRender\n\n    return tableInstance\n  })\n\n  useEffect(() => {\n    table.setOptions((prev) => ({\n      ...prev,\n      ...tableOptions,\n    }))\n  }, [table, tableOptions])\n\n  const state = useSelector(table.store, selector, { compare: shallow })\n  const options = useSelector(table.optionsStore, (options) => options, {\n    compare: shallow,\n  })\n\n  return useMemo(\n    () => ({\n      ...table,\n      options,\n      state,\n    }),\n    [table, options, state],\n  ) as PreactTable<TFeatures, TData, TSelected>\n}\n"],"mappings":";;;;;;;;AAsFA,SAAgB,SAKd,cACA,kBACG,EAAE,GACqC;CAC1C,MAAM,CAAC,SAAS,eAAe;EAC7B,MAAM,gBAAgB,eAAe;GACnC,GAAG;GACH,WAAW;IACT,sBAAsB,6BAA6B;IACnD,GAAG,aAAa;IACjB;GACF,CAAC;AAEF,gBAAc,cAAc,UAAe;AACzC,UAAO,UAAU;IACf,GAAG;IACH,OAAO;IACR,CAAC;;AAGJ,gBAAc,aAAa;AAE3B,SAAO;GACP;AAEF,iBAAgB;AACd,QAAM,YAAY,UAAU;GAC1B,GAAG;GACH,GAAG;GACJ,EAAE;IACF,CAAC,OAAO,aAAa,CAAC;CAEzB,MAAM,QAAQ,YAAY,MAAM,OAAO,UAAU,EAAE,SAAS,SAAS,CAAC;CACtE,MAAM,UAAU,YAAY,MAAM,eAAe,YAAY,SAAS,EACpE,SAAS,SACV,CAAC;AAEF,QAAO,eACE;EACL,GAAG;EACH;EACA;EACD,GACD;EAAC;EAAO;EAAS;EAAM,CACxB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/preact-table",
-  "version": "9.0.0-alpha.40",
+  "version": "9.0.0-alpha.42",
   "description": "Headless UI for building powerful tables & datagrids for Preact.",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -48,8 +48,9 @@
     "src"
   ],
   "dependencies": {
+    "@preact/signals": "^2.9.0",
     "@tanstack/preact-store": "^0.13.0",
-    "@tanstack/table-core": "9.0.0-alpha.39"
+    "@tanstack/table-core": "9.0.0-alpha.42"
   },
   "devDependencies": {
     "@preact/preset-vite": "^2.10.5",

package/src/reactivity.ts

@@ -0,0 +1,63 @@
+// TOTO - re-explore preact signals for reactivity
+import { batch, computed, signal, untracked } from '@preact/signals'
+import type {
+  TableAtomOptions,
+  TableReactivityBindings,
+} from '@tanstack/table-core/reactivity'
+import type { Atom, Observer, ReadonlyAtom } from '@tanstack/preact-store'
+
+function observerToCallback<T>(
+  observerOrNext: Observer<T> | ((value: T) => void),
+): (value: T) => void {
+  return typeof observerOrNext === 'function'
+    ? observerOrNext
+    : (value) => observerOrNext.next?.(value)
+}
+
+function signalToReadonlyAtom<T>(source: {
+  value: T
+  subscribe: (observer: (value: T) => void) => () => void
+}): ReadonlyAtom<T> {
+  return Object.assign(source, {
+    get: () => source.value,
+    subscribe: ((observerOrNext: Observer<T> | ((value: T) => void)) => {
+      const unsubscribe = source.subscribe(observerToCallback(observerOrNext))
+      return { unsubscribe }
+    }) as ReadonlyAtom<T>['subscribe'],
+  })
+}
+
+function signalToWritableAtom<T>(source: {
+  value: T
+  subscribe: (observer: (value: T) => void) => () => void
+}): Atom<T> {
+  return Object.assign(source, {
+    set: (updater: T | ((prevVal: T) => T)) => {
+      source.value =
+        typeof updater === 'function'
+          ? (updater as (prevVal: T) => T)(source.value)
+          : updater
+    },
+    get: () => source.value,
+    subscribe: ((observerOrNext: Observer<T> | ((value: T) => void)) => {
+      const unsubscribe = source.subscribe(observerToCallback(observerOrNext))
+      return { unsubscribe }
+    }) as Atom<T>['subscribe'],
+  })
+}
+
+export function preactReactivity(): TableReactivityBindings {
+  return {
+    createReadonlyAtom: <T>(fn: () => T, _options?: TableAtomOptions<T>) => {
+      return signalToReadonlyAtom(computed(fn))
+    },
+    createWritableAtom: <T>(
+      value: T,
+      _options?: TableAtomOptions<T>,
+    ): Atom<T> => {
+      return signalToWritableAtom(signal(value))
+    },
+    untrack: untracked,
+    batch: batch,
+  }
+}

package/src/useTable.ts

@@ -1,8 +1,10 @@
-import { useMemo, useState } from 'preact/hooks'
+import { useEffect, useMemo, useState } from 'preact/hooks'
 import { constructTable } from '@tanstack/table-core'
 import { shallow, useSelector } from '@tanstack/preact-store'
+import { constructReactivityBindings } from '@tanstack/table-core/reactivity'
 import { FlexRender } from './FlexRender'
 import { Subscribe } from './Subscribe'
+// import { preactReactivity } from './reactivity'
 import type {
   CellData,
   RowData,
@@ -92,11 +94,13 @@ export function useTable<
     ({}) as TSelected,
 ): PreactTable<TFeatures, TData, TSelected> {
   const [table] = useState(() => {
-    const tableInstance = constructTable(tableOptions) as PreactTable<
-      TFeatures,
-      TData,
-      TSelected
-    >
+    const tableInstance = constructTable({
+      ...tableOptions,
+      _features: {
+        coreReativityFeature: constructReactivityBindings(), // preactReactivity() currently causes infinite re-renders
+        ...tableOptions._features,
+      },
+    }) as PreactTable<TFeatures, TData, TSelected>
 
     tableInstance.Subscribe = ((props: any) => {
       return Subscribe({
@@ -110,27 +114,24 @@ export function useTable<
     return tableInstance
   })
 
-  // sync table options on every render
-  table.setOptions((prev) => ({
-    ...prev,
-    ...tableOptions,
-  }))
+  useEffect(() => {
+    table.setOptions((prev) => ({
+      ...prev,
+      ...tableOptions,
+    }))
+  }, [table, tableOptions])
 
-  const selectorWithDataAndColumns = (state: TableState<TFeatures>) => ({
-    columns: tableOptions.columns,
-    data: tableOptions.data,
-    ...selector(state),
-  })
-
-  const state = useSelector(table.store, selectorWithDataAndColumns, {
+  const state = useSelector(table.store, selector, { compare: shallow })
+  const options = useSelector(table.optionsStore, (options) => options, {
     compare: shallow,
   })
 
   return useMemo(
     () => ({
       ...table,
+      options,
       state,
     }),
-    [state, table],
+    [table, options, state],
   ) as PreactTable<TFeatures, TData, TSelected>
 }