@tanstack/svelte-table 9.0.0-beta.20 → 9.0.0-beta.22

package/dist/createTableHook.svelte.d.ts

@@ -189,6 +189,47 @@ export type AppSvelteTable<TFeatures extends TableFeatures, TData extends RowDat
      */
     FlexRender: typeof FlexRenderSvelte;
 };
+export interface CreateTableHookResult<TFeatures extends TableFeatures, TTableComponents extends Record<string, ComponentType<any>>, TCellComponents extends Record<string, ComponentType<any>>, THeaderComponents extends Record<string, ComponentType<any>>> {
+    /** The features object that was passed to `createTableHook`. */
+    appFeatures: TFeatures;
+    /**
+     * A column helper pre-bound to `TFeatures` and the registered components, so
+     * the cell/header/footer render props expose the bound components.
+     */
+    createAppColumnHelper: <TData extends RowData>() => AppColumnHelper<TFeatures, TData, TCellComponents, THeaderComponents>;
+    /**
+     * Creates a table with the `App*` wrapper components and registered
+     * `tableComponents` attached. `TData` is inferred from the `data` option.
+     */
+    createAppTable: <TData extends RowData, TSelected = TableState<TFeatures>>(tableOptions: Omit<TableOptions<TFeatures, TData>, 'features'>, selector?: (state: TableState<TFeatures>) => TSelected) => AppSvelteTable<TFeatures, TData, TSelected, TTableComponents, TCellComponents, THeaderComponents>;
+    /**
+     * Reads the table provided by the nearest `<table.AppTable>`. This is the same
+     * extended instance `createAppTable` returns, so the `App*` components and your
+     * `tableComponents` are available on it.
+     *
+     * Pass `TSelected` to match the selector you gave `createAppTable`, so
+     * `table.state` is typed as the selected slice. It cannot be inferred
+     * automatically (context does not carry the provider's generics), so it
+     * defaults to the full table state, which is correct for the common case of
+     * `createAppTable` without a selector.
+     */
+    useTableContext: <TData extends RowData = RowData, TSelected = TableState<TFeatures>>() => AppSvelteTable<TFeatures, TData, TSelected, TTableComponents, TCellComponents, THeaderComponents>;
+    /**
+     * Reads the cell provided by the nearest `<table.AppCell>`, extended with your
+     * `cellComponents` and a context-bound `FlexRender`.
+     */
+    useCellContext: <TValue extends CellData = CellData>() => Cell<TFeatures, any, TValue> & TCellComponents & {
+        FlexRender: typeof FlexRenderSvelte;
+    };
+    /**
+     * Reads the header provided by the nearest `<table.AppHeader>` /
+     * `<table.AppFooter>`, extended with your `headerComponents` and a
+     * context-bound `FlexRender`.
+     */
+    useHeaderContext: <TValue extends CellData = CellData>() => Header<TFeatures, any, TValue> & THeaderComponents & {
+        FlexRender: typeof FlexRenderSvelte;
+    };
+}
 /**
  * Creates a custom table hook with pre-bound components for composition.
  *
@@ -225,11 +266,4 @@ 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 = TableState<TFeatures>>(tableOptions: Omit<TableOptions<TFeatures, TData>, "features">, 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>;
-};
+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>): CreateTableHookResult<TFeatures, TTableComponents, TCellComponents, THeaderComponents>;

package/dist/createTableHook.svelte.js

@@ -65,6 +65,9 @@ export function createTableHook({ tableComponents, cellComponents, headerCompone
             throw new Error('`useTableContext` must be used within an `AppTable` component. ' +
                 'Make sure your component is wrapped with `<table.AppTable>...</table.AppTable>`.');
         }
+        // `<table.AppTable>` provides the extended table (the App* wrapper
+        // components and `tableComponents` are Object.assign-ed onto the same
+        // instance `createAppTable` returns), so this asserts the runtime shape.
         return table;
     }
     /**
@@ -78,6 +81,9 @@ export function createTableHook({ tableComponents, cellComponents, headerCompone
             throw new Error('`useCellContext` must be used within an `AppCell` component. ' +
                 'Make sure your component is wrapped with `<table.AppCell cell={cell}>...</table.AppCell>`.');
         }
+        // `<table.AppCell>` Object.assign-es `cellComponents` and `FlexRender` onto
+        // the same cell instance it puts in context, so this asserts the runtime
+        // shape.
         return cell;
     }
     /**
@@ -90,6 +96,8 @@ export function createTableHook({ tableComponents, cellComponents, headerCompone
         if (!header) {
             throw new Error('`useHeaderContext` must be used within an `AppHeader` or `AppFooter` component.');
         }
+        // `<table.AppHeader>` / `<table.AppFooter>` Object.assign `headerComponents`
+        // and `FlexRender` onto the same header instance they put in context.
         return header;
     }
     /**

package/dist/index.d.ts

@@ -2,7 +2,7 @@ export * from '@tanstack/table-core';
 export { createTable } from './createTable.svelte';
 export type { SvelteTable } from './createTable.svelte';
 export { createTableHook } from './createTableHook.svelte';
-export type { AppCellContext, AppColumnDefBase, AppColumnDefTemplate, AppColumnHelper, AppDisplayColumnDef, AppGroupColumnDef, AppHeaderContext, AppSvelteTable, ComponentType, CreateTableHookOptions, } from './createTableHook.svelte';
+export type { AppCellContext, AppColumnDefBase, AppColumnDefTemplate, AppColumnHelper, AppDisplayColumnDef, AppGroupColumnDef, AppHeaderContext, AppSvelteTable, ComponentType, CreateTableHookOptions, CreateTableHookResult, } from './createTableHook.svelte';
 export { createTableState } from './createTableState.svelte';
 export { default as FlexRender } from './FlexRender.svelte';
 export { subscribeTable, type SubscribeSource } from './subscribe';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/svelte-table",
-  "version": "9.0.0-beta.20",
+  "version": "9.0.0-beta.22",
   "description": "Headless UI for building powerful tables & datagrids for Svelte.",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -53,7 +53,7 @@
   ],
   "dependencies": {
     "@tanstack/svelte-store": "^0.12.0",
-    "@tanstack/table-core": "9.0.0-beta.20"
+    "@tanstack/table-core": "9.0.0-beta.21"
   },
   "devDependencies": {
     "@sveltejs/package": "^2.5.8",

package/src/createTableHook.svelte.ts

@@ -376,6 +376,84 @@ export type AppSvelteTable<
     FlexRender: typeof FlexRenderSvelte
   }
 
+export interface CreateTableHookResult<
+  TFeatures extends TableFeatures,
+  TTableComponents extends Record<string, ComponentType<any>>,
+  TCellComponents extends Record<string, ComponentType<any>>,
+  THeaderComponents extends Record<string, ComponentType<any>>,
+> {
+  /** The features object that was passed to `createTableHook`. */
+  appFeatures: TFeatures
+  /**
+   * A column helper pre-bound to `TFeatures` and the registered components, so
+   * the cell/header/footer render props expose the bound components.
+   */
+  createAppColumnHelper: <TData extends RowData>() => AppColumnHelper<
+    TFeatures,
+    TData,
+    TCellComponents,
+    THeaderComponents
+  >
+  /**
+   * Creates a table with the `App*` wrapper components and registered
+   * `tableComponents` attached. `TData` is inferred from the `data` option.
+   */
+  createAppTable: <TData extends RowData, TSelected = TableState<TFeatures>>(
+    tableOptions: Omit<TableOptions<TFeatures, TData>, 'features'>,
+    selector?: (state: TableState<TFeatures>) => TSelected,
+  ) => AppSvelteTable<
+    TFeatures,
+    TData,
+    TSelected,
+    TTableComponents,
+    TCellComponents,
+    THeaderComponents
+  >
+  /**
+   * Reads the table provided by the nearest `<table.AppTable>`. This is the same
+   * extended instance `createAppTable` returns, so the `App*` components and your
+   * `tableComponents` are available on it.
+   *
+   * Pass `TSelected` to match the selector you gave `createAppTable`, so
+   * `table.state` is typed as the selected slice. It cannot be inferred
+   * automatically (context does not carry the provider's generics), so it
+   * defaults to the full table state, which is correct for the common case of
+   * `createAppTable` without a selector.
+   */
+  useTableContext: <
+    TData extends RowData = RowData,
+    TSelected = TableState<TFeatures>,
+  >() => AppSvelteTable<
+    TFeatures,
+    TData,
+    TSelected,
+    TTableComponents,
+    TCellComponents,
+    THeaderComponents
+  >
+  /**
+   * Reads the cell provided by the nearest `<table.AppCell>`, extended with your
+   * `cellComponents` and a context-bound `FlexRender`.
+   */
+  useCellContext: <TValue extends CellData = CellData>() => Cell<
+    TFeatures,
+    any,
+    TValue
+  > &
+    TCellComponents & { FlexRender: typeof FlexRenderSvelte }
+  /**
+   * Reads the header provided by the nearest `<table.AppHeader>` /
+   * `<table.AppFooter>`, extended with your `headerComponents` and a
+   * context-bound `FlexRender`.
+   */
+  useHeaderContext: <TValue extends CellData = CellData>() => Header<
+    TFeatures,
+    any,
+    TValue
+  > &
+    THeaderComponents & { FlexRender: typeof FlexRenderSvelte }
+}
+
 // =============================================================================
 // createTableHook Factory
 // =============================================================================
@@ -431,7 +509,12 @@ export function createTableHook<
   TTableComponents,
   TCellComponents,
   THeaderComponents
->) {
+>): CreateTableHookResult<
+  TFeatures,
+  TTableComponents,
+  TCellComponents,
+  THeaderComponents
+> {
   /**
    * Create a column helper pre-bound to the features and components configured in this table hook.
    * The cell, header, and footer contexts include pre-bound components (e.g., `cell.TextCell`).
@@ -455,9 +538,16 @@ export function createTableHook<
    * Use this in custom `tableComponents` passed to `createTableHook`.
    * TFeatures is already known from the createTableHook call.
    */
-  function useTableContext<TData extends RowData = RowData>(): SvelteTable<
+  function useTableContext<
+    TData extends RowData = RowData,
+    TSelected = TableState<TFeatures>,
+  >(): AppSvelteTable<
     TFeatures,
-    TData
+    TData,
+    TSelected,
+    TTableComponents,
+    TCellComponents,
+    THeaderComponents
   > {
     const table = getContext(tableContextKey)
 
@@ -468,7 +558,17 @@ export function createTableHook<
       )
     }
 
-    return table as SvelteTable<TFeatures, TData>
+    // `<table.AppTable>` provides the extended table (the App* wrapper
+    // components and `tableComponents` are Object.assign-ed onto the same
+    // instance `createAppTable` returns), so this asserts the runtime shape.
+    return table as unknown as AppSvelteTable<
+      TFeatures,
+      TData,
+      TSelected,
+      TTableComponents,
+      TCellComponents,
+      THeaderComponents
+    >
   }
 
   /**
@@ -480,7 +580,8 @@ export function createTableHook<
     TFeatures,
     any,
     TValue
-  > {
+  > &
+    TCellComponents & { FlexRender: typeof FlexRenderSvelte } {
     const cell = getContext(cellContextKey)
 
     if (!cell) {
@@ -490,7 +591,11 @@ export function createTableHook<
       )
     }
 
-    return cell as Cell<TFeatures, any, TValue>
+    // `<table.AppCell>` Object.assign-es `cellComponents` and `FlexRender` onto
+    // the same cell instance it puts in context, so this asserts the runtime
+    // shape.
+    return cell as unknown as Cell<TFeatures, any, TValue> &
+      TCellComponents & { FlexRender: typeof FlexRenderSvelte }
   }
 
   /**
@@ -502,7 +607,8 @@ export function createTableHook<
     TFeatures,
     any,
     TValue
-  > {
+  > &
+    THeaderComponents & { FlexRender: typeof FlexRenderSvelte } {
     const header = getContext(headerContextKey)
 
     if (!header) {
@@ -511,7 +617,10 @@ export function createTableHook<
       )
     }
 
-    return header as Header<TFeatures, any, TValue>
+    // `<table.AppHeader>` / `<table.AppFooter>` Object.assign `headerComponents`
+    // and `FlexRender` onto the same header instance they put in context.
+    return header as unknown as Header<TFeatures, any, TValue> &
+      THeaderComponents & { FlexRender: typeof FlexRenderSvelte }
   }
 
   /**
@@ -626,7 +735,7 @@ export function createTableHook<
   }
 
   return {
-    appFeatures: defaultTableOptions.features as TFeatures,
+    appFeatures: defaultTableOptions.features,
     createAppColumnHelper,
     createAppTable,
     useTableContext,

package/src/index.ts

@@ -14,6 +14,7 @@ export type {
   AppSvelteTable,
   ComponentType,
   CreateTableHookOptions,
+  CreateTableHookResult,
 } from './createTableHook.svelte'
 export { createTableState } from './createTableState.svelte'
 export { default as FlexRender } from './FlexRender.svelte'