@invopop/popui 0.1.34 → 0.1.40

package/dist/data-table/data-table.svelte

@@ -0,0 +1,428 @@
+<script lang="ts" generics="TData">
+  import {
+    type ColumnSizingState,
+    type ColumnSizingInfoState,
+    type ColumnOrderState,
+    type PaginationState,
+    type Row,
+    type RowSelectionState,
+    type SortingState,
+    type VisibilityState
+  } from '@tanstack/table-core'
+  import { onMount, onDestroy } from 'svelte'
+  import DataTableToolbar from './data-table-toolbar.svelte'
+  import DataTablePagination from './data-table-pagination.svelte'
+  import DataTableHeaderCell from './data-table-header-cell.svelte'
+  import DataTableRow from './data-table-row.svelte'
+  import FlexRender from './flex-render.svelte'
+  import * as Table from '../table/index.js'
+  import BaseTableActions from '../BaseTableActions.svelte'
+  import BaseDropdown from '../BaseDropdown.svelte'
+  import EmptyState from '../EmptyState.svelte'
+  import Skeleton from '../skeleton/skeleton.svelte'
+  import SkeletonAvatar from '../skeleton/skeleton-avatar.svelte'
+  import { Search } from '@invopop/ui-icons'
+  import { cn } from '../utils.js'
+  import type { DataTableProps } from './data-table-types.js'
+  import { calculateColumnSizing } from './column-sizing-helpers.js'
+  import { getCellStyle, getCellClasses } from './table-styles.js'
+  import { buildColumns, setupTable } from './table-setup.js'
+  import {
+    reorderFrozenColumn,
+    reorderUnfrozenColumn,
+    calculateFrozenOffset,
+    handleScrollEvent,
+    shouldIgnoreKeyEvent,
+    handleArrowDown,
+    handleArrowUp,
+    handleSelectKey
+  } from './data-table-helpers.js'
+  import clsx from 'clsx'
+
+  let {
+    data,
+    columns: columnConfig,
+    loading = false,
+    disableSelection = false,
+    disablePagination = false,
+    disableKeyboardNavigation = false,
+    disableControls = false,
+    rowActions = [],
+    getRowActions,
+    onRowAction,
+    initialPageSize = 10,
+    initialPage = 0,
+    initialSortColumn,
+    initialSortDirection,
+    initialFrozenColumns = [],
+    initialColumnOrder = [],
+    initialColumnVisibility = {},
+    initialColumnSizing = {},
+    emptyState = {
+      iconSource: Search,
+      title: 'No results',
+      description: 'Try adjusting your filters or search query'
+    },
+    onRowClick,
+    onSelectionChange,
+    filters,
+    paginationSlot,
+    manualPagination = false,
+    manualSorting = false,
+    pageCount,
+    rowCount,
+    onPageChange,
+    onPageSizeChange,
+    onSortingChange,
+    onFilterChange,
+    onFreezeChange,
+    onColumnResize,
+    onColumnOrderChange,
+    onColumnVisibilityChange,
+    getRowClassName,
+    getRowState,
+    children
+  }: DataTableProps<TData> = $props()
+
+  const enableSelection = !disableSelection
+  const enablePagination = !disablePagination
+
+  let rowSelection = $state<RowSelectionState>({})
+  let columnVisibility = $state<VisibilityState>(initialColumnVisibility)
+  let sorting = $state<SortingState>(
+    initialSortColumn && initialSortDirection
+      ? [{ id: initialSortColumn, desc: initialSortDirection === 'desc' }]
+      : []
+  )
+  let pagination = $state<PaginationState>({ pageIndex: initialPage, pageSize: initialPageSize })
+  let columnSizing = $state<ColumnSizingState>(initialColumnSizing)
+  let columnSizingInfo = $state<ColumnSizingInfoState>({
+    columnSizingStart: [],
+    deltaOffset: null,
+    deltaPercentage: null,
+    isResizingColumn: false,
+    startOffset: null,
+    startSize: null
+  })
+  let columnOrder = $state<ColumnOrderState>(initialColumnOrder)
+  let containerRef = $state<HTMLDivElement | null>(null)
+  let columnDropdowns = $state<Record<string, BaseDropdown>>({})
+  let frozenColumns = $state<Set<string>>(new Set(initialFrozenColumns))
+  let focusedRowIndex = $state<number>(-1)
+  let tableBodyRef = $state<HTMLTableSectionElement | null>(null)
+  let tableRenderKey = $state<number>(0) // Force re-render when visibility changes
+
+  // Build TanStack columns from config
+  const columns = $derived.by(() =>
+    buildColumns<TData>(
+      columnConfig,
+      enableSelection,
+      RowActions,
+      getRowActions !== undefined || rowActions.length > 0
+    )
+  )
+
+  // Calculate initial column sizes based on available width
+  $effect(() => {
+    if (containerRef && Object.keys(columnSizing).length === 0) {
+      const containerWidth = containerRef.offsetWidth
+      const newSizing = calculateColumnSizing(columns, containerWidth)
+      if (newSizing) {
+        columnSizing = newSizing
+      }
+    }
+  })
+
+  // Sync pagination pageIndex with initialPage prop (for manual pagination resets)
+  $effect(() => {
+    if (manualPagination) {
+      pagination.pageIndex = initialPage
+    }
+  })
+
+  // Reorder initial frozen columns on mount
+  $effect(() => {
+    if (initialFrozenColumns.length > 0 && columnOrder.length === 0) {
+      initialFrozenColumns.forEach((columnId) =>
+        reorderFrozenColumn(columnId, table, frozenColumns)
+      )
+    }
+  })
+
+  // Track selection changes
+  $effect(() => {
+    if (onSelectionChange) {
+      const selectedRows = Object.keys(rowSelection)
+        .filter((key) => rowSelection[key])
+        .map((key) => data[parseInt(key)])
+      onSelectionChange(selectedRows)
+    }
+  })
+
+  // Track column order changes
+  $effect(() => {
+    if (onColumnOrderChange && columnOrder.length > 0) {
+      onColumnOrderChange(columnOrder)
+    }
+  })
+
+  // Track column visibility changes
+  $effect(() => {
+    if (onColumnVisibilityChange && Object.keys(columnVisibility).length > 0) {
+      onColumnVisibilityChange(columnVisibility)
+    }
+  })
+
+  const table = setupTable<TData>({
+    getData: () => data,
+    getColumns: () => columns,
+    enableSelection,
+    enablePagination,
+    manualPagination,
+    manualSorting,
+    pageCount,
+    getRowCount: () => rowCount,
+    getRowSelection: () => rowSelection,
+    getColumnVisibility: () => columnVisibility,
+    getSorting: () => sorting,
+    getPagination: () => pagination,
+    getColumnSizing: () => columnSizing,
+    getColumnSizingInfo: () => columnSizingInfo,
+    getColumnOrder: () => columnOrder,
+    setRowSelection: (value) => (rowSelection = value),
+    setColumnVisibility: (value) => {
+      columnVisibility = value
+      // Increment render key to force table rebuild after visibility changes
+      tableRenderKey++
+    },
+    setSorting: (value) => (sorting = value),
+    setPagination: (value) => (pagination = value),
+    setColumnSizing: (value) => {
+      columnSizing = value
+      if (onColumnResize && Object.keys(value).length > 0) {
+        onColumnResize(value)
+      }
+    },
+    setColumnSizingInfo: (value) => (columnSizingInfo = value),
+    setColumnOrder: (value) => (columnOrder = value)
+  })
+
+  function handleFreezeColumn(columnId: string) {
+    const isFrozen = frozenColumns.has(columnId)
+
+    if (isFrozen) {
+      frozenColumns.delete(columnId)
+      frozenColumns = new Set(frozenColumns)
+      reorderUnfrozenColumn(columnId, table, frozenColumns)
+    } else {
+      frozenColumns.add(columnId)
+      frozenColumns = new Set(frozenColumns)
+      reorderFrozenColumn(columnId, table, frozenColumns)
+    }
+
+    // Notify parent component of freeze change
+    onFreezeChange?.(columnId)
+  }
+
+  function handleKeydown(event: KeyboardEvent) {
+    const rows = table.getRowModel().rows
+    if (rows.length === 0) return
+    if (shouldIgnoreKeyEvent(event)) return
+
+    switch (event.key) {
+      case 'ArrowDown':
+        event.preventDefault()
+        focusedRowIndex = handleArrowDown(
+          focusedRowIndex,
+          rows,
+          event.shiftKey,
+          enableSelection,
+          scrollToFocusedRow
+        )
+        break
+      case 'ArrowUp':
+        event.preventDefault()
+        focusedRowIndex = handleArrowUp(
+          focusedRowIndex,
+          rows,
+          event.shiftKey,
+          enableSelection,
+          scrollToFocusedRow
+        )
+        break
+      case ' ':
+      case 'Enter':
+        event.preventDefault()
+        handleSelectKey(focusedRowIndex, rows, enableSelection)
+        break
+      case 'Escape':
+        focusedRowIndex = -1
+        break
+    }
+  }
+
+  function scrollToFocusedRow() {
+    if (focusedRowIndex >= 0 && tableBodyRef) {
+      const rowElement = tableBodyRef.querySelector(`[data-row-index="${focusedRowIndex}"]`)
+      if (rowElement) {
+        rowElement.scrollIntoView({ block: 'nearest', behavior: 'smooth' })
+      }
+    }
+  }
+
+  // Close dropdowns on horizontal scroll
+  let lastScrollLeft = 0
+  function handleScroll(event: Event) {
+    lastScrollLeft = handleScrollEvent(event, lastScrollLeft, columnDropdowns)
+  }
+
+  // Add global keyboard navigation
+  onMount(() => {
+    if (!disableKeyboardNavigation) {
+      document.addEventListener('keydown', handleKeydown)
+    }
+    if (containerRef) {
+      containerRef.addEventListener('scroll', handleScroll)
+    }
+  })
+
+  onDestroy(() => {
+    if (!disableKeyboardNavigation) {
+      document.removeEventListener('keydown', handleKeydown)
+    }
+    if (containerRef) {
+      containerRef.removeEventListener('scroll', handleScroll)
+    }
+  })
+</script>
+
+{#snippet StickyCellWrapper({
+  children,
+  align = 'left',
+  isFirst = false,
+  isLast = false,
+  isFrozen = false,
+  isLastFrozen = false
+}: {
+  children: any
+  align?: 'left' | 'right'
+  isFirst?: boolean
+  isLast?: boolean
+  isFrozen?: boolean
+  isLastFrozen?: boolean
+})}
+  <div
+    class={cn(
+      'absolute inset-0 flex items-center bg-background group-hover/row:bg-background-default-secondary group-data-[state=selected]/row:bg-background-selected group-data-[state=selected]/row:group-hover/row:bg-background-selected group-data-[state=error]/row:bg-background-critical group-data-[state=error]/row:group-hover/row:bg-background-critical group-data-[state=warning]/row:bg-background-warning group-data-[state=warning]/row:group-hover/row:bg-background-warning group-data-[state=success]/row:bg-background-selected group-data-[state=success]/row:group-hover/row:bg-background-selected group-data-[focused=true]/row:bg-background-default-secondary px-3 shadow-[inset_0_-1px_0_0_var(--color-border)]',
+      {
+        'justify-end': align === 'right',
+        'pl-4': isFirst,
+        'pr-4': isLast,
+        'border-r border-border': isFrozen && isLastFrozen
+      }
+    )}
+  >
+    <div class="relative z-10 flex items-center w-full">
+      {@render children()}
+    </div>
+  </div>
+{/snippet}
+
+{#snippet RowActions({ row }: { row: Row<TData> })}
+  <BaseTableActions
+    actions={getRowActions ? getRowActions(row.original) : rowActions}
+    onclick={(action) => {
+      if (onRowAction) {
+        onRowAction(action, row.original)
+      }
+    }}
+  />
+{/snippet}
+
+<div class="flex flex-col h-full">
+  <DataTableToolbar
+    {table}
+    {filters}
+    {frozenColumns}
+    onFreezeColumn={handleFreezeColumn}
+    disabled={disableControls}
+  />
+  <div class="flex-1 overflow-hidden flex flex-col">
+    <div
+      bind:this={containerRef}
+      class="relative bg-background flex-1 overflow-auto"
+      style="overscroll-behavior-x: none;"
+    >
+      {#if data.length === 0}
+        <div class="absolute inset-0 flex items-center justify-center pointer-events-none">
+          <div class="pointer-events-auto">
+            <EmptyState
+              icon={children}
+              iconSource={emptyState.iconSource}
+              title={emptyState.title}
+              description={emptyState.description}
+            />
+          </div>
+        </div>
+      {:else}
+        <Table.Root>
+          <Table.Header>
+            {#each table.getHeaderGroups() as headerGroup (`${headerGroup.id}-${tableRenderKey}`)}
+              <Table.Row class="hover:!bg-transparent">
+                {#each headerGroup.headers as header, index (header.id)}
+                  <DataTableHeaderCell
+                    {header}
+                    {index}
+                    headers={headerGroup.headers}
+                    {frozenColumns}
+                    bind:columnDropdowns
+                    onSortingChange={(columnId, direction) => {
+                      if (manualPagination) {
+                        table.setPageIndex(0)
+                      }
+                      onSortingChange?.(columnId, direction)
+                    }}
+                    {onFilterChange}
+                    onFreezeChange={handleFreezeColumn}
+                    {manualPagination}
+                    {loading}
+                  />
+                {/each}
+              </Table.Row>
+            {/each}
+          </Table.Header>
+          <Table.Body bind:ref={tableBodyRef}>
+            {#each table.getRowModel().rows as row, rowIndex (row.id)}
+              <DataTableRow
+                {row}
+                {rowIndex}
+                {frozenColumns}
+                {focusedRowIndex}
+                {loading}
+                {onRowClick}
+                {getRowClassName}
+                {getRowState}
+                {StickyCellWrapper}
+              />
+            {/each}
+          </Table.Body>
+        </Table.Root>
+      {/if}
+    </div>
+    {#if enablePagination}
+      <DataTablePagination
+        {table}
+        {data}
+        {rowCount}
+        {manualPagination}
+        {onPageChange}
+        {onPageSizeChange}
+        disabled={disableControls || loading}
+      >
+        {#if paginationSlot}
+          {@render paginationSlot()}
+        {/if}
+      </DataTablePagination>
+    {/if}
+  </div>
+</div>

package/dist/data-table/data-table.svelte.d.ts

@@ -0,0 +1,25 @@
+import type { DataTableProps } from './data-table-types.js';
+declare function $$render<TData>(): {
+    props: DataTableProps<TData>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<TData> {
+    props(): ReturnType<typeof $$render<TData>>['props'];
+    events(): ReturnType<typeof $$render<TData>>['events'];
+    slots(): ReturnType<typeof $$render<TData>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TData>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TData>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TData>['props']>, ReturnType<__sveltets_Render<TData>['events']>, ReturnType<__sveltets_Render<TData>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TData>['bindings']>;
+    } & ReturnType<__sveltets_Render<TData>['exports']>;
+    <TData>(internal: unknown, props: ReturnType<__sveltets_Render<TData>['props']> & {}): ReturnType<__sveltets_Render<TData>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const DataTable: $$IsomorphicComponent;
+type DataTable<TData> = InstanceType<typeof DataTable<TData>>;
+export default DataTable;

package/dist/data-table/flex-render.svelte

@@ -0,0 +1,40 @@
+<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, RenderSnippetConfig } from './render-helpers.js'
+  import type { Attachment } from 'svelte/attachments'
+  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
+
+    /** Used to pass attachments that can't be gotten through context */
+    attach?: Attachment
+  }
+
+  let { content, context, attach }: Props = $props()
+</script>
+
+{#if typeof content === 'string'}
+  {content}
+{:else if content instanceof Function}
+  <!-- It's unlikely that a CellContext will be passed to a Header -->
+  <!-- eslint-disable-next-line @typescript-eslint/no-explicit-any -->
+  {@const result = content(context as any)}
+  {#if result instanceof RenderComponentConfig}
+    {@const { component: Component, props } = result}
+    <Component {...props} {attach} />
+  {:else if result instanceof RenderSnippetConfig}
+    {@const { snippet, params } = result}
+    {@render snippet({ ...params, attach })}
+  {:else}
+    {result}
+  {/if}
+{/if}

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

@@ -0,0 +1,33 @@
+import type { CellContext, ColumnDefTemplate, HeaderContext } from '@tanstack/table-core';
+import type { Attachment } from 'svelte/attachments';
+declare function $$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;
+        /** The result of the `getContext()` function of the header or cell */
+        context: TContext;
+        /** Used to pass attachments that can't be gotten through context */
+        attach?: Attachment;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<TData, TValue, TContext extends HeaderContext<TData, TValue> | CellContext<TData, TValue>> {
+    props(): ReturnType<typeof $$render<TData, TValue, TContext>>['props'];
+    events(): ReturnType<typeof $$render<TData, TValue, TContext>>['events'];
+    slots(): ReturnType<typeof $$render<TData, TValue, TContext>>['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']> & {}): 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/data-table/index.d.ts

@@ -0,0 +1,13 @@
+export { default as DataTable } from "./data-table.svelte";
+export { default as DataTableToolbar } from "./data-table-toolbar.svelte";
+export { default as DataTableViewOptions } from "./data-table-view-options.svelte";
+export { default as FlexRender } from "./flex-render.svelte";
+export { createSvelteTable } from "./data-table-svelte.svelte.js";
+export { renderComponent, renderSnippet } from "./render-helpers.js";
+export { createColumns } from "./create-columns.js";
+export { default as TextCell } from "./cells/text-cell.svelte";
+export { default as BooleanCell } from "./cells/boolean-cell.svelte";
+export { default as TagCell } from "./cells/tag-cell.svelte";
+export { default as DateCell } from "./cells/date-cell.svelte";
+export { default as CurrencyCell } from "./cells/currency-cell.svelte";
+export type { DataTableColumn, DataTableProps, CellType, TextCellConfig, BooleanCellConfig, TagCellConfig, DateCellConfig, CurrencyCellConfig, CellConfig } from "./data-table-types.js";

package/dist/data-table/index.js

@@ -0,0 +1,13 @@
+export { default as DataTable } from "./data-table.svelte";
+export { default as DataTableToolbar } from "./data-table-toolbar.svelte";
+export { default as DataTableViewOptions } from "./data-table-view-options.svelte";
+export { default as FlexRender } from "./flex-render.svelte";
+export { createSvelteTable } from "./data-table-svelte.svelte.js";
+export { renderComponent, renderSnippet } from "./render-helpers.js";
+export { createColumns } from "./create-columns.js";
+// Re-export cell components
+export { default as TextCell } from "./cells/text-cell.svelte";
+export { default as BooleanCell } from "./cells/boolean-cell.svelte";
+export { default as TagCell } from "./cells/tag-cell.svelte";
+export { default as DateCell } from "./cells/date-cell.svelte";
+export { default as CurrencyCell } from "./cells/currency-cell.svelte";

package/dist/data-table/render-helpers.d.ts

@@ -0,0 +1,90 @@
+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.
+ *
+ * > 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 RenderComponentConfig}
+ *   {@const { component: Component, props } = result}
+ *   <Component {...props} />
+ * {/if}
+ * ```
+ */
+export declare class RenderComponentConfig<TComponent extends Component> {
+    component: TComponent;
+    props: ComponentProps<TComponent> | Record<string, never>;
+    constructor(component: TComponent, 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 declare class RenderSnippetConfig<TProps> {
+    snippet: Snippet<[TProps]>;
+    params: TProps;
+    constructor(snippet: Snippet<[TProps]>, 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.
+ * @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 function renderComponent<T extends Component<any>, Props extends ComponentProps<T>>(component: T, props?: Props): RenderComponentConfig<T>;
+/**
+ * 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 - A `RenderSnippetConfig` object that helps svelte-table know how to render the header/cell snippet.
+ * @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 function renderSnippet<TProps>(snippet: Snippet<[TProps]>, params?: TProps): RenderSnippetConfig<TProps>;