@tanstack/svelte-table 9.0.0-alpha.2 → 9.0.0-alpha.26

package/dist/createTableHook.svelte.d.ts

@@ -0,0 +1,236 @@
+import FlexRenderSvelte from './FlexRender.svelte';
+import type { SvelteTable } from './createTable.svelte';
+import type { Component, Snippet } from 'svelte';
+import type { AccessorFn, AccessorFnColumnDef, AccessorKeyColumnDef, Cell, CellContext, CellData, Column, ColumnDef, DeepKeys, DeepValue, DisplayColumnDef, GroupColumnDef, Header, IdentifiedColumnDef, NoInfer, Row, RowData, Table, TableFeatures, TableOptions, TableState } from '@tanstack/table-core';
+type ComponentType<T extends Record<string, any>> = Component<T>;
+/**
+ * Enhanced CellContext with pre-bound cell components.
+ * The `cell` property includes the registered cellComponents.
+ */
+export type AppCellContext<TFeatures extends TableFeatures, TData extends RowData, TValue extends CellData, TCellComponents extends Record<string, ComponentType<any>>> = {
+    cell: Cell<TFeatures, TData, TValue> & TCellComponents & {
+        FlexRender: typeof FlexRenderSvelte;
+    };
+    column: Column<TFeatures, TData, TValue>;
+    getValue: CellContext<TFeatures, TData, TValue>['getValue'];
+    renderValue: CellContext<TFeatures, TData, TValue>['renderValue'];
+    row: Row<TFeatures, TData>;
+    table: Table<TFeatures, TData>;
+};
+/**
+ * Enhanced HeaderContext with pre-bound header components.
+ * The `header` property includes the registered headerComponents.
+ */
+export type AppHeaderContext<TFeatures extends TableFeatures, TData extends RowData, TValue extends CellData, THeaderComponents extends Record<string, ComponentType<any>>> = {
+    column: Column<TFeatures, TData, TValue>;
+    header: Header<TFeatures, TData, TValue> & THeaderComponents & {
+        FlexRender: typeof FlexRenderSvelte;
+    };
+    table: Table<TFeatures, TData>;
+};
+/**
+ * Template type for column definitions that can be a string or a function.
+ */
+type AppColumnDefTemplate<TProps extends object> = string | ((props: TProps) => any);
+/**
+ * Enhanced column definition base with pre-bound components in cell/header/footer contexts.
+ */
+type AppColumnDefBase<TFeatures extends TableFeatures, TData extends RowData, TValue extends CellData, TCellComponents extends Record<string, ComponentType<any>>, THeaderComponents extends Record<string, ComponentType<any>>> = Omit<IdentifiedColumnDef<TFeatures, TData, TValue>, 'cell' | 'header' | 'footer'> & {
+    cell?: AppColumnDefTemplate<AppCellContext<TFeatures, TData, TValue, TCellComponents>>;
+    header?: AppColumnDefTemplate<AppHeaderContext<TFeatures, TData, TValue, THeaderComponents>>;
+    footer?: AppColumnDefTemplate<AppHeaderContext<TFeatures, TData, TValue, THeaderComponents>>;
+};
+/**
+ * Enhanced display column definition with pre-bound components.
+ */
+type AppDisplayColumnDef<TFeatures extends TableFeatures, TData extends RowData, TCellComponents extends Record<string, ComponentType<any>>, THeaderComponents extends Record<string, ComponentType<any>>> = Omit<DisplayColumnDef<TFeatures, TData, unknown>, 'cell' | 'header' | 'footer'> & {
+    cell?: AppColumnDefTemplate<AppCellContext<TFeatures, TData, unknown, TCellComponents>>;
+    header?: AppColumnDefTemplate<AppHeaderContext<TFeatures, TData, unknown, THeaderComponents>>;
+    footer?: AppColumnDefTemplate<AppHeaderContext<TFeatures, TData, unknown, THeaderComponents>>;
+};
+/**
+ * Enhanced group column definition with pre-bound components.
+ */
+type AppGroupColumnDef<TFeatures extends TableFeatures, TData extends RowData, TCellComponents extends Record<string, ComponentType<any>>, THeaderComponents extends Record<string, ComponentType<any>>> = Omit<GroupColumnDef<TFeatures, TData, unknown>, 'cell' | 'header' | 'footer' | 'columns'> & {
+    cell?: AppColumnDefTemplate<AppCellContext<TFeatures, TData, unknown, TCellComponents>>;
+    header?: AppColumnDefTemplate<AppHeaderContext<TFeatures, TData, unknown, THeaderComponents>>;
+    footer?: AppColumnDefTemplate<AppHeaderContext<TFeatures, TData, unknown, THeaderComponents>>;
+    columns?: Array<ColumnDef<TFeatures, TData, unknown>>;
+};
+/**
+ * Enhanced column helper with pre-bound components in cell/header/footer contexts.
+ * This enables TypeScript to know about the registered components when defining columns.
+ */
+export type AppColumnHelper<TFeatures extends TableFeatures, TData extends RowData, TCellComponents extends Record<string, ComponentType<any>>, THeaderComponents extends Record<string, ComponentType<any>>> = {
+    /**
+     * Creates a data column definition with an accessor key or function.
+     * The cell, header, and footer contexts include pre-bound components.
+     */
+    accessor: <TAccessor extends AccessorFn<TData> | DeepKeys<TData>, TValue extends TAccessor extends AccessorFn<TData, infer TReturn> ? TReturn : TAccessor extends DeepKeys<TData> ? DeepValue<TData, TAccessor> : never>(accessor: TAccessor, column: TAccessor extends AccessorFn<TData> ? AppColumnDefBase<TFeatures, TData, TValue, TCellComponents, THeaderComponents> & {
+        id: string;
+    } : AppColumnDefBase<TFeatures, TData, TValue, TCellComponents, THeaderComponents>) => TAccessor extends AccessorFn<TData> ? AccessorFnColumnDef<TFeatures, TData, TValue> : AccessorKeyColumnDef<TFeatures, TData, TValue>;
+    /**
+     * Wraps an array of column definitions to preserve each column's individual TValue type.
+     */
+    columns: <TColumns extends ReadonlyArray<ColumnDef<TFeatures, TData, any>>>(columns: [...TColumns]) => Array<ColumnDef<TFeatures, TData, any>> & [...TColumns];
+    /**
+     * Creates a display column definition for non-data columns.
+     * The cell, header, and footer contexts include pre-bound components.
+     */
+    display: (column: AppDisplayColumnDef<TFeatures, TData, TCellComponents, THeaderComponents>) => DisplayColumnDef<TFeatures, TData, unknown>;
+    /**
+     * Creates a group column definition with nested child columns.
+     * The cell, header, and footer contexts include pre-bound components.
+     */
+    group: (column: AppGroupColumnDef<TFeatures, TData, TCellComponents, THeaderComponents>) => GroupColumnDef<TFeatures, TData, unknown>;
+};
+/**
+ * Options for creating a table hook with pre-bound components and default table options.
+ * Extends all TableOptions except 'columns' | 'data' | 'store' | 'state' | 'initialState'.
+ */
+export type CreateTableHookOptions<TFeatures extends TableFeatures, TTableComponents extends Record<string, ComponentType<any>>, TCellComponents extends Record<string, ComponentType<any>>, THeaderComponents extends Record<string, ComponentType<any>>> = Omit<TableOptions<TFeatures, any>, 'columns' | 'data' | 'store' | 'state' | 'initialState'> & {
+    /**
+     * Table-level components that need access to the table instance.
+     * These are available directly on the table object returned by createAppTable.
+     * Use `useTableContext()` inside these components.
+     * @example { PaginationControls, GlobalFilter, RowCount }
+     */
+    tableComponents?: TTableComponents;
+    /**
+     * Cell-level components that need access to the cell instance.
+     * These are available on the cell object passed to AppCell's children.
+     * Use `useCellContext()` inside these components.
+     * @example { TextCell, NumberCell, DateCell, CurrencyCell }
+     */
+    cellComponents?: TCellComponents;
+    /**
+     * Header-level components that need access to the header instance.
+     * These are available on the header object passed to AppHeader/AppFooter's children.
+     * Use `useHeaderContext()` inside these components.
+     * @example { SortIndicator, ColumnFilter, ResizeHandle }
+     */
+    headerComponents?: THeaderComponents;
+};
+/**
+ * Extended table API returned by createAppTable with all App wrapper components.
+ */
+export type AppSvelteTable<TFeatures extends TableFeatures, TData extends RowData, TSelected, TTableComponents extends Record<string, ComponentType<any>>, TCellComponents extends Record<string, ComponentType<any>>, THeaderComponents extends Record<string, ComponentType<any>>> = SvelteTable<TFeatures, TData, TSelected> & NoInfer<TTableComponents> & {
+    /**
+     * Root wrapper component that provides table context.
+     * @example
+     * ```svelte
+     * <table.AppTable>
+     *   <table>...</table>
+     * </table.AppTable>
+     * ```
+     */
+    AppTable: Component<{
+        children: Snippet;
+    }>;
+    /**
+     * Wraps a cell and provides cell context with pre-bound cellComponents.
+     * @example
+     * ```svelte
+     * <table.AppCell cell={cell}>
+     *   {#snippet children(c)}
+     *     <td><c.TextCell /></td>
+     *   {/snippet}
+     * </table.AppCell>
+     * ```
+     */
+    AppCell: Component<{
+        cell: Cell<TFeatures, TData, any>;
+        children: Snippet<[
+            Cell<TFeatures, TData, any> & NoInfer<TCellComponents> & {
+                FlexRender: typeof FlexRenderSvelte;
+            }
+        ]>;
+    }>;
+    /**
+     * Wraps a header and provides header context with pre-bound headerComponents.
+     * @example
+     * ```svelte
+     * <table.AppHeader header={header}>
+     *   {#snippet children(h)}
+     *     <th><h.SortIndicator /></th>
+     *   {/snippet}
+     * </table.AppHeader>
+     * ```
+     */
+    AppHeader: Component<{
+        header: Header<TFeatures, TData, any>;
+        children: Snippet<[
+            Header<TFeatures, TData, any> & NoInfer<THeaderComponents> & {
+                FlexRender: typeof FlexRenderSvelte;
+            }
+        ]>;
+    }>;
+    /**
+     * Wraps a footer and provides header context with pre-bound headerComponents.
+     * @example
+     * ```svelte
+     * <table.AppFooter header={footer}>
+     *   {#snippet children(f)}
+     *     <td><f.FlexRender /></td>
+     *   {/snippet}
+     * </table.AppFooter>
+     * ```
+     */
+    AppFooter: Component<{
+        header: Header<TFeatures, TData, any>;
+        children: Snippet<[
+            Header<TFeatures, TData, any> & NoInfer<THeaderComponents> & {
+                FlexRender: typeof FlexRenderSvelte;
+            }
+        ]>;
+    }>;
+    /**
+     * Convenience FlexRender component attached to the table instance.
+     */
+    FlexRender: typeof FlexRenderSvelte;
+};
+/**
+ * Creates a custom table hook with pre-bound components for composition.
+ *
+ * This is the table equivalent of TanStack Form's `createFormHook`. It allows you to:
+ * - Define features, row models, and default options once, shared across all tables
+ * - Register reusable table, cell, and header components
+ * - Access table/cell/header instances via context in those components
+ * - Get a `createAppTable` hook that returns an extended table with App wrapper components
+ * - Get a `createAppColumnHelper` function pre-bound to your features
+ *
+ * @example
+ * ```ts
+ * // hooks/table.ts
+ * export const {
+ *   createAppTable,
+ *   createAppColumnHelper,
+ *   useTableContext,
+ *   useCellContext,
+ *   useHeaderContext,
+ * } = createTableHook({
+ *   _features: tableFeatures({
+ *     rowPaginationFeature,
+ *     rowSortingFeature,
+ *     columnFilteringFeature,
+ *   }),
+ *   _rowModels: {
+ *     paginatedRowModel: createPaginatedRowModel(),
+ *     sortedRowModel: createSortedRowModel(sortFns),
+ *     filteredRowModel: createFilteredRowModel(filterFns),
+ *   },
+ *   tableComponents: { PaginationControls, RowCount },
+ *   cellComponents: { TextCell, NumberCell },
+ *   headerComponents: { SortIndicator, ColumnFilter },
+ * })
+ * ```
+ */
+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>;
+    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 {};

package/dist/createTableHook.svelte.js

@@ -0,0 +1,170 @@
+import { getContext, setContext } from 'svelte';
+import { createColumnHelper as coreCreateColumnHelper } from '@tanstack/table-core';
+import { createTable } from './createTable.svelte';
+import { mergeObjects } from './merge-objects';
+import { cellContextKey, headerContextKey, tableContextKey, } from './context-keys.js';
+import AppTableSvelte from './AppTable.svelte';
+import AppCellSvelte from './AppCell.svelte';
+import AppHeaderSvelte from './AppHeader.svelte';
+import FlexRenderSvelte from './FlexRender.svelte';
+// =============================================================================
+// createTableHook Factory
+// =============================================================================
+/**
+ * Creates a custom table hook with pre-bound components for composition.
+ *
+ * This is the table equivalent of TanStack Form's `createFormHook`. It allows you to:
+ * - Define features, row models, and default options once, shared across all tables
+ * - Register reusable table, cell, and header components
+ * - Access table/cell/header instances via context in those components
+ * - Get a `createAppTable` hook that returns an extended table with App wrapper components
+ * - Get a `createAppColumnHelper` function pre-bound to your features
+ *
+ * @example
+ * ```ts
+ * // hooks/table.ts
+ * export const {
+ *   createAppTable,
+ *   createAppColumnHelper,
+ *   useTableContext,
+ *   useCellContext,
+ *   useHeaderContext,
+ * } = createTableHook({
+ *   _features: tableFeatures({
+ *     rowPaginationFeature,
+ *     rowSortingFeature,
+ *     columnFilteringFeature,
+ *   }),
+ *   _rowModels: {
+ *     paginatedRowModel: createPaginatedRowModel(),
+ *     sortedRowModel: createSortedRowModel(sortFns),
+ *     filteredRowModel: createFilteredRowModel(filterFns),
+ *   },
+ *   tableComponents: { PaginationControls, RowCount },
+ *   cellComponents: { TextCell, NumberCell },
+ *   headerComponents: { SortIndicator, ColumnFilter },
+ * })
+ * ```
+ */
+export function createTableHook({ tableComponents, cellComponents, headerComponents, ...defaultTableOptions }) {
+    /**
+     * 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`).
+     */
+    function createAppColumnHelper() {
+        return coreCreateColumnHelper();
+    }
+    /**
+     * Access the table instance from within an `AppTable` wrapper.
+     * Use this in custom `tableComponents` passed to `createTableHook`.
+     * TFeatures is already known from the createTableHook call.
+     */
+    function useTableContext() {
+        const table = getContext(tableContextKey);
+        if (!table) {
+            throw new Error('`useTableContext` must be used within an `AppTable` component. ' +
+                'Make sure your component is wrapped with `<table.AppTable>...</table.AppTable>`.');
+        }
+        return table;
+    }
+    /**
+     * Access the cell instance from within an `AppCell` wrapper.
+     * Use this in custom `cellComponents` passed to `createTableHook`.
+     * TFeatures is already known from the createTableHook call.
+     */
+    function useCellContext() {
+        const cell = getContext(cellContextKey);
+        if (!cell) {
+            throw new Error('`useCellContext` must be used within an `AppCell` component. ' +
+                'Make sure your component is wrapped with `<table.AppCell cell={cell}>...</table.AppCell>`.');
+        }
+        return cell;
+    }
+    /**
+     * Access the header instance from within an `AppHeader` or `AppFooter` wrapper.
+     * Use this in custom `headerComponents` passed to `createTableHook`.
+     * TFeatures is already known from the createTableHook call.
+     */
+    function useHeaderContext() {
+        const header = getContext(headerContextKey);
+        if (!header) {
+            throw new Error('`useHeaderContext` must be used within an `AppHeader` or `AppFooter` component.');
+        }
+        return header;
+    }
+    /**
+     * Enhanced createTable hook that returns a table with App wrapper components
+     * and pre-bound tableComponents attached directly to the table object.
+     *
+     * Default options from createTableHook are automatically merged with
+     * the options passed here. Options passed here take precedence.
+     *
+     * TFeatures is already known from the createTableHook call; TData is inferred from the data prop.
+     */
+    function createAppTable(tableOptions, selector) {
+        // Merge default options with provided options (provided takes precedence)
+        const mergedTableOptions = mergeObjects(defaultTableOptions, tableOptions);
+        const table = createTable(mergedTableOptions, selector);
+        // Build cellComponents with FlexRender included
+        const cellComponentsWithFlexRender = {
+            FlexRender: FlexRenderSvelte,
+            ...(cellComponents ?? {}),
+        };
+        // Build headerComponents with FlexRender included
+        const headerComponentsWithFlexRender = {
+            FlexRender: FlexRenderSvelte,
+            ...(headerComponents ?? {}),
+        };
+        // Create wrapper components using the svelte-form (internal, props) => pattern.
+        // setContext is called in the closure — this runs during component
+        // initialization, so Svelte's context API works correctly.
+        // With keyed {#each} blocks, components are recreated on reorder,
+        // so context is always fresh.
+        const AppTable = ((internal, props) => {
+            setContext(tableContextKey, table);
+            return AppTableSvelte(internal, { ...props });
+        });
+        const AppCell = ((internal, { children, cell, ...rest }) => {
+            setContext(cellContextKey, cell);
+            return AppCellSvelte(internal, {
+                cell,
+                cellComponents: cellComponentsWithFlexRender,
+                children,
+            });
+        });
+        const AppHeader = ((internal, { children, header, ...rest }) => {
+            setContext(headerContextKey, header);
+            return AppHeaderSvelte(internal, {
+                header,
+                headerComponents: headerComponentsWithFlexRender,
+                children,
+            });
+        });
+        // AppFooter reuses AppHeaderSvelte (footers use Header type in table-core)
+        const AppFooter = ((internal, { children, header, ...rest }) => {
+            setContext(headerContextKey, header);
+            return AppHeaderSvelte(internal, {
+                header,
+                headerComponents: headerComponentsWithFlexRender,
+                children,
+            });
+        });
+        // Combine everything into the extended table API
+        return Object.assign(table, {
+            AppTable,
+            AppCell,
+            AppHeader,
+            AppFooter,
+            FlexRender: FlexRenderSvelte,
+            ...(tableComponents ?? {}),
+        });
+    }
+    return {
+        appFeatures: defaultTableOptions._features,
+        createAppColumnHelper,
+        createAppTable,
+        useTableContext,
+        useCellContext,
+        useHeaderContext,
+    };
+}

package/dist/createTableState.svelte.d.ts

@@ -0,0 +1,2 @@
+import type { Updater } from '@tanstack/table-core';
+export declare function createTableState<TState>(initialValue: TState): [() => TState, (updater: Updater<TState>) => void];

package/dist/createTableState.svelte.js

@@ -0,0 +1,12 @@
+export function createTableState(initialValue) {
+    let value = $state(initialValue);
+    return [
+        () => value,
+        (updater) => {
+            if (updater instanceof Function)
+                value = updater(value);
+            else
+                value = updater;
+        },
+    ];
+}

package/dist/index.d.ts

@@ -1,4 +1,9 @@
 export * from '@tanstack/table-core';
-export { default as FlexRender } from './flex-render.svelte';
-export { renderComponent } from './render-component';
-export { createSvelteTable } from './table.svelte';
+export { createTable } from './createTable.svelte';
+export type { SvelteTable } from './createTable.svelte';
+export { createTableHook } from './createTableHook.svelte';
+export type { AppCellContext, AppColumnHelper, AppHeaderContext, AppSvelteTable, CreateTableHookOptions, } from './createTableHook.svelte';
+export { createTableState } from './createTableState.svelte';
+export { default as FlexRender } from './FlexRender.svelte';
+export { default as Subscribe } from './Subscribe.svelte';
+export { renderComponent, renderSnippet } from './render-component';

package/dist/index.js

@@ -1,4 +1,7 @@
 export * from '@tanstack/table-core';
-export { default as FlexRender } from './flex-render.svelte';
-export { renderComponent } from './render-component';
-export { createSvelteTable } from './table.svelte';
+export { createTable } from './createTable.svelte';
+export { createTableHook } from './createTableHook.svelte';
+export { createTableState } from './createTableState.svelte';
+export { default as FlexRender } from './FlexRender.svelte';
+export { default as Subscribe } from './Subscribe.svelte';
+export { renderComponent, renderSnippet } from './render-component';

package/dist/merge-objects.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Merges objects together while keeping their getters alive.
+ * Taken from SolidJS: {https://github.com/solidjs/solid/blob/24abc825c0996fd2bc8c1de1491efe9a7e743aff/packages/solid/src/server/rendering.ts#L82-L115}
+ * */
+export declare function mergeObjects<T>(source: T): T;
+export declare function mergeObjects<T, U>(source: T, source1: U): T & U;
+export declare function mergeObjects<T, U, V>(source: T, source1: U, source2: V): T & U & V;
+export declare function mergeObjects<T, U, V, W>(source: T, source1: U, source2: V, source3: W): T & U & V & W;

package/dist/merge-objects.js

@@ -0,0 +1,29 @@
+export function mergeObjects(...sources) {
+    const target = {};
+    for (let source of sources) {
+        if (typeof source === 'function')
+            source = source();
+        if (source) {
+            const descriptors = Object.getOwnPropertyDescriptors(source);
+            for (const key in descriptors) {
+                if (key in target)
+                    continue;
+                Object.defineProperty(target, key, {
+                    enumerable: true,
+                    get() {
+                        for (let i = sources.length - 1; i >= 0; i--) {
+                            let v, s = sources[i];
+                            if (typeof s === 'function')
+                                s = s();
+                            // eslint-disable-next-line prefer-const
+                            v = (s || {})[key];
+                            if (v !== undefined)
+                                return v;
+                        }
+                    },
+                });
+            }
+        }
+    }
+    return target;
+}

package/dist/render-component.d.ts

@@ -1,20 +1,50 @@
-import type { SvelteComponent, ComponentType, ComponentProps } from 'svelte';
+import type { Component, ComponentProps, Snippet } from 'svelte';
 /**
- * A helper class to make it easy to identify Svelte components in `columnDef.cell` and `columnDef.header` properties.
+ * A helper class to make it easy to identify Svelte components in
+ * `columnDef.cell` and `columnDef.header` properties.
+ *
+ * > NOTE: This class should only be used internally by the adapter. If you're
+ * reading this and you don't know what this is for, you probably don't need it.
+ *
  * @example
  * ```svelte
- * {#if cell.column.columnDef.cell(cell.getContext()) instanceof RenderComponentConfig}
- *   <svelte:component this={columnDef.cell.component} {...columnDef.cell.props} />
+ * {@const result = content(context as any)}
+ * {#if result instanceof RenderComponentConfig}
+ *   {@const { component: Component, props } = result}
+ *   <Component {...props} />
  * {/if}
  * ```
  * */
-export declare class RenderComponentConfig<TComponent extends SvelteComponent> {
-    component: ComponentType<TComponent>;
-    props: ComponentProps<TComponent> | Record<string, never>;
-    constructor(component: ComponentType<TComponent>, props?: ComponentProps<TComponent> | Record<string, never>);
+export declare class RenderComponentConfig<TComponent extends Component> {
+    component: TComponent;
+    props?: (ComponentProps<TComponent> | Record<string, never>) | undefined;
+    constructor(component: TComponent, props?: (ComponentProps<TComponent> | Record<string, never>) | undefined);
+}
+/**
+ * A helper class to make it easy to identify Svelte Snippets in `columnDef.cell` and `columnDef.header` properties.
+ *
+ * > NOTE: This class should only be used internally by the adapter. If you're
+ * reading this and you don't know what this is for, you probably don't need it.
+ *
+ * @example
+ * ```svelte
+ * {@const result = content(context as any)}
+ * {#if result instanceof RenderSnippetConfig}
+ *   {@const { snippet, params } = result}
+ *   {@render snippet(params)}
+ * {/if}
+ * ```
+ * */
+export declare class RenderSnippetConfig<TProps> {
+    snippet: Snippet<[TProps]>;
+    params?: TProps | undefined;
+    constructor(snippet: Snippet<[TProps]>, params?: TProps | undefined);
 }
 /**
  * A helper function to help create cells from Svelte components through ColumnDef's `cell` and `header` properties.
+ *
+ * This is only to be used with Svelte Components - use `renderSnippet` for Svelte Snippets.
+ *
  * @param component A Svelte component
  * @param props The props to pass to `component`
  * @returns A `RenderComponentConfig` object that helps svelte-table know how to render the header/cell component.
@@ -32,4 +62,29 @@ export declare class RenderComponentConfig<TComponent extends SvelteComponent> {
  * ```
  * @see {@link https://tanstack.com/table/latest/docs/guide/column-defs}
  */
-export declare const renderComponent: <TComponent extends SvelteComponent<any, any, any>>(component: ComponentType<TComponent>, props: ComponentProps<TComponent>) => RenderComponentConfig<TComponent>;
+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.
+ *
+ * *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
+ * @example
+ * ```ts
+ * // +page.svelte
+ * const defaultColumns = [
+ *   columnHelper.accessor('name', {
+ *     cell: cell => renderSnippet(nameSnippet, { name: cell.row.name }),
+ *   }),
+ *   columnHelper.accessor('state', {
+ *     cell: cell => renderSnippet(stateSnippet, { state: cell.row.state }),
+ *   }),
+ * ]
+ * ```
+ * @see {@link https://tanstack.com/table/latest/docs/guide/column-defs}
+ */
+export declare const renderSnippet: <TProps>(snippet: Snippet<[TProps]>, params?: TProps) => RenderSnippetConfig<TProps>;

package/dist/render-component.js

@@ -1,20 +1,51 @@
 /**
- * A helper class to make it easy to identify Svelte components in `columnDef.cell` and `columnDef.header` properties.
+ * A helper class to make it easy to identify Svelte components in
+ * `columnDef.cell` and `columnDef.header` properties.
+ *
+ * > NOTE: This class should only be used internally by the adapter. If you're
+ * reading this and you don't know what this is for, you probably don't need it.
+ *
  * @example
  * ```svelte
- * {#if cell.column.columnDef.cell(cell.getContext()) instanceof RenderComponentConfig}
- *   <svelte:component this={columnDef.cell.component} {...columnDef.cell.props} />
+ * {@const result = content(context as any)}
+ * {#if result instanceof RenderComponentConfig}
+ *   {@const { component: Component, props } = result}
+ *   <Component {...props} />
  * {/if}
  * ```
  * */
 export class RenderComponentConfig {
-    constructor(component, props = {}) {
+    constructor(component, props) {
         this.component = component;
         this.props = props;
     }
 }
+/**
+ * A helper class to make it easy to identify Svelte Snippets in `columnDef.cell` and `columnDef.header` properties.
+ *
+ * > NOTE: This class should only be used internally by the adapter. If you're
+ * reading this and you don't know what this is for, you probably don't need it.
+ *
+ * @example
+ * ```svelte
+ * {@const result = content(context as any)}
+ * {#if result instanceof RenderSnippetConfig}
+ *   {@const { snippet, params } = result}
+ *   {@render snippet(params)}
+ * {/if}
+ * ```
+ * */
+export class RenderSnippetConfig {
+    constructor(snippet, params) {
+        this.snippet = snippet;
+        this.params = params;
+    }
+}
 /**
  * A helper function to help create cells from Svelte components through ColumnDef's `cell` and `header` properties.
+ *
+ * This is only to be used with Svelte Components - use `renderSnippet` for Svelte Snippets.
+ *
  * @param component A Svelte component
  * @param props The props to pass to `component`
  * @returns A `RenderComponentConfig` object that helps svelte-table know how to render the header/cell component.
@@ -33,3 +64,28 @@ export class RenderComponentConfig {
  * @see {@link https://tanstack.com/table/latest/docs/guide/column-defs}
  */
 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.
+ *
+ * *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
+ * @example
+ * ```ts
+ * // +page.svelte
+ * const defaultColumns = [
+ *   columnHelper.accessor('name', {
+ *     cell: cell => renderSnippet(nameSnippet, { name: cell.row.name }),
+ *   }),
+ *   columnHelper.accessor('state', {
+ *     cell: cell => renderSnippet(stateSnippet, { state: cell.row.state }),
+ *   }),
+ * ]
+ * ```
+ * @see {@link https://tanstack.com/table/latest/docs/guide/column-defs}
+ */
+export const renderSnippet = (snippet, params) => new RenderSnippetConfig(snippet, params);