@beeblock/svelar-datatable 0.1.0

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@beeblock/svelar-datatable",
+  "version": "0.1.0",
+  "description": "Full-featured DataTable plugin for Svelar — sorting, searching, pagination, inline editing, export, and server-side processing",
+  "type": "module",
+  "keywords": ["svelar-plugin", "datatable", "svelte", "sveltekit", "data-grid"],
+  "license": "MIT",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./server": {
+      "types": "./dist/server/index.d.ts",
+      "default": "./dist/server/index.js"
+    },
+    "./types": {
+      "types": "./dist/types.d.ts",
+      "default": "./dist/types.js"
+    },
+    "./ui": "./src/ui/index.ts",
+    "./ui/*": "./src/ui/*"
+  },
+  "files": ["dist", "src/ui", "LICENSE"],
+  "scripts": {
+    "build": "tsup && (tsc --emitDeclarationOnly || echo 'Warning: tsc declaration emit had errors')",
+    "dev": "tsup --watch"
+  },
+  "peerDependencies": {
+    "@beeblock/svelar": ">=0.4.0",
+    "svelte": "^5.0.0"
+  },
+  "peerDependenciesMeta": {
+    "exceljs": { "optional": true },
+    "@beeblock/svelar": { "optional": false }
+  },
+  "devDependencies": {
+    "tsup": "^8.5.0",
+    "typescript": "^5.7.0",
+    "svelte": "^5.0.0"
+  }
+}

package/src/ui/DataTable.svelte

@@ -0,0 +1,385 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { DataTableConfig, DataTableClassNames, ColumnDef, EditorFieldDef } from '../types.js';
+  import { DataTableStore } from '../state/DataTableStore.js';
+  import { ServerDataTableStore } from '../state/ServerDataTableStore.js';
+  import DataTableToolbar from './DataTableToolbar.svelte';
+  import DataTableHead from './DataTableHead.svelte';
+  import DataTableBody from './DataTableBody.svelte';
+  import DataTableFooter from './DataTableFooter.svelte';
+  import DataTablePagination from './DataTablePagination.svelte';
+  import DataTableEditor from './DataTableEditor.svelte';
+  import { onMount } from 'svelte';
+
+  interface Props extends DataTableConfig {
+    // Snippet overrides
+    customCell?: Snippet<[{ row: any; column: ColumnDef; value: any }]>;
+    expandContent?: Snippet<[{ row: any }]>;
+    // Expose store for external control (e.g. opening editor)
+    storeRef?: DataTableStore;
+  }
+
+  let {
+    // Data source
+    data,
+    serverUrl,
+    serverMethod,
+    // Columns
+    columns,
+    // Features
+    sortable = true,
+    searchable = true,
+    paginate = true,
+    selectable = 'none',
+    // Pagination
+    perPage = 15,
+    perPageOptions = [10, 15, 25, 50, 100],
+    // Search
+    searchDebounceMs = 300,
+    // State persistence
+    stateSaveKey,
+    // Row identity
+    rowId = 'id',
+    // Row appearance
+    rowClass,
+    // Buttons
+    buttons,
+    // Editor
+    editorMode,
+    editorFields,
+    // Callbacks
+    onSort,
+    onFilter,
+    onPageChange,
+    onSelect,
+    onRowClick,
+    onEdit,
+    onCellEdit,
+    onCreate,
+    onDelete,
+    // Virtual scroll
+    virtualScroll = false,
+    virtualRowHeight = 48,
+    // Features
+    responsive = true,
+    groupBy,
+    expandable = false,
+    // Text
+    emptyText = 'No data available',
+    loadingText = 'Loading...',
+    // CSS
+    className = '',
+    compact = false,
+    striped = true,
+    hover = true,
+    bordered = false,
+    classNames = {} as DataTableClassNames,
+    unstyled = false,
+    // Snippets
+    customCell,
+    expandContent,
+    // Store ref
+    storeRef = $bindable(),
+  }: Props = $props();
+
+  // Build config object
+  let config: DataTableConfig = $derived({
+    data, serverUrl, serverMethod, columns, sortable, searchable, paginate,
+    selectable, perPage, perPageOptions, searchDebounceMs, stateSaveKey,
+    rowId, rowClass, buttons, editorMode, editorFields,
+    onSort, onFilter, onPageChange, onSelect, onRowClick, onEdit, onCellEdit, onCreate, onDelete,
+    virtualScroll, virtualRowHeight, responsive, groupBy, expandable,
+    emptyText, loadingText, className, compact, striped, hover, bordered, classNames, unstyled,
+  });
+
+  // Create store
+  let store: DataTableStore = $state(
+    serverUrl
+      ? new ServerDataTableStore(config)
+      : new DataTableStore(config)
+  );
+
+  // Expose store ref for external control
+  $effect(() => {
+    storeRef = store;
+  });
+
+  let state = $state(store.getState());
+
+  // Subscribe to store changes
+  $effect(() => {
+    return store.subscribe(() => {
+      state = store.getState();
+
+      // Fire callbacks
+      if (onSort) onSort(state.sort);
+      if (onFilter) onFilter(state.filters);
+      if (onSelect) onSelect(store.getSelectedRows());
+      if (onPageChange) onPageChange(state.pagination.page, state.pagination.perPage);
+    });
+  });
+
+  // Update data when prop changes (client-side only)
+  $effect(() => {
+    if (data && !serverUrl) {
+      store.setData(data);
+    }
+  });
+
+  // Initial server fetch
+  onMount(() => {
+    if (serverUrl && store instanceof ServerDataTableStore) {
+      store.initialFetch();
+    }
+    return () => {
+      if (store instanceof ServerDataTableStore) {
+        store.destroy();
+      }
+    };
+  });
+
+  // Editor submit handler
+  async function handleEditorSubmit(formData: Record<string, any>) {
+    const isCreate = state.editingRowId === null;
+    try {
+      if (isCreate && onCreate) {
+        await onCreate(formData);
+      } else if (!isCreate && onEdit) {
+        const row = state.allRows.find((r) => store.getRowId(r) === state.editingRowId);
+        if (row) await onEdit(row, formData);
+      }
+      store.closeEditor();
+    } catch (err: any) {
+      if (err.errors) {
+        store.setValidationErrors(err.errors);
+      }
+    }
+  }
+
+  // Inline mode: handle cell edit commit
+  async function handleInlineCommit(row: any, columnKey: string, newValue: any, oldValue: any) {
+    try {
+      if (onCellEdit) {
+        await onCellEdit(row, columnKey, newValue, oldValue);
+      }
+      // Update local data
+      (row as any)[columnKey] = newValue;
+    } catch (err: any) {
+      // Revert on error
+      (row as any)[columnKey] = oldValue;
+      store.setError(err.message ?? 'Failed to save cell');
+    }
+  }
+
+  // Excel mode: commit cell edit and fire callback
+  async function handleExcelCommit() {
+    const result = store.commitCellEdit();
+    if (!result) return;
+    try {
+      if (onCellEdit) {
+        await onCellEdit(result.row, result.columnKey, result.newValue, result.oldValue);
+      }
+    } catch (err: any) {
+      // Revert on error
+      (result.row as any)[result.columnKey] = result.oldValue;
+      store.setError(err.message ?? 'Failed to save cell');
+    }
+  }
+
+  // Excel mode: navigate with cross-page support
+  function handleExcelNavigate(direction: 'up' | 'down' | 'left' | 'right') {
+    // Commit any pending edit first
+    const result = store.commitCellEdit();
+    if (result && onCellEdit) {
+      onCellEdit(result.row, result.columnKey, result.newValue, result.oldValue).catch(() => {
+        (result.row as any)[result.columnKey] = result.oldValue;
+      });
+    }
+
+    const pageResult = store.navigateCell(direction);
+    if (!pageResult) return;
+
+    const pagination = store.getState().pagination;
+    const visibleCols = store.getVisibleColumns();
+    const firstEditableCol = visibleCols.find((c) => c.editable !== false);
+    if (!firstEditableCol) return;
+
+    if (pageResult === 'page-next' && pagination.page < pagination.lastPage) {
+      store.setPage(pagination.page + 1);
+      // Focus first row of new page after recompute
+      setTimeout(() => store.focusCell(0, store.getState().excelFocusedCell?.columnKey ?? firstEditableCol.key), 0);
+    } else if (pageResult === 'page-prev' && pagination.page > 1) {
+      store.setPage(pagination.page - 1);
+      // Focus last row of previous page after recompute
+      setTimeout(() => {
+        const rows = store.getState().paginatedRows;
+        const colKey = store.getState().excelFocusedCell?.columnKey ?? firstEditableCol.key;
+        store.focusCell(rows.length - 1, colKey);
+      }, 0);
+    }
+  }
+
+  // Bubble editor anchor tracking
+  let bubbleAnchor: HTMLElement | null = $state(null);
+
+  // Virtual scroll tracking
+  let wrapperEl: HTMLDivElement | undefined = $state();
+  let scrollTop = $state(0);
+  let wrapperHeight = $state(400);
+
+  function handleWrapperScroll(e: Event) {
+    scrollTop = (e.target as HTMLDivElement).scrollTop;
+  }
+
+  // Table CSS classes
+  let tableClasses = $derived([
+    'sdt-table',
+    compact ? 'sdt-compact' : '',
+    striped ? 'sdt-striped' : '',
+    hover ? 'sdt-hover' : '',
+    bordered ? 'sdt-bordered' : '',
+    responsive ? 'sdt-responsive' : '',
+    editorMode === 'excel' ? 'sdt-excel' : '',
+    className,
+  ].filter(Boolean).join(' '));
+
+
+</script>
+
+<div class="{unstyled ? '' : 'sdt-container'} {classNames.container ?? ''} {className}">
+  <DataTableToolbar
+    {store}
+    {columns}
+    {searchable}
+    {searchDebounceMs}
+    {buttons}
+    {editorMode}
+    {classNames}
+    onDeleteClick={onDelete}
+  />
+
+  {#if state.error}
+    <div class="sdt-error">
+      <span>{state.error}</span>
+      <button type="button" onclick={() => store.setError(null)}>Dismiss</button>
+    </div>
+  {/if}
+
+  <div
+    bind:this={wrapperEl}
+    class="{unstyled ? '' : 'sdt-table-wrapper'} {classNames.table ?? ''}"
+    class:sdt-responsive={!unstyled && responsive}
+    class:sdt-virtual-wrapper={virtualScroll}
+    style:max-height={virtualScroll ? '500px' : undefined}
+    onscroll={virtualScroll ? handleWrapperScroll : undefined}
+  >
+    <table class="{unstyled ? '' : tableClasses}">
+      <DataTableHead {columns} {store} {selectable} {sortable} {expandable} {classNames} />
+      <DataTableBody
+        {columns}
+        {store}
+        {selectable}
+        {expandable}
+        {editorMode}
+        {emptyText}
+        {loadingText}
+        {rowClass}
+        {groupBy}
+        {classNames}
+        {onRowClick}
+        {customCell}
+        {expandContent}
+        onExcelNavigate={editorMode === 'excel' ? handleExcelNavigate : undefined}
+        onExcelCommit={editorMode === 'excel' ? handleExcelCommit : undefined}
+        onInlineCommit={editorMode === 'inline' ? handleInlineCommit : undefined}
+        onBubbleAnchor={editorMode === 'bubble' ? (el) => { bubbleAnchor = el; } : undefined}
+        {virtualScroll}
+        {virtualRowHeight}
+        {scrollTop}
+        containerHeight={500}
+      />
+      <DataTableFooter {columns} {store} {selectable} {expandable} {classNames} />
+    </table>
+  </div>
+
+  {#if paginate}
+    <DataTablePagination {store} {perPageOptions} {classNames} />
+  {/if}
+
+  {#if editorMode && editorMode !== 'excel' && editorFields}
+    <DataTableEditor
+      fields={editorFields}
+      {store}
+      {classNames}
+      onsubmit={handleEditorSubmit}
+      anchorEl={bubbleAnchor}
+    />
+  {/if}
+</div>
+
+<style>
+  .sdt-container {
+    background: var(--sdt-bg, #fff);
+    border: 1px solid var(--sdt-border, #e5e7eb);
+    border-radius: 0.5rem;
+    font-family: var(--sdt-font, inherit);
+  }
+
+  .sdt-table-wrapper {
+    overflow-x: auto;
+  }
+  .sdt-table-wrapper.sdt-responsive {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+  .sdt-virtual-wrapper {
+    overflow-y: auto;
+  }
+
+  .sdt-table {
+    width: 100%;
+    border-collapse: collapse;
+    table-layout: auto;
+  }
+
+  .sdt-table :global(.sdt-compact .sdt-cell),
+  .sdt-table :global(.sdt-compact .sdt-th) {
+    padding: 0.375rem 0.5rem;
+  }
+
+  .sdt-error {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.625rem 1rem;
+    background: #fef2f2;
+    border-bottom: 1px solid #fecaca;
+    color: #dc2626;
+    font-size: 0.8125rem;
+  }
+  .sdt-error button {
+    background: none;
+    border: none;
+    color: #dc2626;
+    cursor: pointer;
+    text-decoration: underline;
+    font-size: 0.8125rem;
+  }
+
+  /* Stripe via CSS variables so DataTableRow can use them */
+  :global(.sdt-striped .sdt-row-even) {
+    --sdt-row-stripe: rgba(0, 0, 0, 0.02);
+    background-color: var(--sdt-row-stripe);
+  }
+
+  :global(.sdt-hover .sdt-row:hover) {
+    --sdt-row-hover: #f9fafb;
+    background-color: var(--sdt-row-hover) !important;
+  }
+
+  :global(.sdt-bordered .sdt-cell),
+  :global(.sdt-bordered .sdt-th),
+  :global(.sdt-bordered .sdt-tf) {
+    border: 1px solid var(--sdt-border, #e5e7eb);
+  }
+</style>

package/src/ui/DataTableBody.svelte

@@ -0,0 +1,180 @@
+<script lang="ts">
+  import type { ColumnDef, DataTableStore, SelectionMode, EditorMode, DataTableClassNames } from '../index.js';
+  import type { Snippet } from 'svelte';
+  import DataTableRow from './DataTableRow.svelte';
+  import DataTableLoading from './DataTableLoading.svelte';
+  import DataTableEmpty from './DataTableEmpty.svelte';
+
+  interface Props {
+    columns: ColumnDef[];
+    store: DataTableStore;
+    selectable?: SelectionMode;
+    expandable?: boolean;
+    editorMode?: EditorMode;
+    emptyText?: string;
+    loadingText?: string;
+    rowClass?: string | ((row: any, index: number) => string);
+    onRowClick?: (row: any, event: MouseEvent) => void;
+    customCell?: Snippet<[{ row: any; column: ColumnDef; value: any }]>;
+    expandContent?: Snippet<[{ row: any }]>;
+    onExcelNavigate?: (direction: 'up' | 'down' | 'left' | 'right') => void;
+    onExcelCommit?: () => void;
+    onInlineCommit?: (row: any, columnKey: string, newValue: any, oldValue: any) => void;
+    groupBy?: string;
+    onBubbleAnchor?: (el: HTMLElement) => void;
+    classNames?: DataTableClassNames;
+    virtualScroll?: boolean;
+    virtualRowHeight?: number;
+    scrollTop?: number;
+    containerHeight?: number;
+  }
+  let {
+    columns,
+    store,
+    selectable = 'none',
+    expandable = false,
+    editorMode,
+    emptyText = 'No data available',
+    loadingText = 'Loading...',
+    rowClass,
+    onRowClick,
+    customCell,
+    expandContent,
+    onExcelNavigate,
+    onExcelCommit,
+    onInlineCommit,
+    groupBy,
+    onBubbleAnchor,
+    classNames = {},
+    virtualScroll = false,
+    virtualRowHeight = 48,
+    scrollTop = 0,
+    containerHeight = 500,
+  }: Props = $props();
+
+  let state = $state(store.getState());
+  $effect(() => {
+    return store.subscribe(() => {
+      state = store.getState();
+    });
+  });
+
+  let visibleColCount = $derived(
+    state.columnOrder.filter((key) => state.columnVisibility[key] !== false).length
+    + (selectable !== 'none' ? 1 : 0)
+    + (expandable ? 1 : 0)
+  );
+
+  // Group rows by column value when groupBy is set
+  let groupedRows = $derived(() => {
+    if (!groupBy) return null;
+    const groups: { key: string; rows: any[] }[] = [];
+    const map = new Map<string, any[]>();
+    for (const row of state.paginatedRows) {
+      const key = String((row as any)[groupBy] ?? 'Other');
+      if (!map.has(key)) {
+        const arr: any[] = [];
+        map.set(key, arr);
+        groups.push({ key, rows: arr });
+      }
+      map.get(key)!.push(row);
+    }
+    return groups;
+  });
+
+  // Virtual scroll: compute visible row range
+  let overscan = 5;
+  let virtualVisibleStart = $derived(
+    virtualScroll ? Math.max(0, Math.floor(scrollTop / virtualRowHeight) - overscan) : 0
+  );
+  let virtualVisibleEnd = $derived(
+    virtualScroll
+      ? Math.min(state.paginatedRows.length, Math.ceil((scrollTop + containerHeight) / virtualRowHeight) + overscan)
+      : state.paginatedRows.length
+  );
+  let virtualTopPad = $derived(virtualScroll ? virtualVisibleStart * virtualRowHeight : 0);
+  let virtualBottomPad = $derived(
+    virtualScroll ? Math.max(0, (state.paginatedRows.length - virtualVisibleEnd) * virtualRowHeight) : 0
+  );
+  let virtualRows = $derived(
+    virtualScroll
+      ? state.paginatedRows.slice(virtualVisibleStart, virtualVisibleEnd)
+      : state.paginatedRows
+  );
+</script>
+
+<tbody class="sdt-tbody {classNames.tbody ?? ''}">
+  {#if state.loading}
+    <DataTableLoading text={loadingText} colSpan={visibleColCount} />
+  {:else if state.paginatedRows.length === 0}
+    <DataTableEmpty text={emptyText} colSpan={visibleColCount} />
+  {:else if groupBy && groupedRows()}
+    {#each groupedRows()! as group}
+      <tr class="sdt-group-header">
+        <td colspan={visibleColCount} class="sdt-group-cell">{group.key}</td>
+      </tr>
+      {#each group.rows as row, index (store.getRowId(row))}
+        <DataTableRow
+          {row}
+          {index}
+          {columns}
+          {store}
+          {selectable}
+          {expandable}
+          {editorMode}
+          {rowClass}
+          {classNames}
+          {onRowClick}
+          {customCell}
+          {expandContent}
+          {onExcelNavigate}
+          {onExcelCommit}
+          {onInlineCommit}
+          {onBubbleAnchor}
+        />
+      {/each}
+    {/each}
+  {:else}
+    {#if virtualScroll && virtualTopPad > 0}
+      <tr style="height: {virtualTopPad}px;"><td colspan={visibleColCount}></td></tr>
+    {/if}
+    {#each virtualRows as row, i (store.getRowId(row))}
+      {@const index = virtualScroll ? virtualVisibleStart + i : i}
+      <DataTableRow
+        {row}
+        {index}
+        {columns}
+        {store}
+        {selectable}
+        {expandable}
+        {editorMode}
+        {rowClass}
+        {classNames}
+        {onRowClick}
+        {customCell}
+        {expandContent}
+        {onExcelNavigate}
+        {onExcelCommit}
+        {onInlineCommit}
+      />
+    {/each}
+    {#if virtualScroll && virtualBottomPad > 0}
+      <tr style="height: {virtualBottomPad}px;"><td colspan={visibleColCount}></td></tr>
+    {/if}
+  {/if}
+</tbody>
+
+<style>
+  .sdt-group-header {
+    background: var(--sdt-group-bg, #f3f4f6);
+  }
+  .sdt-group-cell {
+    padding: 0.5rem 0.75rem;
+    font-weight: 600;
+    font-size: 0.8125rem;
+    color: var(--sdt-text-muted, #6b7280);
+    text-transform: uppercase;
+    letter-spacing: 0.03em;
+    border-bottom: 1px solid var(--sdt-border, #e5e7eb);
+  }
+</style>

package/src/ui/DataTableBubbleEditor.svelte

@@ -0,0 +1,93 @@
+<script lang="ts">
+  import type { EditorFieldDef, DataTableStore, DataTableClassNames } from '../index.js';
+  import DataTableEditorForm from './DataTableEditorForm.svelte';
+  import { tick } from 'svelte';
+
+  interface Props {
+    fields: EditorFieldDef[];
+    store: DataTableStore;
+    anchorEl?: HTMLElement | null;
+    classNames?: DataTableClassNames;
+    onsubmit: (formData: Record<string, any>) => void | Promise<void>;
+  }
+  let { fields, store, anchorEl = null, classNames = {}, onsubmit }: Props = $props();
+
+  let state = $state(store.getState());
+  $effect(() => {
+    return store.subscribe(() => {
+      state = store.getState();
+    });
+  });
+
+  let isOpen = $derived(state.editorMode === 'bubble');
+  let popoverStyle = $state('');
+
+  // Get only the field for the column being edited
+  let activeFields = $derived(() => {
+    if (state.editingColumn) {
+      const field = fields.find((f) => f.name === state.editingColumn);
+      return field ? [field] : fields;
+    }
+    return fields;
+  });
+
+  // Position the bubble editor relative to the editing row
+  $effect(() => {
+    if (!isOpen) return;
+
+    // Use anchorEl if provided, otherwise find the selected row in the DOM
+    async function position() {
+      await tick();
+      let el = anchorEl;
+      if (!el) {
+        el = document.querySelector('.sdt-row-selected') as HTMLElement | null;
+      }
+      if (el) {
+        const rect = el.getBoundingClientRect();
+        popoverStyle = `top: ${rect.bottom + 4}px; left: ${rect.left}px;`;
+      }
+    }
+    position();
+  });
+
+  function close() {
+    store.closeEditor();
+  }
+</script>
+
+{#if isOpen}
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div class="sdt-bubble-backdrop" onclick={close}></div>
+  <div class="sdt-bubble-editor" style={popoverStyle}>
+    <DataTableEditorForm
+      fields={activeFields()}
+      {store}
+      {onsubmit}
+      oncancel={close}
+    />
+  </div>
+{/if}
+
+<style>
+  .sdt-bubble-backdrop {
+    position: fixed;
+    inset: 0;
+    z-index: 40;
+  }
+  .sdt-bubble-editor {
+    position: fixed;
+    z-index: 41;
+    background: var(--sdt-bg, #fff);
+    border: 1px solid var(--sdt-border, #e5e7eb);
+    border-radius: 0.375rem;
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+    padding: 0.75rem;
+    min-width: 220px;
+    max-width: 320px;
+    animation: sdt-pop-in 0.15s ease;
+  }
+  @keyframes sdt-pop-in {
+    from { opacity: 0; transform: translateY(-4px); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+</style>