@invopop/popui 0.1.1 → 0.1.3-6.beta.1

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

@@ -0,0 +1,66 @@
+import type { Component, Snippet } from 'svelte';
+import type { StatusType, AnyProp, TableAction, EmptyStateProps } from '../types.js';
+import type { IconSource } from '@steeze-ui/svelte-icon';
+import type { Table } from '@tanstack/table-core';
+export type CellType = 'text' | 'boolean' | 'tag' | 'date' | 'currency' | 'custom';
+export interface TextCellConfig {
+    className?: string;
+}
+export interface BooleanCellConfig {
+    icon?: IconSource;
+    iconClass?: string;
+    showWhenTrue?: boolean;
+    showWhenFalse?: boolean;
+}
+export interface TagCellConfig {
+    options: Array<{
+        value: string;
+        label: string;
+        color: StatusType;
+    }>;
+    showDot?: boolean;
+}
+export interface DateCellConfig {
+    className?: string;
+}
+export interface CurrencyCellConfig {
+    className?: string;
+}
+export type CellConfig = TextCellConfig | BooleanCellConfig | TagCellConfig | DateCellConfig | CurrencyCellConfig;
+export interface DataTableColumn<TData> {
+    id: string;
+    accessorKey?: keyof TData;
+    header?: string;
+    cellType?: CellType;
+    cellConfig?: CellConfig;
+    cell?: (value: any, row: TData) => Snippet | Component | string;
+    enableSorting?: boolean;
+    enableHiding?: boolean;
+    enableResizing?: boolean;
+    size?: number;
+    minSize?: number;
+    maxSize?: number;
+}
+export interface DataTableProps<TData> {
+    data: TData[];
+    columns: DataTableColumn<TData>[];
+    disableSelection?: boolean;
+    disablePagination?: boolean;
+    rowActions?: TableAction[];
+    onRowAction?: (action: AnyProp, row: TData) => void;
+    initialPageSize?: number;
+    pageSizeOptions?: number[];
+    emptyState?: Omit<EmptyStateProps, 'children' | 'check'>;
+    onRowClick?: (row: TData) => void;
+    onSelectionChange?: (selectedRows: TData[]) => void;
+    filters?: Snippet;
+}
+export interface DataTablePaginationProps<T> {
+    table: Table<T>;
+    id?: string;
+    class?: string;
+    showRowsPerPage?: boolean;
+    rowsPerPageOptions?: number[];
+    itemsLabel?: string;
+    children?: Snippet;
+}

package/dist/data-table/data-table-types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,88 @@
+<script lang="ts" generics="TData">
+  import { Sliders, Drag } from '@invopop/ui-icons'
+  import type { Table } from '@tanstack/table-core'
+  import type { DrawerOption } from '../types.js'
+  import BaseDropdown from '../BaseDropdown.svelte'
+  import DrawerContext from '../DrawerContext.svelte'
+  import InputToggle from '../InputToggle.svelte'
+  import BaseButton from '../BaseButton.svelte'
+  import { capitalize } from '../helpers.js'
+
+  let { table }: { table: Table<TData> } = $props()
+
+  let itemsWithActions = $state<DrawerOption[]>([])
+
+  // Initialize and update items when table state changes
+  $effect(() => {
+    const columnOrder = table.getState().columnOrder
+    const allColumns = table.getAllColumns()
+
+    let orderedColumns
+    // If there's a custom order, use it; otherwise use default order
+    if (columnOrder.length > 0) {
+      orderedColumns = columnOrder
+        .map((id) => allColumns.find((col) => col.id === id))
+        .filter((col) => col && col.id !== 'select' && col.id !== 'actions')
+    } else {
+      orderedColumns = allColumns.filter((col) => col.id !== 'select' && col.id !== 'actions')
+    }
+
+    const newItems = orderedColumns.map((col) => ({
+      label: (col?.columnDef.header as string) || capitalize(col?.id || ''),
+      value: col?.id,
+      icon: Drag,
+      action: toggleAction
+    })) as DrawerOption[]
+
+    // Only update if the order has actually changed (avoid overwriting during drag)
+    const currentOrder = itemsWithActions.map((i) => i.value).join(',')
+    const newOrder = newItems.map((i) => i.value).join(',')
+
+    if (currentOrder !== newOrder) {
+      itemsWithActions = newItems
+    }
+  })
+
+  function handleReorder(reorderedItems: any[]) {
+    // Update local items to match the drag order immediately
+    itemsWithActions = reorderedItems
+
+    const newOrder = reorderedItems.map((item) => item.value)
+    // Get all column IDs from the table
+    const allColumnIds = table.getAllColumns().map((col) => col.id)
+
+    // Filter to keep select and actions in their fixed positions
+    const selectColumn = 'select'
+    const actionsColumn = 'actions'
+
+    // Build final order: select first (if exists), reordered columns in middle, actions last (if exists)
+    const finalOrder = [
+      ...(allColumnIds.includes(selectColumn) ? [selectColumn] : []),
+      ...newOrder.filter((id) => id !== selectColumn && id !== actionsColumn),
+      ...(allColumnIds.includes(actionsColumn) ? [actionsColumn] : [])
+    ]
+
+    table.setColumnOrder(finalOrder)
+  }
+</script>
+
+{#snippet toggleAction(item: DrawerOption)}
+  {@const column = table.getColumn(String(item.value))}
+  {#if column?.getCanHide()}
+    <InputToggle
+      checked={column?.getIsVisible() ?? false}
+      onchange={(v) => column?.toggleVisibility(!!v)}
+    />
+  {/if}
+{/snippet}
+
+<BaseDropdown class="ms-auto hidden lg:flex">
+  {#snippet trigger()}
+    <BaseButton icon={Sliders} variant="outline" size="md" />
+  {/snippet}
+  <DrawerContext items={itemsWithActions} draggable={true} onreorder={handleReorder}>
+    <div class="p-3 py-1.5 text-sm font-medium text-foreground-default-secondary">
+      Table options
+    </div>
+  </DrawerContext>
+</BaseDropdown>

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

@@ -0,0 +1,27 @@
+import type { Table } from '@tanstack/table-core';
+declare function $$render<TData>(): {
+    props: {
+        table: Table<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 DataTableViewOptions: $$IsomorphicComponent;
+type DataTableViewOptions<TData> = InstanceType<typeof DataTableViewOptions<TData>>;
+export default DataTableViewOptions;

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

@@ -0,0 +1,303 @@
+<script lang="ts" generics="TData">
+  import {
+    type ColumnSizingState,
+    type ColumnSizingInfoState,
+    type ColumnOrderState,
+    type PaginationState,
+    type Row,
+    type RowSelectionState,
+    type SortingState,
+    type VisibilityState,
+    type Column
+  } from '@tanstack/table-core'
+  import DataTableToolbar from './data-table-toolbar.svelte'
+  import DataTablePagination from './data-table-pagination.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 BaseTableHeaderOrderBy from '../BaseTableHeaderOrderBy.svelte'
+  import EmptyState from '../EmptyState.svelte'
+  import { Icon } from '@steeze-ui/svelte-icon'
+  import { ArrowUp, ArrowDown, Search } from '@invopop/ui-icons'
+  import type { HTMLAttributes } from 'svelte/elements'
+  import { cn } from '../utils.js'
+  import type { DataTableProps } from './data-table-types.js'
+  import { calculateColumnSizing } from './column-sizing-helpers.js'
+  import { getHeaderStyle, getHeaderClasses, getCellStyle, getCellClasses } from './table-styles.js'
+  import { buildColumns, setupTable } from './table-setup.js'
+
+  let {
+    data,
+    columns: columnConfig,
+    disableSelection = false,
+    disablePagination = false,
+    rowActions = [],
+    onRowAction,
+    initialPageSize = 10,
+    emptyState = {
+      iconSource: Search,
+      title: 'No results',
+      description: 'Try adjusting your filters or search query'
+    },
+    onRowClick,
+    onSelectionChange,
+    filters
+  }: DataTableProps<TData> = $props()
+
+  const enableSelection = !disableSelection
+  const enablePagination = !disablePagination
+
+  let rowSelection = $state<RowSelectionState>({})
+  let columnVisibility = $state<VisibilityState>({})
+  let sorting = $state<SortingState>([])
+  let pagination = $state<PaginationState>({ pageIndex: 0, pageSize: initialPageSize })
+  let columnSizing = $state<ColumnSizingState>({})
+  let columnSizingInfo = $state<ColumnSizingInfoState>({
+    columnSizingStart: [],
+    deltaOffset: null,
+    deltaPercentage: null,
+    isResizingColumn: false,
+    startOffset: null,
+    startSize: null
+  })
+  let columnOrder = $state<ColumnOrderState>([])
+  let containerRef = $state<HTMLDivElement | null>(null)
+
+  // Build TanStack columns from config
+  const columns = $derived.by(() =>
+    buildColumns<TData>(columnConfig, enableSelection, RowActions, 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
+      }
+    }
+  })
+
+  // Track selection changes
+  $effect(() => {
+    if (onSelectionChange) {
+      const selectedRows = Object.keys(rowSelection)
+        .filter((key) => rowSelection[key])
+        .map((key) => data[parseInt(key)])
+      onSelectionChange(selectedRows)
+    }
+  })
+
+  const table = setupTable({
+    get data() {
+      return data
+    },
+    get columns() {
+      return columns
+    },
+    enableSelection,
+    enablePagination,
+    getRowSelection: () => rowSelection,
+    getColumnVisibility: () => columnVisibility,
+    getSorting: () => sorting,
+    getPagination: () => pagination,
+    getColumnSizing: () => columnSizing,
+    getColumnSizingInfo: () => columnSizingInfo,
+    getColumnOrder: () => columnOrder,
+    setRowSelection: (value) => (rowSelection = value),
+    setColumnVisibility: (value) => (columnVisibility = value),
+    setSorting: (value) => (sorting = value),
+    setPagination: (value) => (pagination = value),
+    setColumnSizing: (value) => (columnSizing = value),
+    setColumnSizingInfo: (value) => (columnSizingInfo = value),
+    setColumnOrder: (value) => (columnOrder = value)
+  })
+</script>
+
+{#snippet StickyCellWrapper({
+  children,
+  align = 'left'
+}: {
+  children: any
+  align?: 'left' | 'right'
+})}
+  <div
+    class={cn(
+      'h-10 flex items-center px-3 relative group-hover/row:bg-background-default-secondary group-data-[state=selected]/row:bg-background-selected',
+      align === 'right' ? 'justify-end' : ''
+    )}
+  >
+    <div class="relative z-10">
+      {@render children()}
+    </div>
+  </div>
+{/snippet}
+
+{#snippet RowActions({ row }: { row: Row<TData> })}
+  <BaseTableActions
+    actions={rowActions}
+    onclick={(action) => {
+      if (onRowAction) {
+        onRowAction(action, row.original)
+      }
+    }}
+  />
+{/snippet}
+
+{#snippet ColumnHeader({
+  column,
+  title,
+  class: className,
+  ...restProps
+}: { column: Column<TData>; title?: string } & HTMLAttributes<HTMLDivElement>)}
+  {#if !column?.getCanSort()}
+    <div class={className} {...restProps}>
+      {title || ''}
+    </div>
+  {:else}
+    <div class={cn('flex items-center w-full', className)} {...restProps}>
+      <BaseDropdown fullWidth>
+        {#snippet trigger()}
+          <button
+            class="data-[state=open]:bg-accent w-full flex items-center gap-1 py-2.5 text-left"
+          >
+            <span>
+              {title || ''}
+            </span>
+            {#if column.getIsSorted() === 'desc'}
+              <Icon src={ArrowDown} class="size-4" />
+            {:else if column.getIsSorted() === 'asc'}
+              <Icon src={ArrowUp} class="size-4" />
+            {/if}
+          </button>
+        {/snippet}
+        <BaseTableHeaderOrderBy
+          sortDirection={column.getIsSorted() === 'asc' ? 'asc' : 'desc'}
+          isActive={column.getIsSorted() !== false}
+          onOrderBy={(direction) => column.toggleSorting(direction === 'desc')}
+          onHide={() => column.toggleVisibility(false)}
+        />
+      </BaseDropdown>
+    </div>
+  {/if}
+{/snippet}
+
+<div class="flex flex-col gap-4">
+  <DataTableToolbar {table} {filters} />
+  <div class="flex flex-col gap-[5px]">
+    <div bind:this={containerRef} class="relative bg-background">
+      <div class="overflow-x-auto relative z-10">
+        <Table.Root>
+          <Table.Header>
+            {#each table.getHeaderGroups() as headerGroup (headerGroup.id)}
+              <Table.Row class="hover:!bg-transparent border-b border-border">
+                {#each headerGroup.headers as header, index (header.id)}
+                  {@const isLastScrollable = index === headerGroup.headers.length - 2}
+                  <Table.Head
+                    colspan={header.colSpan}
+                    style={getHeaderStyle(header, isLastScrollable)}
+                    class={getHeaderClasses(header, isLastScrollable)}
+                  >
+                    {#if !header.isPlaceholder}
+                      {#if typeof header.column.columnDef.header === 'string'}
+                        {@render ColumnHeader({
+                          column: header.column as Column<TData>,
+                          title: header.column.columnDef.header as string
+                        })}
+                      {:else}
+                        <FlexRender
+                          content={header.column.columnDef.header}
+                          context={header.getContext()}
+                        />
+                      {/if}
+                    {/if}
+                    {#if header.column.getCanResize()}
+                      <div
+                        role="button"
+                        tabindex="0"
+                        aria-label="Resize column"
+                        class="absolute right-0 top-0 h-full w-3 cursor-col-resize select-none touch-none group -mr-1.5"
+                        onmousedown={header.getResizeHandler()}
+                        ontouchstart={header.getResizeHandler()}
+                      >
+                        <div
+                          class={cn(
+                            'absolute right-1.5 top-0 h-full w-0.5 bg-border-default-secondary transition-opacity',
+                            header.column.getIsResizing()
+                              ? 'opacity-0'
+                              : 'opacity-0 group-hover:opacity-100'
+                          )}
+                        ></div>
+                      </div>
+                    {/if}
+                  </Table.Head>
+                {/each}
+              </Table.Row>
+            {/each}
+          </Table.Header>
+          <Table.Body>
+            {#each table.getRowModel().rows as row (row.id)}
+              <Table.Row
+                data-state={row.getIsSelected() ? 'selected' : undefined}
+                class="border-b border-border"
+                onclick={() => onRowClick?.(row.original as TData)}
+              >
+                {#each row.getVisibleCells() as cell, index (cell.id)}
+                  {@const isLastScrollable = index === row.getVisibleCells().length - 2}
+                  <Table.Cell
+                    style={getCellStyle(cell, isLastScrollable)}
+                    class={getCellClasses(cell, isLastScrollable)}
+                  >
+                    {#if cell.column.id === 'actions'}
+                      {@render StickyCellWrapper({
+                        align: 'right',
+                        children: CellContent
+                      })}
+                      {#snippet CellContent()}
+                        <FlexRender
+                          content={cell.column.columnDef.cell}
+                          context={cell.getContext()}
+                        />
+                      {/snippet}
+                    {:else if cell.column.id === 'select'}
+                      {@render StickyCellWrapper({
+                        align: 'left',
+                        children: CellContent
+                      })}
+                      {#snippet CellContent()}
+                        <FlexRender
+                          content={cell.column.columnDef.cell}
+                          context={cell.getContext()}
+                        />
+                      {/snippet}
+                    {:else}
+                      <FlexRender
+                        content={cell.column.columnDef.cell}
+                        context={cell.getContext()}
+                      />
+                    {/if}
+                  </Table.Cell>
+                {/each}
+              </Table.Row>
+            {:else}
+              <Table.Row>
+                <Table.Cell colspan={columns.length} class="h-48">
+                  <EmptyState
+                    iconSource={emptyState.iconSource}
+                    title={emptyState.title}
+                    description={emptyState.description}
+                  />
+                </Table.Cell>
+              </Table.Row>
+            {/each}
+          </Table.Body>
+        </Table.Root>
+      </div>
+    </div>
+    {#if enablePagination}
+      <DataTablePagination {table} />
+    {/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";