@tanstack/svelte-table 9.0.0-alpha.0 → 9.0.0-alpha.4

package/dist/flex-render.svelte

@@ -0,0 +1,35 @@
+<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/dist/flex-render.svelte.d.ts

@@ -0,0 +1,28 @@
+/// <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/index.d.ts

@@ -1,8 +1,4 @@
-import { RowData, TableOptions } from '@tanstack/table-core';
-import type { ComponentType } from 'svelte';
-import { Readable } from 'svelte/store';
-export { renderComponent } from './render-component';
 export * from '@tanstack/table-core';
-export declare function flexRender(component: any, props: any): ComponentType | null;
-type ReadableOrVal<T> = T | Readable<T>;
-export declare function createSvelteTable<TData extends RowData>(options: ReadableOrVal<TableOptions<TData>>): Readable<import("@tanstack/table-core").Table<TData>>;
+export { default as FlexRender } from './flex-render.svelte';
+export { renderComponent } from './render-component';
+export { createSvelteTable } from './table.svelte';

package/dist/index.js

@@ -1,94 +1,4 @@
-import { createTable, } from '@tanstack/table-core';
-import Placeholder from './placeholder';
-import { SvelteComponent } from 'svelte/internal';
-import { readable, writable, derived, get } from 'svelte/store';
-import { renderComponent } from './render-component';
-export { renderComponent } from './render-component';
 export * from '@tanstack/table-core';
-function isSvelteServerComponent(component) {
-    return (typeof component === 'object' &&
-        typeof component.$$render === 'function' &&
-        typeof component.render === 'function');
-}
-function isSvelteClientComponent(component) {
-    let isHMR = '__SVELTE_HMR' in window;
-    return (component.prototype instanceof SvelteComponent ||
-        (isHMR &&
-            component.name?.startsWith('Proxy<') &&
-            component.name?.endsWith('>')));
-}
-function isSvelteComponent(component) {
-    if (typeof document === 'undefined') {
-        return isSvelteServerComponent(component);
-    }
-    else {
-        return isSvelteClientComponent(component);
-    }
-}
-function wrapInPlaceholder(content) {
-    return renderComponent(Placeholder, { content });
-}
-export function flexRender(component, props) {
-    if (!component)
-        return null;
-    if (isSvelteComponent(component)) {
-        return renderComponent(component, props);
-    }
-    if (typeof component === 'function') {
-        const result = component(props);
-        if (result === null || result === undefined)
-            return null;
-        if (isSvelteComponent(result)) {
-            return renderComponent(result, props);
-        }
-        return wrapInPlaceholder(result);
-    }
-    return wrapInPlaceholder(component);
-}
-export function createSvelteTable(options) {
-    let optionsStore;
-    if ('subscribe' in options) {
-        optionsStore = options;
-    }
-    else {
-        optionsStore = readable(options);
-    }
-    let resolvedOptions = {
-        state: {}, // Dummy state
-        onStateChange: () => { }, // noop
-        renderFallbackValue: null,
-        ...get(optionsStore),
-    };
-    let table = createTable(resolvedOptions);
-    let stateStore = writable(/** @type {number} */ table.initialState);
-    // combine stores
-    let stateOptionsStore = derived([stateStore, optionsStore], s => s);
-    const tableReadable = readable(table, function start(set) {
-        const unsubscribe = stateOptionsStore.subscribe(([state, options]) => {
-            table.setOptions(prev => {
-                return {
-                    ...prev,
-                    ...options,
-                    state: { ...state, ...options.state },
-                    // Similarly, we'll maintain both our internal state and any user-provided
-                    // state.
-                    onStateChange: updater => {
-                        if (updater instanceof Function) {
-                            stateStore.update(updater);
-                        }
-                        else {
-                            stateStore.set(updater);
-                        }
-                        resolvedOptions.onStateChange?.(updater);
-                    },
-                };
-            });
-            // it didn't seem to rerender without setting the table
-            set(table);
-        });
-        return function stop() {
-            unsubscribe();
-        };
-    });
-    return tableReadable;
-}
+export { default as FlexRender } from './flex-render.svelte';
+export { renderComponent } from './render-component';
+export { createSvelteTable } from './table.svelte';

package/dist/render-component.d.ts

@@ -1,4 +1,35 @@
-import type { ComponentType, ComponentProps } from 'svelte';
-declare function renderServer<T>(Comp: T, props: T extends ComponentType<infer C> ? ComponentProps<C> : any): ComponentType;
-export declare const renderComponent: typeof renderServer;
-export {};
+import type { SvelteComponent, ComponentType, ComponentProps } from 'svelte';
+/**
+ * A helper class to make it easy to identify Svelte components in `columnDef.cell` and `columnDef.header` properties.
+ * @example
+ * ```svelte
+ * {#if cell.column.columnDef.cell(cell.getContext()) instanceof RenderComponentConfig}
+ *   <svelte:component this={columnDef.cell.component} {...columnDef.cell.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>);
+}
+/**
+ * A helper function to help create cells from Svelte components through ColumnDef's `cell` and `header` properties.
+ * @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.
+ * @example
+ * ```ts
+ * // +page.svelte
+ * const defaultColumns = [
+ *   columnHelper.accessor('name', {
+ *     header: header => renderComponent(SortHeader, { label: 'Name', header }),
+ *   }),
+ *   columnHelper.accessor('state', {
+ *     header: header => renderComponent(SortHeader, { label: 'State', header }),
+ *   }),
+ * ]
+ * ```
+ * @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>;

package/dist/render-component.js

@@ -1,48 +1,35 @@
-import { SvelteComponent, claim_component, create_component, destroy_component, init, mount_component, noop, safe_not_equal, transition_in, transition_out, create_ssr_component, validate_component, } from 'svelte/internal';
-function create_fragment(ctx, Comp, props) {
-    let c;
-    let current;
-    c = new Comp({ props, $$inline: true });
-    return {
-        c() {
-            create_component(c.$$.fragment);
-        },
-        l(nodes) {
-            claim_component(c.$$.fragment, nodes);
-        },
-        m(target, anchor) {
-            // @ts-ignore
-            mount_component(c, target, anchor);
-            current = true;
-        },
-        p: noop,
-        i(local) {
-            if (current)
-                return;
-            transition_in(c.$$.fragment, local);
-            current = true;
-        },
-        o(local) {
-            transition_out(c.$$.fragment, local);
-            current = false;
-        },
-        d(detaching) {
-            destroy_component(c, detaching);
-        },
-    };
+/**
+ * A helper class to make it easy to identify Svelte components in `columnDef.cell` and `columnDef.header` properties.
+ * @example
+ * ```svelte
+ * {#if cell.column.columnDef.cell(cell.getContext()) instanceof RenderComponentConfig}
+ *   <svelte:component this={columnDef.cell.component} {...columnDef.cell.props} />
+ * {/if}
+ * ```
+ * */
+export class RenderComponentConfig {
+    constructor(component, props = {}) {
+        this.component = component;
+        this.props = props;
+    }
 }
-function renderClient(Comp, props) {
-    return class WrapperComp extends SvelteComponent {
-        constructor(options) {
-            super();
-            init(this, options, null, (ctx) => create_fragment(ctx, Comp, props), safe_not_equal, {}, undefined);
-        }
-    };
-}
-function renderServer(Comp, props) {
-    const WrapperComp = create_ssr_component(($$result, $$props, $$bindings, slots) => {
-        return `${validate_component(Comp, 'TableComponent').$$render($$result, props, {}, {})}`;
-    });
-    return WrapperComp;
-}
-export const renderComponent = typeof window === 'undefined' ? renderServer : renderClient;
+/**
+ * A helper function to help create cells from Svelte components through ColumnDef's `cell` and `header` properties.
+ * @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.
+ * @example
+ * ```ts
+ * // +page.svelte
+ * const defaultColumns = [
+ *   columnHelper.accessor('name', {
+ *     header: header => renderComponent(SortHeader, { label: 'Name', header }),
+ *   }),
+ *   columnHelper.accessor('state', {
+ *     header: header => renderComponent(SortHeader, { label: 'State', header }),
+ *   }),
+ * ]
+ * ```
+ * @see {@link https://tanstack.com/table/latest/docs/guide/column-defs}
+ */
+export const renderComponent = (component, props) => new RenderComponentConfig(component, props);

package/dist/table.svelte.d.ts

@@ -0,0 +1,28 @@
+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>;

package/dist/table.svelte.js

@@ -0,0 +1,87 @@
+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;
+}
+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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/svelte-table",
-  "version": "9.0.0-alpha.0",
+  "version": "9.0.0-alpha.4",
   "description": "Headless UI for building powerful tables & datagrids for Svelte.",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -40,15 +40,16 @@
     "src"
   ],
   "dependencies": {
-    "@tanstack/table-core": "9.0.0-alpha.0"
+    "@tanstack/table-core": "9.0.0-alpha.4"
   },
   "devDependencies": {
     "@sveltejs/package": "^2.3.1",
-    "@sveltejs/vite-plugin-svelte": "^3.1.0",
-    "svelte": "^3.59.2"
+    "@sveltejs/vite-plugin-svelte": "^4.0.0-next",
+    "svelte": "^5.0.0-next",
+    "svelte-check": "^3.7.0"
   },
   "peerDependencies": {
-    "svelte": "^4.0.0 || ^3.49.0"
+    "svelte": "^5.0.0-next"
   },
   "scripts": {}
 }

package/src/flex-render.svelte

@@ -0,0 +1,35 @@
+<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/index.ts

@@ -1,125 +1,4 @@
-import {
-  RowData,
-  createTable,
-  TableOptions,
-  TableOptionsResolved,
-} from '@tanstack/table-core'
-import Placeholder from './placeholder'
-import type { ComponentType } from 'svelte'
-import { SvelteComponent } from 'svelte/internal'
-import { readable, writable, derived, Readable, get } from 'svelte/store'
-import { renderComponent } from './render-component'
-
-export { renderComponent } from './render-component'
-
 export * from '@tanstack/table-core'
-
-function isSvelteServerComponent(component: any) {
-  return (
-    typeof component === 'object' &&
-    typeof component.$$render === 'function' &&
-    typeof component.render === 'function'
-  )
-}
-
-function isSvelteClientComponent(component: any) {
-  let isHMR = '__SVELTE_HMR' in window
-
-  return (
-    component.prototype instanceof SvelteComponent ||
-    (isHMR &&
-      component.name?.startsWith('Proxy<') &&
-      component.name?.endsWith('>'))
-  )
-}
-
-function isSvelteComponent(component: any) {
-  if (typeof document === 'undefined') {
-    return isSvelteServerComponent(component)
-  } else {
-    return isSvelteClientComponent(component)
-  }
-}
-
-function wrapInPlaceholder(content: any) {
-  return renderComponent(Placeholder, { content })
-}
-
-export function flexRender(component: any, props: any): ComponentType | null {
-  if (!component) return null
-
-  if (isSvelteComponent(component)) {
-    return renderComponent(component, props)
-  }
-
-  if (typeof component === 'function') {
-    const result = component(props)
-    if (result === null || result === undefined) return null
-
-    if (isSvelteComponent(result)) {
-      return renderComponent(result, props)
-    }
-
-    return wrapInPlaceholder(result)
-  }
-
-  return wrapInPlaceholder(component)
-}
-
-type ReadableOrVal<T> = T | Readable<T>
-
-export function createSvelteTable<TData extends RowData>(
-  options: ReadableOrVal<TableOptions<TData>>
-) {
-  let optionsStore: Readable<TableOptions<TData>>
-
-  if ('subscribe' in options) {
-    optionsStore = options
-  } else {
-    optionsStore = readable(options)
-  }
-
-  let resolvedOptions: TableOptionsResolved<TData> = {
-    state: {}, // Dummy state
-    onStateChange: () => {}, // noop
-    renderFallbackValue: null,
-    ...get(optionsStore),
-  }
-
-  let table = createTable(resolvedOptions)
-
-  let stateStore = writable(/** @type {number} */ table.initialState)
-  // combine stores
-  let stateOptionsStore = derived([stateStore, optionsStore], s => s)
-  const tableReadable = readable(table, function start(set) {
-    const unsubscribe = stateOptionsStore.subscribe(([state, options]) => {
-      table.setOptions(prev => {
-        return {
-          ...prev,
-          ...options,
-          state: { ...state, ...options.state },
-          // Similarly, we'll maintain both our internal state and any user-provided
-          // state.
-          onStateChange: updater => {
-            if (updater instanceof Function) {
-              stateStore.update(updater)
-            } else {
-              stateStore.set(updater)
-            }
-
-            resolvedOptions.onStateChange?.(updater)
-          },
-        }
-      })
-
-      // it didn't seem to rerender without setting the table
-      set(table)
-    })
-
-    return function stop() {
-      unsubscribe()
-    }
-  })
-
-  return tableReadable
-}
+export { default as FlexRender } from './flex-render.svelte'
+export { renderComponent } from './render-component'
+export { createSvelteTable } from './table.svelte'

package/src/render-component.ts

@@ -1,89 +1,41 @@
-import type { ComponentType, ComponentProps } from 'svelte'
-import {
-  SvelteComponent,
-  claim_component,
-  create_component,
-  destroy_component,
-  init,
-  mount_component,
-  noop,
-  safe_not_equal,
-  transition_in,
-  transition_out,
-  create_ssr_component,
-  validate_component,
-} from 'svelte/internal'
+import type { SvelteComponent, ComponentType, ComponentProps } from 'svelte'
 
-function create_fragment(ctx: any, Comp: any, props: any) {
-  let c: any
-  let current: any
-  c = new Comp({ props, $$inline: true })
-
-  return {
-    c() {
-      create_component(c.$$.fragment)
-    },
-    l(nodes: any) {
-      claim_component(c.$$.fragment, nodes)
-    },
-    m(target: any, anchor: any) {
-      // @ts-ignore
-      mount_component(c, target, anchor)
-      current = true
-    },
-    p: noop,
-    i(local: any) {
-      if (current) return
-      transition_in(c.$$.fragment, local)
-      current = true
-    },
-    o(local: any) {
-      transition_out(c.$$.fragment, local)
-      current = false
-    },
-    d(detaching: any) {
-      destroy_component(c, detaching)
-    },
-  }
-}
-
-function renderClient<T>(
-  Comp: T,
-  props: T extends ComponentType<infer C> ? ComponentProps<C> : any
-) {
-  return class WrapperComp extends SvelteComponent {
-    constructor(options: any) {
-      super()
-      init(
-        this,
-        options,
-        null,
-        (ctx: any) => create_fragment(ctx, Comp, props),
-        safe_not_equal,
-        {},
-        undefined
-      )
-    }
-  } as ComponentType
-}
-
-function renderServer<T>(
-  Comp: T,
-  props: T extends ComponentType<infer C> ? ComponentProps<C> : any
-) {
-  const WrapperComp = create_ssr_component(
-    ($$result: any, $$props: any, $$bindings: any, slots: any) => {
-      return `${validate_component(Comp, 'TableComponent').$$render(
-        $$result,
-        props,
-        {},
-        {}
-      )}`
-    }
-  )
-
-  return WrapperComp as unknown as ComponentType
+/**
+ * A helper class to make it easy to identify Svelte components in `columnDef.cell` and `columnDef.header` properties.
+ * @example
+ * ```svelte
+ * {#if cell.column.columnDef.cell(cell.getContext()) instanceof RenderComponentConfig}
+ *   <svelte:component this={columnDef.cell.component} {...columnDef.cell.props} />
+ * {/if}
+ * ```
+ * */
+export class RenderComponentConfig<TComponent extends SvelteComponent> {
+  constructor(
+    public component: ComponentType<TComponent>,
+    public props: ComponentProps<TComponent> | Record<string, never> = {}
+  ) {}
 }
 
-export const renderComponent =
-  typeof window === 'undefined' ? renderServer : renderClient
+/**
+ * A helper function to help create cells from Svelte components through ColumnDef's `cell` and `header` properties.
+ * @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.
+ * @example
+ * ```ts
+ * // +page.svelte
+ * const defaultColumns = [
+ *   columnHelper.accessor('name', {
+ *     header: header => renderComponent(SortHeader, { label: 'Name', header }),
+ *   }),
+ *   columnHelper.accessor('state', {
+ *     header: header => renderComponent(SortHeader, { label: 'State', header }),
+ *   }),
+ * ]
+ * ```
+ * @see {@link https://tanstack.com/table/latest/docs/guide/column-defs}
+ */
+export const renderComponent = <TComponent extends SvelteComponent>(
+  component: ComponentType<TComponent>,
+  props: ComponentProps<TComponent>
+) => new RenderComponentConfig(component, props)

package/src/table.svelte.ts

@@ -0,0 +1,117 @@
+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}
+ * */
+function mergeObjects<T>(source: T): T
+function mergeObjects<T, U>(source: T, source1: U): T & U
+function mergeObjects<T, U, V>(source: T, source1: U, source2: V): T & U & V
+function mergeObjects<T, U, V, W>(
+  source: T,
+  source1: U,
+  source2: V,
+  source3: W
+): T & U & V & W
+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
+}

package/dist/placeholder.d.ts

@@ -1,4 +0,0 @@
-import type { SvelteComponentDev } from 'svelte/internal';
-import PlaceholderClient from './placeholder.svelte';
-declare const _default: typeof PlaceholderClient | typeof SvelteComponentDev;
-export default _default;

package/dist/placeholder.js

@@ -1,8 +0,0 @@
-import { create_ssr_component, escape } from 'svelte/internal';
-import PlaceholderClient from './placeholder.svelte';
-const PlaceholderServer = create_ssr_component(($$result, $$props, $$bindings, slots) => {
-    return `${escape($$props.content)}`;
-});
-export default typeof document === 'undefined'
-    ? PlaceholderServer
-    : PlaceholderClient;

package/dist/placeholder.svelte

@@ -1,5 +0,0 @@
-<script>
-  export let content
-</script>
-
-{content}

package/dist/placeholder.svelte.d.ts

@@ -1,23 +0,0 @@
-/** @typedef {typeof __propDef.props}  PlaceholderProps */
-/** @typedef {typeof __propDef.events}  PlaceholderEvents */
-/** @typedef {typeof __propDef.slots}  PlaceholderSlots */
-export default class Placeholder extends SvelteComponentTyped<{
-    content: any;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type PlaceholderProps = typeof __propDef.props;
-export type PlaceholderEvents = typeof __propDef.events;
-export type PlaceholderSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        content: any;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export {};

package/src/placeholder.svelte

@@ -1,5 +0,0 @@
-<script>
-  export let content
-</script>
-
-{content}

package/src/placeholder.ts

@@ -1,15 +0,0 @@
-import type { SvelteComponentDev } from 'svelte/internal'
-import { create_ssr_component, escape } from 'svelte/internal'
-import PlaceholderClient from './placeholder.svelte'
-
-type X = typeof PlaceholderClient
-
-const PlaceholderServer = create_ssr_component(
-  ($$result: any, $$props: any, $$bindings: any, slots: any) => {
-    return `${escape($$props.content)}`
-  }
-) as any as typeof SvelteComponentDev
-
-export default typeof document === 'undefined'
-  ? PlaceholderServer
-  : PlaceholderClient