@tanstack/svelte-table 9.0.0-alpha.45 → 9.0.0-alpha.47

package/dist/createTable.svelte.d.ts

@@ -10,4 +10,29 @@ export type SvelteTable<TFeatures extends TableFeatures, TData extends RowData,
      */
     readonly state: Readonly<TSelected>;
 };
+/**
+ * Creates a Svelte 5 table instance backed by rune-aware TanStack Store atoms.
+ *
+ * The optional selector projects from `table.store`; the selected value is
+ * exposed on `table.state`. The adapter syncs options in `$effect.pre`, so
+ * reactive option getters and external `$state` values are applied before DOM
+ * updates read table APIs such as `getRowModel()`.
+ *
+ * @example
+ * ```svelte
+ * <script lang="ts">
+ *   const table = createTable(
+ *     {
+ *       _features,
+ *       _rowModels: {},
+ *       columns,
+ *       data,
+ *     },
+ *     (state) => ({ pagination: state.pagination }),
+ *   )
+ * </script>
+ *
+ * {table.state.pagination.pageIndex}
+ * ```
+ */
 export declare function createTable<TFeatures extends TableFeatures, TData extends RowData, TSelected = TableState<TFeatures>>(tableOptions: TableOptions<TFeatures, TData>, selector?: (state: TableState<TFeatures>) => TSelected): SvelteTable<TFeatures, TData, TSelected>;

package/dist/createTable.svelte.js

@@ -3,6 +3,31 @@ import { useSelector } from '@tanstack/svelte-store';
 import { untrack } from 'svelte';
 import { mergeObjects } from './merge-objects';
 import { svelteReactivity } from './reactivity.svelte';
+/**
+ * Creates a Svelte 5 table instance backed by rune-aware TanStack Store atoms.
+ *
+ * The optional selector projects from `table.store`; the selected value is
+ * exposed on `table.state`. The adapter syncs options in `$effect.pre`, so
+ * reactive option getters and external `$state` values are applied before DOM
+ * updates read table APIs such as `getRowModel()`.
+ *
+ * @example
+ * ```svelte
+ * <script lang="ts">
+ *   const table = createTable(
+ *     {
+ *       _features,
+ *       _rowModels: {},
+ *       columns,
+ *       data,
+ *     },
+ *     (state) => ({ pagination: state.pagination }),
+ *   )
+ * </script>
+ *
+ * {table.state.pagination.pageIndex}
+ * ```
+ */
 export function createTable(tableOptions, selector) {
     // 1. Merge reactivity into options using mergeObjects (preserves getters)
     const mergedOptions = mergeObjects(tableOptions, {

package/dist/createTableState.svelte.d.ts

@@ -1,2 +1,17 @@
 import type { Updater } from '@tanstack/table-core';
+/**
+ * Creates a small Svelte 5 state holder that accepts TanStack Table updaters.
+ *
+ * This is useful when a table state slice should be owned outside the table
+ * with `$state`, but still needs to accept both value and functional updater
+ * forms from `on[State]Change` callbacks.
+ *
+ * @example
+ * ```ts
+ * const [pagination, setPagination] = createTableState({
+ *   pageIndex: 0,
+ *   pageSize: 10,
+ * })
+ * ```
+ */
 export declare function createTableState<TState>(initialValue: TState): [() => TState, (updater: Updater<TState>) => void];

package/dist/createTableState.svelte.js

@@ -1,3 +1,18 @@
+/**
+ * Creates a small Svelte 5 state holder that accepts TanStack Table updaters.
+ *
+ * This is useful when a table state slice should be owned outside the table
+ * with `$state`, but still needs to accept both value and functional updater
+ * forms from `on[State]Change` callbacks.
+ *
+ * @example
+ * ```ts
+ * const [pagination, setPagination] = createTableState({
+ *   pageIndex: 0,
+ *   pageSize: 10,
+ * })
+ * ```
+ */
 export function createTableState(initialValue) {
     let value = $state(initialValue);
     return [

package/dist/reactivity.svelte.d.ts

@@ -1,2 +1,9 @@
 import type { TableReactivityBindings } from '@tanstack/table-core/reactivity';
+/**
+ * Creates the table-core reactivity bindings used by the Svelte adapter.
+ *
+ * Readonly table atoms are backed by `$derived.by`, writable atoms by `$state`,
+ * and subscriptions bridge through rune effects so table APIs participate in
+ * Svelte dependency tracking.
+ */
 export declare function svelteReactivity(): TableReactivityBindings;

package/dist/reactivity.svelte.js

@@ -14,9 +14,17 @@ function subscribeToRune(getValue, observerOrNext) {
     });
     return { unsubscribe };
 }
+/**
+ * Creates the table-core reactivity bindings used by the Svelte adapter.
+ *
+ * Readonly table atoms are backed by `$derived.by`, writable atoms by `$state`,
+ * and subscriptions bridge through rune effects so table APIs participate in
+ * Svelte dependency tracking.
+ */
 export function svelteReactivity() {
     return {
         createOptionsStore: true,
+        schedule: (fn) => queueMicrotask(() => fn()),
         createReadonlyAtom: (fn, _options) => {
             const value = $derived.by(fn);
             return {

package/dist/render-component.d.ts

@@ -41,7 +41,8 @@ export declare class RenderSnippetConfig<TProps> {
     constructor(snippet: Snippet<[TProps]>, params?: TProps | undefined);
 }
 /**
- * A helper function to help create cells from Svelte components through ColumnDef's `cell` and `header` properties.
+ * Wraps a Svelte component so it can be returned from a column definition
+ * renderer such as `cell`, `header`, or `footer`.
  *
  * This is only to be used with Svelte Components - use `renderSnippet` for Svelte Snippets.
  *
@@ -64,15 +65,16 @@ export declare class RenderSnippetConfig<TProps> {
  */
 export declare const renderComponent: <TComponent extends Component<any>, TProps extends ComponentProps<TComponent>>(component: TComponent, props?: TProps) => RenderComponentConfig<TComponent>;
 /**
- * A helper function to help create cells from Svelte Snippets through ColumnDef's `cell` and `header` properties.
+ * Wraps a Svelte snippet so it can be returned from a column definition
+ * renderer such as `cell`, `header`, or `footer`.
  *
  * *The snippet must only take one parameter.*
  *
  * This is only to be used with Snippets - use `renderComponent` for Svelte Components.
  *
- * @param snippet
- * @param params
- * @returns
+ * @param snippet The snippet to render.
+ * @param params The single parameter object passed to the snippet.
+ * @returns A `RenderSnippetConfig` consumed by the Svelte `FlexRender` component.
  * @example
  * ```ts
  * // +page.svelte

package/dist/render-component.js

@@ -42,7 +42,8 @@ export class RenderSnippetConfig {
     }
 }
 /**
- * A helper function to help create cells from Svelte components through ColumnDef's `cell` and `header` properties.
+ * Wraps a Svelte component so it can be returned from a column definition
+ * renderer such as `cell`, `header`, or `footer`.
  *
  * This is only to be used with Svelte Components - use `renderSnippet` for Svelte Snippets.
  *
@@ -65,15 +66,16 @@ export class RenderSnippetConfig {
  */
 export const renderComponent = (component, props) => new RenderComponentConfig(component, props);
 /**
- * A helper function to help create cells from Svelte Snippets through ColumnDef's `cell` and `header` properties.
+ * Wraps a Svelte snippet so it can be returned from a column definition
+ * renderer such as `cell`, `header`, or `footer`.
  *
  * *The snippet must only take one parameter.*
  *
  * This is only to be used with Snippets - use `renderComponent` for Svelte Components.
  *
- * @param snippet
- * @param params
- * @returns
+ * @param snippet The snippet to render.
+ * @param params The single parameter object passed to the snippet.
+ * @returns A `RenderSnippetConfig` consumed by the Svelte `FlexRender` component.
  * @example
  * ```ts
  * // +page.svelte

package/dist/subscribe.d.ts

@@ -2,8 +2,23 @@ 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 a source using `useSelector` with shallow
- * comparison. Omit `selector` to subscribe to the source value directly.
+ * Creates a fine-grained Svelte subscription to a TanStack Store source.
+ *
+ * Pass a table atom or store and optionally project it with a selector. The
+ * returned selector store exposes `.current`, making it useful for reading
+ * focused table state outside the broad `createTable` selector.
+ *
+ * @example
+ * ```svelte
+ * <script lang="ts">
+ *   const selected = subscribeTable(
+ *     table.atoms.rowSelection,
+ *     (rowSelection) => rowSelection[row.id],
+ *   )
+ * </script>
+ *
+ * <input type="checkbox" checked={!!selected.current} />
+ * ```
  */
 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/svelte-table",
-  "version": "9.0.0-alpha.45",
+  "version": "9.0.0-alpha.47",
   "description": "Headless UI for building powerful tables & datagrids for Svelte.",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -51,14 +51,14 @@
   ],
   "dependencies": {
     "@tanstack/svelte-store": "^0.12.0",
-    "@tanstack/table-core": "9.0.0-alpha.43"
+    "@tanstack/table-core": "9.0.0-alpha.47"
   },
   "devDependencies": {
     "@sveltejs/package": "^2.5.7",
-    "@sveltejs/vite-plugin-svelte": "^7.0.0",
+    "@sveltejs/vite-plugin-svelte": "^7.1.2",
     "eslint-plugin-svelte": "^3.17.1",
     "svelte": "^5.55.5",
-    "svelte-check": "^4.4.7"
+    "svelte-check": "^4.4.8"
   },
   "peerDependencies": {
     "svelte": "^5.0.0"

package/src/createTable.svelte.ts

@@ -27,6 +27,31 @@ export type SvelteTable<
   readonly state: Readonly<TSelected>
 }
 
+/**
+ * Creates a Svelte 5 table instance backed by rune-aware TanStack Store atoms.
+ *
+ * The optional selector projects from `table.store`; the selected value is
+ * exposed on `table.state`. The adapter syncs options in `$effect.pre`, so
+ * reactive option getters and external `$state` values are applied before DOM
+ * updates read table APIs such as `getRowModel()`.
+ *
+ * @example
+ * ```svelte
+ * <script lang="ts">
+ *   const table = createTable(
+ *     {
+ *       _features,
+ *       _rowModels: {},
+ *       columns,
+ *       data,
+ *     },
+ *     (state) => ({ pagination: state.pagination }),
+ *   )
+ * </script>
+ *
+ * {table.state.pagination.pageIndex}
+ * ```
+ */
 export function createTable<
   TFeatures extends TableFeatures,
   TData extends RowData,

package/src/createTableState.svelte.ts

@@ -1,5 +1,20 @@
 import type { Updater } from '@tanstack/table-core'
 
+/**
+ * Creates a small Svelte 5 state holder that accepts TanStack Table updaters.
+ *
+ * This is useful when a table state slice should be owned outside the table
+ * with `$state`, but still needs to accept both value and functional updater
+ * forms from `on[State]Change` callbacks.
+ *
+ * @example
+ * ```ts
+ * const [pagination, setPagination] = createTableState({
+ *   pageIndex: 0,
+ *   pageSize: 10,
+ * })
+ * ```
+ */
 export function createTableState<TState>(
   initialValue: TState,
 ): [() => TState, (updater: Updater<TState>) => void] {

package/src/reactivity.svelte.ts

@@ -28,9 +28,17 @@ function subscribeToRune<T>(
   return { unsubscribe }
 }
 
+/**
+ * Creates the table-core reactivity bindings used by the Svelte adapter.
+ *
+ * Readonly table atoms are backed by `$derived.by`, writable atoms by `$state`,
+ * and subscriptions bridge through rune effects so table APIs participate in
+ * Svelte dependency tracking.
+ */
 export function svelteReactivity(): TableReactivityBindings {
   return {
     createOptionsStore: true,
+    schedule: (fn) => queueMicrotask(() => fn()),
     createReadonlyAtom: <T>(fn: () => T, _options?: TableAtomOptions<T>) => {
       const value = $derived.by(fn)
 

package/src/render-component.ts

@@ -46,7 +46,8 @@ export class RenderSnippetConfig<TProps> {
 }
 
 /**
- * A helper function to help create cells from Svelte components through ColumnDef's `cell` and `header` properties.
+ * Wraps a Svelte component so it can be returned from a column definition
+ * renderer such as `cell`, `header`, or `footer`.
  *
  * This is only to be used with Svelte Components - use `renderSnippet` for Svelte Snippets.
  *
@@ -76,15 +77,16 @@ export const renderComponent = <
 ) => new RenderComponentConfig(component, props)
 
 /**
- * A helper function to help create cells from Svelte Snippets through ColumnDef's `cell` and `header` properties.
+ * Wraps a Svelte snippet so it can be returned from a column definition
+ * renderer such as `cell`, `header`, or `footer`.
  *
  * *The snippet must only take one parameter.*
  *
  * This is only to be used with Snippets - use `renderComponent` for Svelte Components.
  *
- * @param snippet
- * @param params
- * @returns
+ * @param snippet The snippet to render.
+ * @param params The single parameter object passed to the snippet.
+ * @returns A `RenderSnippetConfig` consumed by the Svelte `FlexRender` component.
  * @example
  * ```ts
  * // +page.svelte

package/src/subscribe.ts

@@ -13,8 +13,23 @@ export type SubscribeSource<TValue> =
   | ReadonlyStore<TValue>
 
 /**
- * Fine-grained subscription to a source using `useSelector` with shallow
- * comparison. Omit `selector` to subscribe to the source value directly.
+ * Creates a fine-grained Svelte subscription to a TanStack Store source.
+ *
+ * Pass a table atom or store and optionally project it with a selector. The
+ * returned selector store exposes `.current`, making it useful for reading
+ * focused table state outside the broad `createTable` selector.
+ *
+ * @example
+ * ```svelte
+ * <script lang="ts">
+ *   const selected = subscribeTable(
+ *     table.atoms.rowSelection,
+ *     (rowSelection) => rowSelection[row.id],
+ *   )
+ * </script>
+ *
+ * <input type="checkbox" checked={!!selected.current} />
+ * ```
  */
 export function subscribeTable<TSourceValue>(
   source: SubscribeSource<TSourceValue>,