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

package/dist/createTable.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { RowData, Table, TableFeatures, TableOptions, TableState } from '@tanstack/table-core';
-export type SvelteTable<TFeatures extends TableFeatures, TData extends RowData, TSelected = {}> = Table<TFeatures, TData> & {
+export type SvelteTable<TFeatures extends TableFeatures, TData extends RowData, TSelected = TableState<TFeatures>> = Table<TFeatures, TData> & {
     /**
      * 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 `createTable`.
      *
@@ -10,4 +10,29 @@ export type SvelteTable<TFeatures extends TableFeatures, TData extends RowData,
      */
     readonly state: Readonly<TSelected>;
 };
-export declare function createTable<TFeatures extends TableFeatures, TData extends RowData, TSelected = {}>(tableOptions: TableOptions<TFeatures, TData>, selector?: (state: TableState<TFeatures>) => TSelected): SvelteTable<TFeatures, TData, 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,7 +3,32 @@ import { useSelector } from '@tanstack/svelte-store';
 import { untrack } from 'svelte';
 import { mergeObjects } from './merge-objects';
 import { svelteReactivity } from './reactivity.svelte';
-export function createTable(tableOptions, selector = () => ({})) {
+/**
+ * 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, {
         _features: {

package/dist/createTableHook.svelte.d.ts

@@ -228,7 +228,7 @@ export type AppSvelteTable<TFeatures extends TableFeatures, TData extends RowDat
 export declare function createTableHook<TFeatures extends TableFeatures, const TTableComponents extends Record<string, ComponentType<any>>, const TCellComponents extends Record<string, ComponentType<any>>, const THeaderComponents extends Record<string, ComponentType<any>>>({ tableComponents, cellComponents, headerComponents, ...defaultTableOptions }: CreateTableHookOptions<TFeatures, TTableComponents, TCellComponents, THeaderComponents>): {
     appFeatures: TFeatures;
     createAppColumnHelper: <TData extends RowData>() => AppColumnHelper<TFeatures, TData, TCellComponents, THeaderComponents>;
-    createAppTable: <TData extends RowData, TSelected = {}>(tableOptions: Omit<TableOptions<TFeatures, TData>, "_features" | "_rowModels">, selector?: (state: TableState<TFeatures>) => TSelected) => AppSvelteTable<TFeatures, TData, TSelected, TTableComponents, TCellComponents, THeaderComponents>;
+    createAppTable: <TData extends RowData, TSelected = TableState<TFeatures>>(tableOptions: Omit<TableOptions<TFeatures, TData>, "_features" | "_rowModels">, selector?: (state: TableState<TFeatures>) => TSelected) => AppSvelteTable<TFeatures, TData, TSelected, TTableComponents, TCellComponents, THeaderComponents>;
     useTableContext: <TData extends RowData = RowData>() => SvelteTable<TFeatures, TData>;
     useCellContext: <TValue extends CellData = unknown>() => Cell<TFeatures, any, TValue>;
     useHeaderContext: <TValue extends CellData = unknown>() => Header<TFeatures, any, TValue>;

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,6 +14,13 @@ 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,

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.44",
+  "version": "9.0.0-alpha.46",
   "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.46"
   },
   "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

@@ -14,7 +14,7 @@ import type {
 export type SvelteTable<
   TFeatures extends TableFeatures,
   TData extends RowData,
-  TSelected = {},
+  TSelected = TableState<TFeatures>,
 > = Table<TFeatures, TData> & {
   /**
    * 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 `createTable`.
@@ -27,14 +27,38 @@ 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,
-  TSelected = {},
+  TSelected = TableState<TFeatures>,
 >(
   tableOptions: TableOptions<TFeatures, TData>,
-  selector: (state: TableState<TFeatures>) => TSelected = () =>
-    ({}) as TSelected,
+  selector?: (state: TableState<TFeatures>) => TSelected,
 ): SvelteTable<TFeatures, TData, TSelected> {
   // 1. Merge reactivity into options using mergeObjects (preserves getters)
   const mergedOptions = mergeObjects(tableOptions, {

package/src/createTableHook.svelte.ts

@@ -523,7 +523,10 @@ export function createTableHook<
    *
    * TFeatures is already known from the createTableHook call; TData is inferred from the data prop.
    */
-  function createAppTable<TData extends RowData, TSelected = {}>(
+  function createAppTable<
+    TData extends RowData,
+    TSelected = TableState<TFeatures>,
+  >(
     tableOptions: Omit<
       TableOptions<TFeatures, TData>,
       '_features' | '_rowModels'

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,6 +28,13 @@ 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,

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>,