@tanstack/svelte-table 9.0.0-alpha.42 → 9.0.0-alpha.44

package/dist/index.d.ts

@@ -5,5 +5,5 @@ export { createTableHook } from './createTableHook.svelte';
 export type { AppCellContext, AppColumnDefBase, AppColumnDefTemplate, AppColumnHelper, AppDisplayColumnDef, AppGroupColumnDef, AppHeaderContext, AppSvelteTable, ComponentType, CreateTableHookOptions, } from './createTableHook.svelte';
 export { createTableState } from './createTableState.svelte';
 export { default as FlexRender } from './FlexRender.svelte';
-export { subscribeTable } from './subscribe';
+export { subscribeTable, type SubscribeSource } from './subscribe';
 export { renderComponent, renderSnippet } from './render-component';

package/dist/reactivity.svelte.js

@@ -8,13 +8,15 @@ function subscribeToRune(getValue, observerOrNext) {
     const callback = observerToCallback(observerOrNext);
     const unsubscribe = $effect.root(() => {
         $effect(() => {
-            callback(getValue());
+            const value = getValue();
+            untrack(() => callback(value));
         });
     });
     return { unsubscribe };
 }
 export function svelteReactivity() {
     return {
+        createOptionsStore: true,
         createReadonlyAtom: (fn, _options) => {
             const value = $derived.by(fn);
             return {

package/dist/subscribe.d.ts

@@ -1,9 +1,9 @@
-import type { RowData, Table, TableFeatures, TableState } from '@tanstack/table-core';
+import { useSelector } from '@tanstack/svelte-store';
+import type { Atom, ReadonlyAtom, ReadonlyStore, Store } from '@tanstack/svelte-store';
+export type SubscribeSource<TValue> = Atom<TValue> | ReadonlyAtom<TValue> | Store<TValue> | ReadonlyStore<TValue>;
 /**
- * Fine-grained subscription to `table.store` using `useSelector` with shallow
- * comparison. Call from `<script>` so the selector is contextually typed
- * (same inference model as React’s `Subscribe` / `table.Subscribe`).
+ * Fine-grained subscription to a source using `useSelector` with shallow
+ * comparison. Omit `selector` to subscribe to the source value directly.
  */
-export declare function subscribeTable<TFeatures extends TableFeatures, TData extends RowData, TSelected>(table: Table<TFeatures, TData>, selector: (state: TableState<TFeatures>) => TSelected): {
-    readonly current: TSelected;
-};
+export declare function subscribeTable<TSourceValue>(source: SubscribeSource<TSourceValue>): ReturnType<typeof useSelector<TSourceValue>>;
+export declare function subscribeTable<TSourceValue, TSelected>(source: SubscribeSource<TSourceValue>, selector: (state: TSourceValue) => TSelected): ReturnType<typeof useSelector<TSourceValue, TSelected>>;

package/dist/subscribe.js

@@ -1,9 +1,4 @@
 import { shallow, useSelector } from '@tanstack/svelte-store';
-/**
- * Fine-grained subscription to `table.store` using `useSelector` with shallow
- * comparison. Call from `<script>` so the selector is contextually typed
- * (same inference model as React’s `Subscribe` / `table.Subscribe`).
- */
-export function subscribeTable(table, selector) {
-    return useSelector(table.store, selector, { compare: shallow });
+export function subscribeTable(source, selector) {
+    return useSelector(source, selector, { compare: shallow });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/svelte-table",
-  "version": "9.0.0-alpha.42",
+  "version": "9.0.0-alpha.44",
   "description": "Headless UI for building powerful tables & datagrids for Svelte.",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -51,7 +51,7 @@
   ],
   "dependencies": {
     "@tanstack/svelte-store": "^0.12.0",
-    "@tanstack/table-core": "9.0.0-alpha.42"
+    "@tanstack/table-core": "9.0.0-alpha.43"
   },
   "devDependencies": {
     "@sveltejs/package": "^2.5.7",

package/src/index.ts

@@ -17,5 +17,5 @@ export type {
 } from './createTableHook.svelte'
 export { createTableState } from './createTableState.svelte'
 export { default as FlexRender } from './FlexRender.svelte'
-export { subscribeTable } from './subscribe'
+export { subscribeTable, type SubscribeSource } from './subscribe'
 export { renderComponent, renderSnippet } from './render-component'

package/src/reactivity.svelte.ts

@@ -20,7 +20,8 @@ function subscribeToRune<T>(
   const callback = observerToCallback(observerOrNext)
   const unsubscribe = $effect.root(() => {
     $effect(() => {
-      callback(getValue())
+      const value = getValue()
+      untrack(() => callback(value))
     })
   })
 
@@ -29,6 +30,7 @@ function subscribeToRune<T>(
 
 export function svelteReactivity(): TableReactivityBindings {
   return {
+    createOptionsStore: true,
     createReadonlyAtom: <T>(fn: () => T, _options?: TableAtomOptions<T>) => {
       const value = $derived.by(fn)
 

package/src/subscribe.ts

@@ -1,23 +1,31 @@
 import { shallow, useSelector } from '@tanstack/svelte-store'
 import type {
-  RowData,
-  Table,
-  TableFeatures,
-  TableState,
-} from '@tanstack/table-core'
+  Atom,
+  ReadonlyAtom,
+  ReadonlyStore,
+  Store,
+} from '@tanstack/svelte-store'
+
+export type SubscribeSource<TValue> =
+  | Atom<TValue>
+  | ReadonlyAtom<TValue>
+  | Store<TValue>
+  | ReadonlyStore<TValue>
 
 /**
- * Fine-grained subscription to `table.store` using `useSelector` with shallow
- * comparison. Call from `<script>` so the selector is contextually typed
- * (same inference model as React’s `Subscribe` / `table.Subscribe`).
+ * Fine-grained subscription to a source using `useSelector` with shallow
+ * comparison. Omit `selector` to subscribe to the source value directly.
  */
-export function subscribeTable<
-  TFeatures extends TableFeatures,
-  TData extends RowData,
-  TSelected,
->(
-  table: Table<TFeatures, TData>,
-  selector: (state: TableState<TFeatures>) => TSelected,
+export function subscribeTable<TSourceValue>(
+  source: SubscribeSource<TSourceValue>,
+): ReturnType<typeof useSelector<TSourceValue>>
+export function subscribeTable<TSourceValue, TSelected>(
+  source: SubscribeSource<TSourceValue>,
+  selector: (state: TSourceValue) => TSelected,
+): ReturnType<typeof useSelector<TSourceValue, TSelected>>
+export function subscribeTable<TSourceValue, TSelected>(
+  source: SubscribeSource<TSourceValue>,
+  selector?: (state: TSourceValue) => TSelected,
 ) {
-  return useSelector(table.store, selector, { compare: shallow })
+  return useSelector(source, selector, { compare: shallow })
 }