@beeblock/svelar-datatable 0.1.0

package/src/ui/DataTableModalEditor.svelte

@@ -0,0 +1,126 @@
+<script lang="ts">
+  import type { EditorFieldDef, DataTableStore, DataTableClassNames } from '../index.js';
+  import DataTableEditorForm from './DataTableEditorForm.svelte';
+
+  interface Props {
+    fields: EditorFieldDef[];
+    store: DataTableStore;
+    title?: string;
+    classNames?: DataTableClassNames;
+    onsubmit: (formData: Record<string, any>) => void | Promise<void>;
+  }
+  let { fields, store, title = 'Edit Record', classNames = {}, onsubmit }: Props = $props();
+
+  let state = $state(store.getState());
+  $effect(() => {
+    return store.subscribe(() => {
+      state = store.getState();
+    });
+  });
+
+  let isOpen = $derived(state.editorMode === 'modal');
+  let isCreate = $derived(state.editingRowId === null);
+
+  function close() {
+    store.closeEditor();
+  }
+
+  function handleBackdrop(e: MouseEvent) {
+    if ((e.target as HTMLElement).classList.contains('sdt-modal-backdrop')) {
+      close();
+    }
+  }
+
+  function handleKeydown(e: KeyboardEvent) {
+    if (e.key === 'Escape') close();
+  }
+</script>
+
+<svelte:window onkeydown={handleKeydown} />
+
+{#if isOpen}
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div class="sdt-modal-backdrop {classNames.editorBackdrop ?? ''}" onclick={handleBackdrop}>
+    <div class="sdt-modal {classNames.editorModal ?? ''}" role="dialog" aria-modal="true">
+      <div class="sdt-modal-header">
+        <h3 class="sdt-modal-title">{isCreate ? 'Create Record' : title}</h3>
+        <button type="button" class="sdt-modal-close" onclick={close} aria-label="Close">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="18" height="18">
+            <path d="M18 6 6 18M6 6l12 12" />
+          </svg>
+        </button>
+      </div>
+      <div class="sdt-modal-body">
+        <DataTableEditorForm
+          {fields}
+          {store}
+          {onsubmit}
+          oncancel={close}
+          submitLabel={isCreate ? 'Create' : 'Save'}
+        />
+      </div>
+    </div>
+  </div>
+{/if}
+
+<style>
+  .sdt-modal-backdrop {
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 50;
+    animation: sdt-fade-in 0.15s ease;
+  }
+  .sdt-modal {
+    background: var(--sdt-bg, #fff);
+    border-radius: 0.5rem;
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
+    width: 90%;
+    max-width: 480px;
+    max-height: 85vh;
+    display: flex;
+    flex-direction: column;
+    animation: sdt-slide-up 0.2s ease;
+  }
+  .sdt-modal-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 1rem 1.25rem;
+    border-bottom: 1px solid var(--sdt-border, #e5e7eb);
+  }
+  .sdt-modal-title {
+    margin: 0;
+    font-size: 1rem;
+    font-weight: 600;
+    color: var(--sdt-text, #111827);
+  }
+  .sdt-modal-close {
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: var(--sdt-text-muted, #6b7280);
+    padding: 0.25rem;
+    border-radius: 0.25rem;
+    display: flex;
+  }
+  .sdt-modal-close:hover {
+    background: var(--sdt-hover, #f3f4f6);
+    color: var(--sdt-text, #111827);
+  }
+  .sdt-modal-body {
+    padding: 1.25rem;
+    overflow-y: auto;
+  }
+  @keyframes sdt-fade-in {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+  @keyframes sdt-slide-up {
+    from { transform: translateY(10px); opacity: 0; }
+    to { transform: translateY(0); opacity: 1; }
+  }
+</style>

package/src/ui/DataTablePagination.svelte

@@ -0,0 +1,205 @@
+<script lang="ts">
+  import type { DataTableStore, DataTableClassNames } from '../index.js';
+
+  interface Props {
+    store: DataTableStore;
+    perPageOptions?: number[];
+    classNames?: DataTableClassNames;
+  }
+  let { store, perPageOptions = [10, 15, 25, 50, 100], classNames = {} }: Props = $props();
+
+  let state = $state(store.getState());
+  $effect(() => {
+    return store.subscribe(() => {
+      state = store.getState();
+    });
+  });
+
+  let pagination = $derived(state.pagination);
+  let from = $derived(pagination.total === 0 ? 0 : (pagination.page - 1) * pagination.perPage + 1);
+  let to = $derived(Math.min(pagination.page * pagination.perPage, pagination.total));
+
+  // Generate page numbers with ellipsis
+  let pages = $derived(() => {
+    const total = pagination.lastPage;
+    const current = pagination.page;
+    const result: (number | '...')[] = [];
+    if (total <= 7) {
+      for (let i = 1; i <= total; i++) result.push(i);
+    } else {
+      result.push(1);
+      if (current > 3) result.push('...');
+      const start = Math.max(2, current - 1);
+      const end = Math.min(total - 1, current + 1);
+      for (let i = start; i <= end; i++) result.push(i);
+      if (current < total - 2) result.push('...');
+      result.push(total);
+    }
+    return result;
+  });
+
+  function setPage(p: number) {
+    store.setPage(p);
+  }
+
+  function handlePerPage(e: Event) {
+    store.setPerPage(Number((e.target as HTMLSelectElement).value));
+  }
+</script>
+
+<div class="sdt-pagination {classNames.pagination ?? ''}">
+  <div class="sdt-pagination-info {classNames.paginationInfo ?? ''}">
+    <span class="sdt-pagination-showing">
+      Showing {from} to {to} of {pagination.total}
+    </span>
+    <label class="sdt-per-page">
+      <select value={pagination.perPage} onchange={handlePerPage} class="sdt-per-page-select {classNames.perPageSelect ?? ''}">
+        {#each perPageOptions as opt}
+          <option value={opt}>{opt}</option>
+        {/each}
+      </select>
+      per page
+    </label>
+  </div>
+
+  <div class="sdt-pagination-controls {classNames.paginationControls ?? ''}">
+    <button
+      type="button"
+      class="sdt-page-btn {classNames.pageButton ?? ''}"
+      disabled={pagination.page <= 1}
+      onclick={() => setPage(1)}
+      aria-label="First page"
+    >
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14">
+        <path d="m11 17-5-5 5-5M18 17l-5-5 5-5" />
+      </svg>
+    </button>
+    <button
+      type="button"
+      class="sdt-page-btn {classNames.pageButton ?? ''}"
+      disabled={pagination.page <= 1}
+      onclick={() => setPage(pagination.page - 1)}
+      aria-label="Previous page"
+    >
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14">
+        <path d="m15 18-6-6 6-6" />
+      </svg>
+    </button>
+
+    {#each pages() as p}
+      {#if p === '...'}
+        <span class="sdt-page-ellipsis">...</span>
+      {:else}
+        <button
+          type="button"
+          class="sdt-page-btn {classNames.pageButton ?? ''}"
+          class:sdt-page-active={p === pagination.page}
+          onclick={() => setPage(p)}
+        >
+          {p}
+        </button>
+      {/if}
+    {/each}
+
+    <button
+      type="button"
+      class="sdt-page-btn {classNames.pageButton ?? ''}"
+      disabled={pagination.page >= pagination.lastPage}
+      onclick={() => setPage(pagination.page + 1)}
+      aria-label="Next page"
+    >
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14">
+        <path d="m9 18 6-6-6-6" />
+      </svg>
+    </button>
+    <button
+      type="button"
+      class="sdt-page-btn {classNames.pageButton ?? ''}"
+      disabled={pagination.page >= pagination.lastPage}
+      onclick={() => setPage(pagination.lastPage)}
+      aria-label="Last page"
+    >
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14">
+        <path d="m6 17 5-5-5-5M13 17l5-5-5-5" />
+      </svg>
+    </button>
+  </div>
+</div>
+
+<style>
+  .sdt-pagination {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.75rem 1rem;
+    border-top: 1px solid var(--sdt-border, #e5e7eb);
+    font-size: 0.8125rem;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+  }
+  .sdt-pagination-info {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    color: var(--sdt-text-muted, #6b7280);
+  }
+  .sdt-per-page {
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+    color: var(--sdt-text-muted, #6b7280);
+    cursor: pointer;
+  }
+  .sdt-per-page-select {
+    padding: 0.25rem 0.375rem;
+    border: 1px solid var(--sdt-border, #e5e7eb);
+    border-radius: 0.25rem;
+    background: var(--sdt-input-bg, #fff);
+    color: var(--sdt-text, #111827);
+    font-size: 0.8125rem;
+    cursor: pointer;
+  }
+  .sdt-pagination-controls {
+    display: flex;
+    align-items: center;
+    gap: 0.125rem;
+  }
+  .sdt-page-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 2rem;
+    height: 2rem;
+    padding: 0 0.375rem;
+    border: 1px solid var(--sdt-border, #e5e7eb);
+    border-radius: 0.25rem;
+    background: var(--sdt-input-bg, #fff);
+    color: var(--sdt-text, #111827);
+    cursor: pointer;
+    font-size: 0.8125rem;
+    transition: background-color 0.15s, border-color 0.15s;
+  }
+  .sdt-page-btn:hover:not(:disabled) {
+    background-color: var(--sdt-hover, #f3f4f6);
+  }
+  .sdt-page-btn:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+  .sdt-page-active {
+    background-color: var(--sdt-primary, #3b82f6);
+    border-color: var(--sdt-primary, #3b82f6);
+    color: #fff;
+  }
+  .sdt-page-active:hover:not(:disabled) {
+    background-color: var(--sdt-primary, #3b82f6);
+  }
+  .sdt-page-ellipsis {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 2rem;
+    height: 2rem;
+    color: var(--sdt-text-muted, #6b7280);
+  }
+</style>

package/src/ui/DataTableRow.svelte

@@ -0,0 +1,192 @@
+<script lang="ts">
+  import type { ColumnDef, DataTableStore, SelectionMode, EditorMode, DataTableClassNames } from '../index.js';
+  import type { Snippet } from 'svelte';
+  import DataTableCell from './DataTableCell.svelte';
+  import DataTableExpandedRow from './DataTableExpandedRow.svelte';
+
+  interface Props {
+    row: any;
+    index: number;
+    columns: ColumnDef[];
+    store: DataTableStore;
+    selectable?: SelectionMode;
+    expandable?: boolean;
+    editorMode?: EditorMode;
+    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;
+    onBubbleAnchor?: (el: HTMLElement) => void;
+    classNames?: DataTableClassNames;
+  }
+  let {
+    row,
+    index,
+    columns,
+    store,
+    selectable = 'none',
+    expandable = false,
+    editorMode,
+    rowClass,
+    onRowClick,
+    customCell,
+    expandContent,
+    onExcelNavigate,
+    onExcelCommit,
+    onInlineCommit,
+    onBubbleAnchor,
+    classNames = {},
+  }: Props = $props();
+
+  let state = $state(store.getState());
+  $effect(() => {
+    return store.subscribe(() => {
+      state = store.getState();
+    });
+  });
+
+  let rowId = $derived(store.getRowId(row));
+  let isSelected = $derived(state.selectedIds.has(rowId));
+  let expanded = $state(false);
+
+  let visibleColumns = $derived(
+    state.columnOrder
+      .filter((key) => state.columnVisibility[key] !== false)
+      .map((key) => columns.find((c) => c.key === key))
+      .filter(Boolean) as ColumnDef[]
+  );
+
+  let computedClass = $derived(() => {
+    if (!rowClass) return '';
+    if (typeof rowClass === 'function') return rowClass(row, index);
+    return rowClass;
+  });
+
+  let totalCols = $derived(
+    visibleColumns.length + (selectable !== 'none' ? 1 : 0) + (expandable ? 1 : 0)
+  );
+
+  function handleClick(e: MouseEvent) {
+    if (selectable === 'multi') {
+      const lastId = store.getLastSelectedId();
+      if (e.shiftKey && lastId !== null) {
+        store.selectRange(lastId, rowId);
+      } else {
+        store.toggleSelect(rowId);
+      }
+    } else if (selectable === 'single') {
+      if (isSelected) {
+        store.deselectAll();
+      } else {
+        store.selectSingle(rowId);
+      }
+    }
+    onRowClick?.(row, e);
+  }
+
+  function toggleExpand(e: Event) {
+    e.stopPropagation();
+    expanded = !expanded;
+  }
+
+  let trEl: HTMLTableRowElement | undefined = $state();
+
+  // Report this row element as the bubble anchor when it becomes the editing row
+  $effect(() => {
+    if (trEl && state.editingRowId === rowId && state.editorMode === 'bubble') {
+      onBubbleAnchor?.(trEl);
+    }
+  });
+</script>
+
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+<tr
+  bind:this={trEl}
+  class="sdt-row {computedClass()} {classNames.tr ?? ''} {isSelected ? classNames.trSelected ?? '' : ''} {index % 2 === 1 ? classNames.trEven ?? '' : ''}"
+  class:sdt-row-selected={isSelected}
+  class:sdt-row-even={index % 2 === 1}
+  onclick={handleClick}
+>
+  {#if selectable === 'multi'}
+    <td class="sdt-cell sdt-cell-checkbox {classNames.td ?? ''}">
+      <input type="checkbox" checked={isSelected} onchange={() => store.toggleSelect(rowId)} />
+    </td>
+  {:else if selectable === 'single'}
+    <td class="sdt-cell sdt-cell-checkbox {classNames.td ?? ''}">
+      <input type="radio" checked={isSelected} name="sdt-select" />
+    </td>
+  {/if}
+
+  {#if expandable}
+    <td class="sdt-cell sdt-cell-expand {classNames.td ?? ''}">
+      <button type="button" class="sdt-expand-btn" onclick={toggleExpand} aria-label="Expand row">
+        <svg
+          viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14"
+          class="sdt-expand-icon"
+          class:sdt-expanded={expanded}
+        >
+          <path d="m9 18 6-6-6-6" />
+        </svg>
+      </button>
+    </td>
+  {/if}
+
+  {#each visibleColumns as col}
+    <DataTableCell {row} rowIndex={index} column={col} {store} editorMode={editorMode ?? null} {customCell} {onExcelNavigate} {onExcelCommit} {onInlineCommit} tdClass={classNames.td} />
+  {/each}
+</tr>
+
+{#if expandable && expanded}
+  <DataTableExpandedRow {row} colSpan={totalCols} {expandContent} />
+{/if}
+
+<style>
+  .sdt-row {
+    transition: background-color 0.1s;
+  }
+  .sdt-row:hover {
+    background-color: var(--sdt-row-hover, #f9fafb);
+  }
+  .sdt-row-selected {
+    background-color: var(--sdt-row-selected, rgba(59, 130, 246, 0.08)) !important;
+  }
+  .sdt-row-even {
+    background-color: var(--sdt-row-stripe, transparent);
+  }
+  .sdt-cell-checkbox {
+    text-align: center;
+    width: 40px;
+    padding: var(--sdt-cell-padding, 0.625rem 0.75rem);
+    border-bottom: 1px solid var(--sdt-border, #e5e7eb);
+  }
+  .sdt-cell-checkbox input {
+    accent-color: var(--sdt-primary, #3b82f6);
+  }
+  .sdt-cell-expand {
+    width: 32px;
+    padding: var(--sdt-cell-padding, 0.625rem 0.5rem);
+    border-bottom: 1px solid var(--sdt-border, #e5e7eb);
+  }
+  .sdt-expand-btn {
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 0.125rem;
+    display: flex;
+    color: var(--sdt-text-muted, #6b7280);
+    border-radius: 0.25rem;
+  }
+  .sdt-expand-btn:hover {
+    background: var(--sdt-hover, #f3f4f6);
+  }
+  .sdt-expand-icon {
+    transition: transform 0.15s;
+  }
+  .sdt-expanded {
+    transform: rotate(90deg);
+  }
+</style>

package/src/ui/DataTableSearch.svelte

@@ -0,0 +1,95 @@
+<script lang="ts">
+  import type { DataTableStore } from '../index.js';
+
+  interface Props {
+    store: DataTableStore;
+    debounceMs?: number;
+    placeholder?: string;
+    searchInputClass?: string;
+  }
+  let { store, debounceMs = 300, placeholder = 'Search...', searchInputClass = '' }: Props = $props();
+
+  let inputValue = $state(store.getState().globalSearch);
+  let timer: ReturnType<typeof setTimeout> | null = null;
+
+  function handleInput(e: Event) {
+    const val = (e.target as HTMLInputElement).value;
+    inputValue = val;
+    if (timer) clearTimeout(timer);
+    timer = setTimeout(() => {
+      store.setGlobalSearch(val);
+    }, debounceMs);
+  }
+
+  function handleClear() {
+    inputValue = '';
+    store.setGlobalSearch('');
+  }
+</script>
+
+<div class="sdt-search">
+  <svg class="sdt-search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+    <circle cx="11" cy="11" r="8" />
+    <path d="m21 21-4.3-4.3" />
+  </svg>
+  <input
+    type="text"
+    class="sdt-search-input {searchInputClass}"
+    value={inputValue}
+    oninput={handleInput}
+    {placeholder}
+  />
+  {#if inputValue}
+    <button type="button" class="sdt-search-clear" onclick={handleClear} aria-label="Clear search">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14">
+        <path d="M18 6 6 18M6 6l12 12" />
+      </svg>
+    </button>
+  {/if}
+</div>
+
+<style>
+  .sdt-search {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+  .sdt-search-icon {
+    position: absolute;
+    left: 0.625rem;
+    width: 1rem;
+    height: 1rem;
+    color: var(--sdt-text-muted, #6b7280);
+    pointer-events: none;
+  }
+  .sdt-search-input {
+    padding: 0.5rem 2rem 0.5rem 2.25rem;
+    border: 1px solid var(--sdt-border, #e5e7eb);
+    border-radius: 0.375rem;
+    font-size: 0.875rem;
+    background: var(--sdt-input-bg, #fff);
+    color: var(--sdt-text, #111827);
+    outline: none;
+    width: 100%;
+    max-width: 280px;
+    transition: border-color 0.15s;
+  }
+  .sdt-search-input:focus {
+    border-color: var(--sdt-primary, #3b82f6);
+    box-shadow: 0 0 0 2px var(--sdt-primary-ring, rgba(59, 130, 246, 0.2));
+  }
+  .sdt-search-clear {
+    position: absolute;
+    right: 0.5rem;
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: var(--sdt-text-muted, #6b7280);
+    padding: 2px;
+    display: flex;
+    align-items: center;
+  }
+  .sdt-search-clear:hover {
+    color: var(--sdt-text, #111827);
+  }
+</style>