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

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,4 @@ 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>;
+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,7 @@ 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 = () => ({})) {
+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/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/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.43",
+  "version": "9.0.0-alpha.45",
   "description": "Headless UI for building powerful tables & datagrids for Svelte.",
   "author": "Tanner Linsley",
   "license": "MIT",

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`.
@@ -30,11 +30,10 @@ export type SvelteTable<
 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/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/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 })
 }