@tanstack/vue-table 9.0.0-beta.1 → 9.0.0-beta.11

package/src/FlexRender.ts

@@ -1,12 +1,27 @@
 import { defineComponent, h, isVNode } from 'vue'
 import type { PropType } from 'vue'
-import type {
-  Cell,
-  CellData,
-  Header,
-  RowData,
-  TableFeatures,
-} from '@tanstack/table-core'
+
+export interface FlexRenderCell {
+  column: {
+    columnDef: {
+      aggregatedCell?: any
+      cell?: any
+    }
+  }
+  getContext: () => any
+  getIsAggregated?: () => boolean
+  getIsPlaceholder?: () => boolean
+}
+
+export interface FlexRenderHeader {
+  column: {
+    columnDef: {
+      footer?: any
+      header?: any
+    }
+  }
+  getContext: () => any
+}
 
 /**
  * If rendering headers, cells, or footers with custom markup, use flexRender instead of `cell.getValue()` or `cell.renderValue()`.
@@ -60,24 +75,24 @@ export const FlexRender = defineComponent({
       default: undefined,
     },
     cell: {
-      type: Object as PropType<Cell<any, any, any>>,
+      type: Object as PropType<FlexRenderCell>,
       default: undefined,
     },
     header: {
-      type: Object as PropType<Header<any, any, any>>,
+      type: Object as PropType<FlexRenderHeader>,
       default: undefined,
     },
     footer: {
-      type: Object as PropType<Header<any, any, any>>,
+      type: Object as PropType<FlexRenderHeader>,
       default: undefined,
     },
   },
   setup: (props: {
     render?: any
     props?: any
-    cell?: Cell<any, any, any>
-    header?: Header<any, any, any>
-    footer?: Header<any, any, any>
+    cell?: FlexRenderCell
+    header?: FlexRenderHeader
+    footer?: FlexRenderHeader
   }) => {
     return () => {
       // New shorthand pattern: extract render and props from cell/header/footer

package/src/createTableHook.ts

@@ -1,10 +1,10 @@
 import { createColumnHelper as coreCreateColumnHelper } from '@tanstack/table-core'
-import { useSelector } from '@tanstack/vue-store'
 import { defineComponent, h, inject, provide } from 'vue'
 import { FlexRender } from './FlexRender'
 import { mergeProxy } from './merge-proxy'
 import { useTable } from './useTable'
 import type { TableOptionsWithReactiveData, VueTable } from './useTable'
+import type { FlexRenderCell, FlexRenderHeader } from './FlexRender'
 import type { Component, InjectionKey, PropType, VNodeChild } from 'vue'
 import type {
   AccessorFn,
@@ -192,31 +192,22 @@ export type CreateTableHookOptions<
   headerComponents?: THeaderComponents
 }
 
-export interface AppTableProps<
-  TFeatures extends TableFeatures,
-  TSelected = unknown,
-> {
-  selector?: (state: TableState<TFeatures>) => TSelected
-}
+export interface AppTableProps {}
 
 export interface AppCellProps<
   TFeatures extends TableFeatures,
   TData extends RowData,
   TValue extends CellData = CellData,
-  TSelected = unknown,
 > {
   cell: Cell<TFeatures, TData, TValue>
-  selector?: (state: TableState<TFeatures>) => TSelected
 }
 
 export interface AppHeaderProps<
   TFeatures extends TableFeatures,
   TData extends RowData,
   TValue extends CellData = CellData,
-  TSelected = unknown,
 > {
   header: Header<TFeatures, TData, TValue>
-  selector?: (state: TableState<TFeatures>) => TSelected
 }
 
 export type AppVueTable<
@@ -226,9 +217,9 @@ export type AppVueTable<
   TTableComponents extends Record<string, ComponentType<any>>,
   TCellComponents extends Record<string, ComponentType<any>>,
   THeaderComponents extends Record<string, ComponentType<any>>,
-> = VueTable<TFeatures, TData, TSelected> &
+> = VueTable<TFeatures, TData> &
   NoInfer<TTableComponents> & {
-    AppTable: Component<AppTableProps<TFeatures>>
+    AppTable: Component<AppTableProps>
     AppCell: Component<AppCellProps<TFeatures, TData>>
     AppHeader: Component<AppHeaderProps<TFeatures, TData>>
     AppFooter: Component<AppHeaderProps<TFeatures, TData>>
@@ -239,15 +230,15 @@ export const AppFlexRender = defineComponent({
   name: 'TableFlexRender',
   props: {
     cell: {
-      type: Object as PropType<Cell<any, any, any>>,
+      type: Object as PropType<FlexRenderCell>,
       default: undefined,
     },
     header: {
-      type: Object as PropType<Header<any, any, any>>,
+      type: Object as PropType<FlexRenderHeader>,
       default: undefined,
     },
     footer: {
-      type: Object as PropType<Header<any, any, any>>,
+      type: Object as PropType<FlexRenderHeader>,
       default: undefined,
     },
   },
@@ -290,7 +281,6 @@ export const AppFlexRender = defineComponent({
  * ```ts
  * const { useAppTable, createAppColumnHelper } = createTableHook({
  *   features,
- *   rowModels: {},
  *   tableComponents: {},
  *   cellComponents: {},
  *   headerComponents: {},
@@ -314,7 +304,7 @@ export function createTableHook<
   THeaderComponents
 >) {
   const TableContext = Symbol('TableContext') as InjectionKey<
-    VueTable<TFeatures, any, any>
+    VueTable<TFeatures, any>
   >
   const CellContext = Symbol('CellContext') as InjectionKey<
     Cell<TFeatures, any, any>
@@ -410,19 +400,15 @@ export function createTableHook<
     },
   })
 
-  function useAppTable<
-    TData extends RowData,
-    TSelected = TableState<TFeatures>,
-  >(
+  function useAppTable<TData extends RowData>(
     tableOptions: Omit<
       TableOptionsWithReactiveData<TFeatures, TData>,
-      'features' | 'rowModels'
+      'features'
     >,
-    selector?: (state: TableState<TFeatures>) => TSelected,
   ): AppVueTable<
     TFeatures,
     TData,
-    TSelected,
+    TableState<TFeatures>,
     TTableComponents,
     TCellComponents,
     THeaderComponents
@@ -432,28 +418,14 @@ export function createTableHook<
       tableOptions,
     ) as TableOptionsWithReactiveData<TFeatures, TData>
 
-    const table = useTable<TFeatures, TData, TSelected>(mergedOptions, selector)
+    const table = useTable<TFeatures, TData>(mergedOptions)
 
     const AppTable = defineComponent({
       name: 'AppTable',
-      props: {
-        selector: {
-          type: Function as PropType<(state: TableState<TFeatures>) => unknown>,
-          default: undefined,
-        },
-      },
-      setup(props, { slots }) {
+      setup(_, { slots }) {
         provide(TableContext, table)
-        const selected = props.selector
-          ? useSelector(table.store, props.selector)
-          : undefined
-
         return () => {
-          if (!props.selector) {
-            return slots.default?.()
-          }
-
-          return slots.default?.({ state: selected?.value })
+          return slots.default?.()
         }
       },
     })
@@ -465,20 +437,12 @@ export function createTableHook<
           type: Object as PropType<object>,
           required: true,
         },
-        selector: {
-          type: Function as PropType<(state: TableState<TFeatures>) => unknown>,
-          default: undefined,
-        },
       },
       setup(props, { slots }) {
         const cell = props.cell as Cell<TFeatures, TData, any>
 
         provide(CellContext, cell)
 
-        const selected = props.selector
-          ? useSelector(table.store, props.selector)
-          : undefined
-
         const extendedCell = Object.assign(cell, {
           FlexRender: CellFlexRender,
           ...(cellComponents ?? {}),
@@ -486,11 +450,7 @@ export function createTableHook<
           TCellComponents & { FlexRender: Component }
 
         return () => {
-          return slots.default?.(
-            props.selector
-              ? { cell: extendedCell, state: selected?.value }
-              : { cell: extendedCell },
-          )
+          return slots.default?.({ cell: extendedCell })
         }
       },
     })
@@ -502,20 +462,12 @@ export function createTableHook<
           type: Object as PropType<object>,
           required: true,
         },
-        selector: {
-          type: Function as PropType<(state: TableState<TFeatures>) => unknown>,
-          default: undefined,
-        },
       },
       setup(props, { slots }) {
         const header = props.header as Header<TFeatures, TData, any>
 
         provide(HeaderContext, header)
 
-        const selected = props.selector
-          ? useSelector(table.store, props.selector)
-          : undefined
-
         const extendedHeader = Object.assign(header, {
           FlexRender: HeaderFlexRender,
           ...(headerComponents ?? {}),
@@ -523,11 +475,7 @@ export function createTableHook<
           THeaderComponents & { FlexRender: Component }
 
         return () => {
-          return slots.default?.(
-            props.selector
-              ? { header: extendedHeader, state: selected?.value }
-              : { header: extendedHeader },
-          )
+          return slots.default?.({ header: extendedHeader })
         }
       },
     })
@@ -539,20 +487,12 @@ export function createTableHook<
           type: Object as PropType<object>,
           required: true,
         },
-        selector: {
-          type: Function as PropType<(state: TableState<TFeatures>) => unknown>,
-          default: undefined,
-        },
       },
       setup(props, { slots }) {
         const header = props.header as Header<TFeatures, TData, any>
 
         provide(HeaderContext, header)
 
-        const selected = props.selector
-          ? useSelector(table.store, props.selector)
-          : undefined
-
         const extendedHeader = Object.assign(header, {
           FlexRender: FooterFlexRender,
           ...(headerComponents ?? {}),
@@ -560,11 +500,7 @@ export function createTableHook<
           THeaderComponents & { FlexRender: Component }
 
         return () => {
-          return slots.default?.(
-            props.selector
-              ? { header: extendedHeader, state: selected?.value }
-              : { header: extendedHeader },
-          )
+          return slots.default?.({ header: extendedHeader })
         }
       },
     })
@@ -579,7 +515,7 @@ export function createTableHook<
     }) as AppVueTable<
       TFeatures,
       TData,
-      TSelected,
+      TableState<TFeatures>,
       TTableComponents,
       TCellComponents,
       THeaderComponents

package/src/reactivity.ts

@@ -1,20 +1,17 @@
-import {
-  computed,
-  getCurrentScope,
-  onScopeDispose,
-  shallowRef,
-  watch,
-} from 'vue'
-import { batch, createAtom } from '@tanstack/vue-store'
+import { computed, shallowRef, watch } from 'vue'
+import { batch } from '@tanstack/store'
 import type {
   TableAtomOptions,
   TableReactivityBindings,
 } from '@tanstack/table-core/reactivity'
-import type { Atom, Observer, ReadonlyAtom } from '@tanstack/vue-store'
+import type {
+  Atom,
+  Observer,
+  ReadonlyAtom,
+  Subscription,
+} from '@tanstack/store'
 import type { ComputedRef, ShallowRef } from 'vue'
 
-const optionsStoreDebugName = 'table/optionsStore'
-
 function observerToCallback<T>(
   observerOrNext: Observer<T> | ((value: T) => void),
 ): (value: T) => void {
@@ -64,50 +61,27 @@ function refToWritableAtom<T>(source: ShallowRef<T>): Atom<T> {
  * refs.
  */
 export function vueReactivity(): TableReactivityBindings {
+  const subscriptions = new Set<Subscription>()
+
   return {
     createOptionsStore: true,
-    wrapExternalAtoms: false,
-    addSubscription: () => {
-      throw new Error(
-        'Feature not supported in current reactivity implementation',
-      )
+    wrapExternalAtoms: true,
+    addSubscription: (subscription) => {
+      subscriptions.add(subscription)
     },
     unmount: () => {
-      throw new Error(
-        'Feature not supported in current reactivity implementation',
-      )
+      subscriptions.forEach((s) => s.unsubscribe())
+      subscriptions.clear()
     },
     schedule: (fn) => queueMicrotask(() => fn()),
     createReadonlyAtom: <T>(fn: () => T, _options?: TableAtomOptions<T>) => {
-      const storeAtom = createAtom(() => fn(), {
-        compare: _options?.compare,
-      })
-      const version = shallowRef(0)
-      const subscription = storeAtom.subscribe(() => {
-        version.value += 1
-      })
-      if (getCurrentScope()) {
-        onScopeDispose(() => subscription.unsubscribe())
-      }
-
-      return refToReadonlyAtom(
-        computed(() => {
-          version.value
-          return storeAtom.get()
-        }),
-      )
+      return refToReadonlyAtom(computed(() => fn()))
     },
     createWritableAtom: <T>(
       value: T,
       _options?: TableAtomOptions<T>,
     ): Atom<T> => {
-      if (_options?.debugName === optionsStoreDebugName) {
-        return refToWritableAtom(shallowRef(value) as ShallowRef<T>)
-      }
-
-      return createAtom(value, {
-        compare: _options?.compare,
-      })
+      return refToWritableAtom(shallowRef(value) as ShallowRef<T>)
     },
     untrack: (fn) => fn(),
     batch,

package/src/useTable.ts

@@ -1,16 +1,8 @@
-import { unref, watch } from 'vue'
+import { getCurrentScope, onScopeDispose, unref, watch } from 'vue'
 import { constructTable } from '@tanstack/table-core'
-import { shallow, useSelector } from '@tanstack/vue-store'
 import { flatMerge, mergeProxy } from './merge-proxy'
 import { vueReactivity } from './reactivity'
 import type {
-  Atom,
-  ReadonlyAtom,
-  ReadonlyStore,
-  Store,
-} from '@tanstack/vue-store'
-import type {
-  NoInfer,
   RowData,
   Table,
   TableFeatures,
@@ -19,12 +11,6 @@ import type {
 } from '@tanstack/table-core'
 import type { MaybeRef, VNode } from 'vue'
 
-export type SubscribeSource<TValue> =
-  | Atom<TValue>
-  | ReadonlyAtom<TValue>
-  | Store<TValue>
-  | ReadonlyStore<TValue>
-
 export type TableOptionsWithReactiveData<
   TFeatures extends TableFeatures,
   TData extends RowData,
@@ -61,57 +47,19 @@ function getReactiveOptionDeps<
 export type VueTable<
   TFeatures extends TableFeatures,
   TData extends RowData,
-  TSelected = TableState<TFeatures>,
 > = Omit<Table<TFeatures, TData>, 'store'> & {
   /**
-   * @deprecated Prefer `table.state` for render reads,
-   * `table.atoms.<slice>.get()` for slice snapshots, or
-   * `table.Subscribe` / `useSelector(table.store, selector)` for explicit
-   * subscriptions. `table.store.state` is a current-value snapshot and is easy
-   * to misuse in render code.
+   * @deprecated Prefer `table.atoms.<slice>.get()` for slice snapshots, or
+   * `table.Subscribe` for explicit subscriptions. `table.store.state` is a
+   * current-value snapshot and is easy to misuse in render code.
    */
   readonly store: Table<TFeatures, TData>['store']
-  /**
-   * Store mode: `selector` required. Source mode: pass `source` (atom or store); omit
-   * `selector` for the whole value (identity), or pass `selector` to project. Split
-   * overloads so source-only infers `TSourceValue` for `children` (see React `Subscribe`).
-   */
-  Subscribe: {
-    <TSourceValue>(props: {
-      source: SubscribeSource<TSourceValue>
-      selector?: undefined
-      children:
-        | ((state: Readonly<TSourceValue>) => VNode | Array<VNode>)
-        | VNode
-        | Array<VNode>
-    }): VNode | Array<VNode>
-    <TSourceValue, TSubSelected>(props: {
-      source: SubscribeSource<TSourceValue>
-      selector: (state: TSourceValue) => TSubSelected
-      children:
-        | ((state: Readonly<TSubSelected>) => VNode | Array<VNode>)
-        | VNode
-        | Array<VNode>
-    }): VNode | Array<VNode>
-    <TSubSelected>(props: {
-      selector: (state: NoInfer<TableState<TFeatures>>) => TSubSelected
-      children:
-        | ((state: Readonly<TSubSelected>) => VNode | Array<VNode>)
-        | VNode
-        | Array<VNode>
-    }): VNode | Array<VNode>
-  }
-  /**
-   * The selected state of the table. This state may not match the structure of
-   * the full table state because it is selected by the selector function that
-   * you pass as the 2nd argument to `useTable`.
-   *
-   * @example
-   * const table = useTable(options, (state) => ({ globalFilter: state.globalFilter })) // only globalFilter is part of the selected state
-   *
-   * console.log(table.state.globalFilter)
+  /** Creates a reactive render boundary. The child function reads the table
+   * atoms it needs, so Vue only tracks those atom reads.
    */
-  readonly state: Readonly<TSelected>
+  Subscribe: (props: {
+    children: (atoms: Table<TFeatures, TData>['atoms']) => VNode | Array<VNode>
+  }) => VNode | Array<VNode>
 }
 
 /**
@@ -119,34 +67,28 @@ export type VueTable<
  *
  * Table options may contain Vue refs or computed values. The adapter unwraps
  * those reactive inputs, watches them with synchronous flushing, and keeps the
- * table options in sync. The optional selector projects from `table.store` and
- * exposes the selected value on `table.state`.
+ * table options in sync. Use `table.Subscribe` or native Vue computed values
+ * around `table.atoms.<slice>.get()` for selected reactive reads.
  *
  * @example
  * ```ts
  * const table = useTable(
  *   {
  *     features,
- *     rowModels: {},
  *     columns,
  *     data,
  *   },
- *   (state) => ({ pagination: state.pagination }),
  * )
- *
- * table.state.pagination
  * ```
  */
 export function useTable<
   TFeatures extends TableFeatures,
   TData extends RowData,
-  TSelected = TableState<TFeatures>,
 >(
   tableOptions:
     | TableOptions<TFeatures, TData>
     | TableOptionsWithReactiveData<TFeatures, TData>,
-  selector?: (state: TableState<TFeatures>) => TSelected,
-): VueTable<TFeatures, TData, TSelected> {
+): VueTable<TFeatures, TData> {
   const syncTableOptions = (
     table: Table<TFeatures, TData>,
     options: TableOptionsWithReactiveData<TFeatures, TData>,
@@ -156,9 +98,11 @@ export function useTable<
     )
   }
 
+  const reactivity = vueReactivity()
+
   const mergedOptions = mergeProxy(tableOptions, {
     features: {
-      coreReativityFeature: vueReactivity(),
+      coreReactivityFeature: reactivity,
       ...(unref(tableOptions.features) ?? {}),
     },
   }) as TableOptionsWithReactiveData<TFeatures, TData>
@@ -177,7 +121,11 @@ export function useTable<
   ) as TableOptions<TFeatures, TData>
 
   const coreTable = constructTable(resolvedOptions)
-  const table = coreTable as unknown as VueTable<TFeatures, TData, TSelected>
+  const table = coreTable as unknown as VueTable<TFeatures, TData>
+
+  if (getCurrentScope()) {
+    onScopeDispose(() => reactivity.unmount?.())
+  }
 
   watch(
     () => getReactiveOptionDeps(mergedOptions),
@@ -222,30 +170,11 @@ export function useTable<
     { immediate: true },
   )
 
-  table.Subscribe = ((props: {
-    source?: SubscribeSource<unknown>
-    selector?: ((state: unknown) => unknown) | undefined
-    children:
-      | ((state: Readonly<unknown>) => VNode | Array<VNode>)
-      | VNode
-      | Array<VNode>
+  table.Subscribe = (props: {
+    children: (atoms: Table<TFeatures, TData>['atoms']) => VNode | Array<VNode>
   }) => {
-    const source = props.source ?? table.store
-    const selected = useSelector(source as never, props.selector as never, {
-      compare: shallow,
-    })
-    if (typeof props.children === 'function') {
-      return props.children(selected.value as Readonly<unknown>)
-    }
-    return props.children
-  }) as VueTable<TFeatures, TData, TSelected>['Subscribe']
-
-  const stateStore = useSelector(table.store, selector)
-
-  return {
-    ...table,
-    get state() {
-      return stateStore.value
-    },
+    return props.children(table.atoms)
   }
+
+  return table
 }