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

package/src/merge-objects.ts

@@ -0,0 +1,43 @@
+/**
+ * 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 function mergeObjects<T>(source: T): T
+export function mergeObjects<T, U>(source: T, source1: U): T & U
+export function mergeObjects<T, U, V>(
+  source: T,
+  source1: U,
+  source2: V,
+): T & U & V
+export function mergeObjects<T, U, V, W>(
+  source: T,
+  source1: U,
+  source2: V,
+  source3: W,
+): T & U & V & W
+export function mergeObjects(...sources: any): any {
+  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/src/render-component.ts

@@ -1,23 +1,55 @@
-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 class RenderComponentConfig<TComponent extends SvelteComponent> {
+export class RenderComponentConfig<TComponent extends Component> {
   constructor(
-    public component: ComponentType<TComponent>,
-    public props: ComponentProps<TComponent> | Record<string, never> = {}
+    public component: TComponent,
+    public props?: ComponentProps<TComponent> | Record<string, never>,
+  ) {}
+}
+
+/**
+ * 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<TProps> {
+  constructor(
+    public snippet: Snippet<[TProps]>,
+    public params?: TProps,
   ) {}
 }
 
 /**
  * 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.
@@ -35,7 +67,39 @@ export class RenderComponentConfig<TComponent extends SvelteComponent> {
  * ```
  * @see {@link https://tanstack.com/table/latest/docs/guide/column-defs}
  */
-export const renderComponent = <TComponent extends SvelteComponent>(
-  component: ComponentType<TComponent>,
-  props: ComponentProps<TComponent>
+export const renderComponent = <
+  TComponent extends Component<any>,
+  TProps extends ComponentProps<TComponent>,
+>(
+  component: TComponent,
+  props?: TProps,
 ) => 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 = <TProps>(
+  snippet: Snippet<[TProps]>,
+  params?: TProps,
+) => new RenderSnippetConfig(snippet, params)

package/dist/flex-render.svelte

@@ -1,17 +0,0 @@
-<script
-  lang="ts"
-  generics="TData, TValue, TContext extends HeaderContext<TData, TValue> | CellContext<TData, TValue>"
->import { RenderComponentConfig } from "./render-component";
-let { content, context } = $props();
-</script>
-
-{#if typeof content === 'string'}
-  {content}
-{:else if content instanceof Function}
-  {@const     result = content(context as any)}
-  {#if result instanceof RenderComponentConfig}
-    <svelte:component this={result.component} {...result.props} />
-  {:else}
-    {result}
-  {/if}
-{/if}

package/dist/flex-render.svelte.d.ts

@@ -1,28 +0,0 @@
-/// <reference types="svelte" />
-import type { CellContext, ColumnDefTemplate, HeaderContext } from '@tanstack/table-core';
-declare class __sveltets_Render<TData, TValue, TContext extends HeaderContext<TData, TValue> | CellContext<TData, TValue>> {
-    props(): {
-        /** The cell or header field of the current cell's column definition. */
-        content?: (TContext extends HeaderContext<TData, TValue> ? ColumnDefTemplate<HeaderContext<TData, TValue>> : TContext extends CellContext<TData, TValue> ? ColumnDefTemplate<CellContext<TData, TValue>> : never) | undefined;
-        /** The result of the `getContext()` function of the header or cell */
-        context: TContext;
-    };
-    events(): {} & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots(): {};
-    bindings(): "";
-    exports(): {};
-}
-interface $$IsomorphicComponent {
-    new <TData, TValue, TContext extends HeaderContext<TData, TValue> | CellContext<TData, TValue>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TData, TValue, TContext>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TData, TValue, TContext>['props']>, ReturnType<__sveltets_Render<TData, TValue, TContext>['events']>, ReturnType<__sveltets_Render<TData, TValue, TContext>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<TData, TValue, TContext>['bindings']>;
-    } & ReturnType<__sveltets_Render<TData, TValue, TContext>['exports']>;
-    <TData, TValue, TContext extends HeaderContext<TData, TValue> | CellContext<TData, TValue>>(internal: unknown, props: ReturnType<__sveltets_Render<TData, TValue, TContext>['props']> & {
-        $$events?: ReturnType<__sveltets_Render<TData, TValue, TContext>['events']>;
-    }): ReturnType<__sveltets_Render<TData, TValue, TContext>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any, any, any>['bindings']>;
-}
-declare const FlexRender: $$IsomorphicComponent;
-type FlexRender<TData, TValue, TContext extends HeaderContext<TData, TValue> | CellContext<TData, TValue>> = InstanceType<typeof FlexRender<TData, TValue, TContext>>;
-export default FlexRender;

package/dist/table.svelte.d.ts

@@ -1,36 +0,0 @@
-import { type RowData, type TableOptions } from '@tanstack/table-core';
-/**
- * Creates a reactive TanStack table object for Svelte.
- * @param options Table options to create the table with.
- * @returns A reactive table object.
- * @example
- * ```svelte
- * <script>
- *   const table = createSvelteTable({ ... })
- * </script>
- *
- * <table>
- *   <thead>
- *     {#each table.getHeaderGroups() as headerGroup}
- *       <tr>
- *         {#each headerGroup.headers as header}
- *           <th colspan={header.colSpan}>
- *         	   <FlexRender content={header.column.columnDef.header} context={header.getContext()} />
- *         	 </th>
- *         {/each}
- *       </tr>
- *     {/each}
- *   </thead>
- * 	 <!-- ... -->
- * </table>
- * ```
- */
-export declare function createSvelteTable<TData extends RowData>(options: TableOptions<TData>): import("@tanstack/table-core").Table<TData>;
-/**
- * Merges objects together while keeping their getters alive.
- * Taken from SolidJS: {@link 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/table.svelte.js

@@ -1,87 +0,0 @@
-import { createTable, } from '@tanstack/table-core';
-/**
- * Creates a reactive TanStack table object for Svelte.
- * @param options Table options to create the table with.
- * @returns A reactive table object.
- * @example
- * ```svelte
- * <script>
- *   const table = createSvelteTable({ ... })
- * </script>
- *
- * <table>
- *   <thead>
- *     {#each table.getHeaderGroups() as headerGroup}
- *       <tr>
- *         {#each headerGroup.headers as header}
- *           <th colspan={header.colSpan}>
- *         	   <FlexRender content={header.column.columnDef.header} context={header.getContext()} />
- *         	 </th>
- *         {/each}
- *       </tr>
- *     {/each}
- *   </thead>
- * 	 <!-- ... -->
- * </table>
- * ```
- */
-export function createSvelteTable(options) {
-    const resolvedOptions = mergeObjects({
-        state: {},
-        onStateChange() { },
-        renderFallbackValue: null,
-        mergeOptions: (defaultOptions, options) => {
-            return mergeObjects(defaultOptions, options);
-        },
-    }, options);
-    const table = createTable(resolvedOptions);
-    let state = $state(table.initialState);
-    function updateOptions() {
-        table.setOptions(prev => {
-            return mergeObjects(prev, options, {
-                state: mergeObjects(state, options.state || {}),
-                onStateChange: (updater) => {
-                    if (updater instanceof Function)
-                        state = updater(state);
-                    else
-                        state = mergeObjects(state, updater);
-                    options.onStateChange?.(updater);
-                },
-            });
-        });
-    }
-    updateOptions();
-    $effect.pre(() => {
-        updateOptions();
-    });
-    return table;
-}
-export function mergeObjects(...sources) {
-    const target = {};
-    for (let i = 0; i < sources.length; i++) {
-        let source = sources[i];
-        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();
-                            v = (s || {})[key];
-                            if (v !== undefined)
-                                return v;
-                        }
-                    },
-                });
-            }
-        }
-    }
-    return target;
-}

package/src/flex-render.svelte

@@ -1,35 +0,0 @@
-<script
-  lang="ts"
-  generics="TData, TValue, TContext extends HeaderContext<TData, TValue> | CellContext<TData, TValue>"
->
-  import type {
-    CellContext,
-    ColumnDefTemplate,
-    HeaderContext,
-  } from '@tanstack/table-core'
-  import { RenderComponentConfig } from './render-component'
-
-  type Props = {
-    /** The cell or header field of the current cell's column definition. */
-    content?: TContext extends HeaderContext<TData, TValue>
-      ? ColumnDefTemplate<HeaderContext<TData, TValue>>
-      : TContext extends CellContext<TData, TValue>
-        ? ColumnDefTemplate<CellContext<TData, TValue>>
-        : never
-    /** The result of the `getContext()` function of the header or cell */
-    context: TContext
-  }
-
-  let { content, context }: Props = $props()
-</script>
-
-{#if typeof content === 'string'}
-  {content}
-{:else if content instanceof Function}
-  {@const     result = content(context as any)}
-  {#if result instanceof RenderComponentConfig}
-    <svelte:component this={result.component} {...result.props} />
-  {:else}
-    {result}
-  {/if}
-{/if}

package/src/table.svelte.ts

@@ -1,121 +0,0 @@
-import {
-  createTable,
-  type RowData,
-  type TableOptions,
-  type TableOptionsResolved,
-  type TableState,
-} from '@tanstack/table-core'
-
-/**
- * Creates a reactive TanStack table object for Svelte.
- * @param options Table options to create the table with.
- * @returns A reactive table object.
- * @example
- * ```svelte
- * <script>
- *   const table = createSvelteTable({ ... })
- * </script>
- *
- * <table>
- *   <thead>
- *     {#each table.getHeaderGroups() as headerGroup}
- *       <tr>
- *         {#each headerGroup.headers as header}
- *           <th colspan={header.colSpan}>
- *         	   <FlexRender content={header.column.columnDef.header} context={header.getContext()} />
- *         	 </th>
- *         {/each}
- *       </tr>
- *     {/each}
- *   </thead>
- * 	 <!-- ... -->
- * </table>
- * ```
- */
-export function createSvelteTable<TData extends RowData>(
-  options: TableOptions<TData>
-) {
-  const resolvedOptions: TableOptionsResolved<TData> = mergeObjects(
-    {
-      state: {},
-      onStateChange() {},
-      renderFallbackValue: null,
-      mergeOptions: (
-        defaultOptions: TableOptions<TData>,
-        options: Partial<TableOptions<TData>>
-      ) => {
-        return mergeObjects(defaultOptions, options)
-      },
-    },
-    options
-  )
-
-  const table = createTable(resolvedOptions)
-  let state = $state<Partial<TableState>>(table.initialState)
-
-  function updateOptions() {
-    table.setOptions(prev => {
-      return mergeObjects(prev, options, {
-        state: mergeObjects(state, options.state || {}),
-        onStateChange: (updater: any) => {
-          if (updater instanceof Function) state = updater(state)
-          else state = mergeObjects(state, updater)
-
-          options.onStateChange?.(updater)
-        },
-      })
-    })
-  }
-
-  updateOptions()
-
-  $effect.pre(() => {
-    updateOptions()
-  })
-
-  return table
-}
-
-/**
- * Merges objects together while keeping their getters alive.
- * Taken from SolidJS: {@link https://github.com/solidjs/solid/blob/24abc825c0996fd2bc8c1de1491efe9a7e743aff/packages/solid/src/server/rendering.ts#L82-L115}
- * */
-export function mergeObjects<T>(source: T): T
-export function mergeObjects<T, U>(source: T, source1: U): T & U
-export function mergeObjects<T, U, V>(
-  source: T,
-  source1: U,
-  source2: V
-): T & U & V
-export function mergeObjects<T, U, V, W>(
-  source: T,
-  source1: U,
-  source2: V,
-  source3: W
-): T & U & V & W
-export function mergeObjects(...sources: any): any {
-  const target = {}
-  for (let i = 0; i < sources.length; i++) {
-    let source = sources[i]
-    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()
-              v = (s || {})[key]
-              if (v !== undefined) return v
-            }
-          },
-        })
-      }
-    }
-  }
-  return target
-}