@beeblock/svelar-datatable 0.1.5 → 0.1.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@beeblock/svelar-datatable",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "description": "Full-featured DataTable plugin for Svelar — sorting, searching, pagination, inline editing, export, and server-side processing",
   "type": "module",
   "keywords": [
@@ -45,6 +45,10 @@
   "files": [
     "dist",
     "src/ui",
+    "src/state",
+    "src/export",
+    "src/types.ts",
+    "src/index.ts",
     "src/publishable",
     "LICENSE"
   ],

package/src/export/ExportManager.ts

@@ -0,0 +1,30 @@
+import type { ColumnDef, ExportFormat } from '../types.js';
+import { generateCSV, downloadCSV } from './csv.js';
+import { copyToClipboard } from './clipboard.js';
+import { printTable } from './print.js';
+import { exportExcel } from './excel.js';
+import { exportPdf } from './pdf.js';
+
+export class ExportManager<T = any> {
+  async export(format: ExportFormat, data: T[], columns: ColumnDef<T>[], filename?: string): Promise<void> {
+    switch (format) {
+      case 'csv': {
+        const csv = generateCSV(data, columns);
+        downloadCSV(csv, filename ?? 'export.csv');
+        break;
+      }
+      case 'excel':
+        await exportExcel(data, columns, filename ?? 'export.xlsx');
+        break;
+      case 'pdf':
+        exportPdf(data, columns, filename ?? 'export.pdf');
+        break;
+      case 'clipboard':
+        await copyToClipboard(data, columns);
+        break;
+      case 'print':
+        printTable(data, columns);
+        break;
+    }
+  }
+}

package/src/export/clipboard.ts

@@ -0,0 +1,14 @@
+import type { ColumnDef } from '../types.js';
+
+export async function copyToClipboard<T>(data: T[], columns: ColumnDef<T>[]): Promise<void> {
+  const visibleCols = columns.filter((c) => c.visible !== false);
+  const header = visibleCols.map((c) => c.header).join('\t');
+  const rows = data.map((row: any) =>
+    visibleCols.map((col) => {
+      const val = row[col.key];
+      return val === null || val === undefined ? '' : String(val);
+    }).join('\t')
+  );
+  const text = [header, ...rows].join('\n');
+  await navigator.clipboard.writeText(text);
+}

package/src/export/csv.ts

@@ -0,0 +1,36 @@
+import type { ColumnDef } from '../types.js';
+
+function escapeCSV(value: any): string {
+  if (value === null || value === undefined) return '';
+  const str = String(value);
+  if (str.includes(',') || str.includes('"') || str.includes('\n') || str.includes('\r')) {
+    return '"' + str.replace(/"/g, '""') + '"';
+  }
+  return str;
+}
+
+export function generateCSV<T>(data: T[], columns: ColumnDef<T>[]): string {
+  const visibleCols = columns.filter((c) => c.visible !== false);
+  const header = visibleCols.map((c) => escapeCSV(c.header)).join(',');
+  const rows = data.map((row: any) =>
+    visibleCols.map((col) => escapeCSV(row[col.key])).join(',')
+  );
+  // BOM for Excel UTF-8 compatibility
+  return '\uFEFF' + [header, ...rows].join('\r\n');
+}
+
+export function downloadCSV(content: string, filename: string = 'export.csv') {
+  const blob = new Blob([content], { type: 'text/csv;charset=utf-8;' });
+  downloadBlob(blob, filename);
+}
+
+export function downloadBlob(blob: Blob, filename: string) {
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = filename;
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+  URL.revokeObjectURL(url);
+}

package/src/export/excel.ts

@@ -0,0 +1,44 @@
+import type { ColumnDef } from '../types.js';
+import { downloadBlob } from './csv.js';
+
+export async function exportExcel<T>(data: T[], columns: ColumnDef<T>[], filename: string = 'export.xlsx') {
+  let ExcelJS: any;
+  try {
+    ExcelJS = await import('exceljs');
+  } catch {
+    throw new Error('exceljs is required for Excel export. Install it: npm install exceljs');
+  }
+
+  const workbook = new ExcelJS.Workbook();
+  const worksheet = workbook.addWorksheet('Data');
+  const visibleCols = columns.filter((c) => c.visible !== false);
+
+  // Header row
+  worksheet.columns = visibleCols.map((col) => ({
+    header: col.header,
+    key: col.key,
+    width: 20,
+  }));
+
+  // Style header
+  const headerRow = worksheet.getRow(1);
+  headerRow.font = { bold: true };
+  headerRow.fill = {
+    type: 'pattern',
+    pattern: 'solid',
+    fgColor: { argb: 'FFF0F0F0' },
+  };
+
+  // Data rows
+  for (const row of data) {
+    const rowData: Record<string, any> = {};
+    for (const col of visibleCols) {
+      rowData[col.key] = (row as any)[col.key] ?? '';
+    }
+    worksheet.addRow(rowData);
+  }
+
+  const buffer = await workbook.xlsx.writeBuffer();
+  const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
+  downloadBlob(blob, filename);
+}

package/src/export/index.ts

@@ -0,0 +1,6 @@
+export { generateCSV, downloadCSV, downloadBlob } from './csv.js';
+export { copyToClipboard } from './clipboard.js';
+export { printTable } from './print.js';
+export { exportExcel } from './excel.js';
+export { exportPdf } from './pdf.js';
+export { ExportManager } from './ExportManager.js';

package/src/export/pdf.ts

@@ -0,0 +1,9 @@
+import type { ColumnDef } from '../types.js';
+import { generateCSV } from './csv.js';
+import { printTable } from './print.js';
+
+export function exportPdf<T>(data: T[], columns: ColumnDef<T>[], filename: string = 'export.pdf') {
+  // Use browser print as fallback (generates PDF via print dialog)
+  // For server-side PDF, users should use @beeblock/svelar/pdf directly
+  printTable(data, columns, filename.replace('.pdf', ''));
+}

package/src/export/print.ts

@@ -0,0 +1,42 @@
+import type { ColumnDef } from '../types.js';
+
+export function printTable<T>(data: T[], columns: ColumnDef<T>[], title?: string) {
+  const visibleCols = columns.filter((c) => c.visible !== false);
+
+  const headerCells = visibleCols.map((c) => `<th style="border:1px solid #ddd;padding:8px 12px;text-align:left;background:#f5f5f5;font-weight:600;">${escapeHtml(c.header)}</th>`).join('');
+  const bodyRows = data.map((row: any) => {
+    const cells = visibleCols.map((col) => {
+      const val = row[col.key];
+      return `<td style="border:1px solid #ddd;padding:8px 12px;">${escapeHtml(val === null || val === undefined ? '' : String(val))}</td>`;
+    }).join('');
+    return `<tr>${cells}</tr>`;
+  }).join('');
+
+  const html = `<!DOCTYPE html>
+<html><head>
+<title>${escapeHtml(title ?? 'Data Export')}</title>
+<style>
+  body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; margin: 20px; }
+  table { border-collapse: collapse; width: 100%; font-size: 13px; }
+  h1 { font-size: 18px; margin-bottom: 16px; }
+  @media print { h1 { margin-top: 0; } }
+</style>
+</head><body>
+${title ? `<h1>${escapeHtml(title)}</h1>` : ''}
+<table>
+  <thead><tr>${headerCells}</tr></thead>
+  <tbody>${bodyRows}</tbody>
+</table>
+</body></html>`;
+
+  const win = window.open('', '_blank');
+  if (!win) return;
+  win.document.write(html);
+  win.document.close();
+  win.focus();
+  setTimeout(() => win.print(), 250);
+}
+
+function escapeHtml(str: string): string {
+  return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+}

package/src/index.ts

@@ -0,0 +1,22 @@
+export { DataTableStore } from './state/DataTableStore.js';
+export { ServerDataTableStore } from './state/ServerDataTableStore.js';
+export { ExportManager } from './export/ExportManager.js';
+export type {
+  ColumnDef,
+  ColumnType,
+  FilterOperator,
+  SelectionMode,
+  EditorMode,
+  FieldType,
+  ExportFormat,
+  SortState,
+  FilterState,
+  PaginationState,
+  DataTableRequest,
+  DataTableResponse,
+  EditorFieldDef,
+  ButtonDef,
+  DataTableConfig,
+  DataTableClassNames,
+  DataTableState,
+} from './types.js';

package/src/state/DataTableStore.ts

@@ -0,0 +1,599 @@
+import type { ColumnDef, DataTableConfig, DataTableState, FilterState, SortState, PaginationState } from '../types.js';
+
+type Listener = () => void;
+
+export class DataTableStore<T = any> {
+  private _state: DataTableState<T>;
+  private _listeners = new Set<Listener>();
+  private _columns: ColumnDef<T>[] = [];
+  private _rowIdFn: (row: T) => string | number;
+  private _stateSaveKey: string | null = null;
+  private _lastSelectedId: string | number | null = null;
+  private _paginate: boolean = true;
+
+  constructor(config: DataTableConfig<T>) {
+    this._columns = config.columns;
+    this._stateSaveKey = config.stateSaveKey ?? null;
+    this._paginate = config.paginate !== false;
+    this._rowIdFn = typeof config.rowId === 'function'
+      ? config.rowId
+      : (row: any) => row[config.rowId as string ?? 'id'];
+
+    const savedState = this._loadState();
+
+    this._state = {
+      allRows: config.data ?? [],
+      filteredRows: [],
+      sortedRows: [],
+      paginatedRows: [],
+      sort: savedState?.sort ?? [],
+      filters: savedState?.filters ?? [],
+      globalSearch: savedState?.globalSearch ?? '',
+      pagination: {
+        page: savedState?.page ?? 1,
+        perPage: config.perPage ?? 15,
+        total: 0,
+        lastPage: 1,
+      },
+      selectedIds: new Set(),
+      columnVisibility: savedState?.columnVisibility ?? Object.fromEntries(
+        config.columns.map((c) => [c.key, c.visible !== false])
+      ),
+      columnOrder: savedState?.columnOrder ?? config.columns.map((c) => c.key),
+      loading: false,
+      error: null,
+      editingRowId: null,
+      editingColumn: null,
+      editorMode: null,
+      formData: {},
+      validationErrors: {},
+      draw: 0,
+      excelFocusedCell: null,
+      excelEditingCell: null,
+      excelEditValue: '',
+    };
+
+    this._recompute();
+  }
+
+  subscribe(listener: Listener): () => void {
+    this._listeners.add(listener);
+    return () => this._listeners.delete(listener);
+  }
+
+  getState(): DataTableState<T> {
+    return this._state;
+  }
+
+  private _notify() {
+    for (const listener of this._listeners) listener();
+  }
+
+  private _saveState() {
+    if (!this._stateSaveKey) return;
+    try {
+      const toSave = {
+        sort: this._state.sort,
+        filters: this._state.filters,
+        globalSearch: this._state.globalSearch,
+        page: this._state.pagination.page,
+        columnVisibility: this._state.columnVisibility,
+        columnOrder: this._state.columnOrder,
+      };
+      localStorage.setItem(this._stateSaveKey, JSON.stringify(toSave));
+    } catch {}
+  }
+
+  private _loadState(): any {
+    if (!this._stateSaveKey) return null;
+    try {
+      const raw = localStorage.getItem(this._stateSaveKey);
+      return raw ? JSON.parse(raw) : null;
+    } catch {
+      return null;
+    }
+  }
+
+  // Set data (replaces all rows)
+  setData(rows: T[]) {
+    this._state = { ...this._state, allRows: rows };
+    this._recompute();
+  }
+
+  // Sorting
+  setSort(sort: SortState[]) {
+    this._state = { ...this._state, sort, pagination: { ...this._state.pagination, page: 1 } };
+    this._recompute();
+    this._saveState();
+  }
+
+  toggleSort(column: string, multiSort: boolean = false) {
+    const existing = this._state.sort.find((s) => s.column === column);
+    let newSort: SortState[];
+
+    if (existing) {
+      if (existing.direction === 'asc') {
+        newSort = multiSort
+          ? this._state.sort.map((s) => s.column === column ? { ...s, direction: 'desc' as const } : s)
+          : [{ column, direction: 'desc' }];
+      } else {
+        // Remove sort
+        newSort = multiSort
+          ? this._state.sort.filter((s) => s.column !== column)
+          : [];
+      }
+    } else {
+      newSort = multiSort
+        ? [...this._state.sort, { column, direction: 'asc' }]
+        : [{ column, direction: 'asc' }];
+    }
+
+    this.setSort(newSort);
+  }
+
+  // Searching
+  setGlobalSearch(search: string) {
+    this._state = { ...this._state, globalSearch: search, pagination: { ...this._state.pagination, page: 1 } };
+    this._recompute();
+    this._saveState();
+  }
+
+  // Filtering
+  setFilters(filters: FilterState[]) {
+    this._state = { ...this._state, filters, pagination: { ...this._state.pagination, page: 1 } };
+    this._recompute();
+    this._saveState();
+  }
+
+  setColumnFilter(column: string, value: any, operator: FilterState['operator'] = 'like') {
+    const filters = this._state.filters.filter((f) => f.column !== column);
+    if (value !== '' && value !== null && value !== undefined) {
+      filters.push({ column, value, operator });
+    }
+    this.setFilters(filters);
+  }
+
+  // Pagination
+  setPage(page: number) {
+    const lastPage = this._state.pagination.lastPage;
+    const safePage = Math.max(1, Math.min(page, lastPage));
+    this._state = { ...this._state, pagination: { ...this._state.pagination, page: safePage } };
+    this._recompute();
+    this._saveState();
+  }
+
+  setPerPage(perPage: number) {
+    this._state = { ...this._state, pagination: { ...this._state.pagination, perPage, page: 1 } };
+    this._recompute();
+    this._saveState();
+  }
+
+  // Column visibility
+  toggleColumnVisibility(column: string) {
+    const vis = { ...this._state.columnVisibility };
+    vis[column] = !vis[column];
+    this._state = { ...this._state, columnVisibility: vis };
+    this._notify();
+    this._saveState();
+  }
+
+  setColumnVisibility(visibility: Record<string, boolean>) {
+    this._state = { ...this._state, columnVisibility: visibility };
+    this._notify();
+    this._saveState();
+  }
+
+  // Column reorder
+  reorderColumns(columnOrder: string[]) {
+    this._state = { ...this._state, columnOrder };
+    this._notify();
+    this._saveState();
+  }
+
+  // Selection
+  getRowId(row: T): string | number {
+    return this._rowIdFn(row);
+  }
+
+  toggleSelect(rowId: string | number) {
+    const selected = new Set(this._state.selectedIds);
+    if (selected.has(rowId)) {
+      selected.delete(rowId);
+    } else {
+      selected.add(rowId);
+    }
+    this._lastSelectedId = rowId;
+    this._state = { ...this._state, selectedIds: selected };
+    this._notify();
+  }
+
+  getLastSelectedId(): string | number | null {
+    return this._lastSelectedId;
+  }
+
+  selectSingle(rowId: string | number) {
+    this._state = { ...this._state, selectedIds: new Set([rowId]) };
+    this._notify();
+  }
+
+  selectAll() {
+    const ids = this._state.filteredRows.map((row) => this.getRowId(row));
+    this._state = { ...this._state, selectedIds: new Set(ids) };
+    this._notify();
+  }
+
+  deselectAll() {
+    this._state = { ...this._state, selectedIds: new Set() };
+    this._notify();
+  }
+
+  selectRange(fromId: string | number, toId: string | number) {
+    const rows = this._state.sortedRows;
+    const fromIdx = rows.findIndex((r) => this.getRowId(r) === fromId);
+    const toIdx = rows.findIndex((r) => this.getRowId(r) === toId);
+    if (fromIdx === -1 || toIdx === -1) return;
+
+    const start = Math.min(fromIdx, toIdx);
+    const end = Math.max(fromIdx, toIdx);
+    const selected = new Set(this._state.selectedIds);
+    for (let i = start; i <= end; i++) {
+      selected.add(this.getRowId(rows[i]));
+    }
+    this._state = { ...this._state, selectedIds: selected };
+    this._notify();
+  }
+
+  getSelectedRows(): T[] {
+    return this._state.allRows.filter((row) => this._state.selectedIds.has(this.getRowId(row)));
+  }
+
+  // Editor
+  openEditor(rowId: string | number | null, column: string | null, mode: 'inline' | 'bubble' | 'modal') {
+    const row = rowId !== null
+      ? this._state.allRows.find((r) => this.getRowId(r) === rowId)
+      : null;
+    const formData = row ? { ...(row as any) } : {};
+    this._state = {
+      ...this._state,
+      editingRowId: rowId,
+      editingColumn: column,
+      editorMode: mode,
+      formData,
+      validationErrors: {},
+    };
+    this._notify();
+  }
+
+  closeEditor() {
+    this._state = {
+      ...this._state,
+      editingRowId: null,
+      editingColumn: null,
+      editorMode: null,
+      formData: {},
+      validationErrors: {},
+    };
+    this._notify();
+  }
+
+  setFormField(name: string, value: any) {
+    this._state = {
+      ...this._state,
+      formData: { ...this._state.formData, [name]: value },
+    };
+    this._notify();
+  }
+
+  setValidationErrors(errors: Record<string, string>) {
+    this._state = { ...this._state, validationErrors: errors };
+    this._notify();
+  }
+
+  // Loading
+  setLoading(loading: boolean) {
+    this._state = { ...this._state, loading };
+    this._notify();
+  }
+
+  setError(error: string | null) {
+    this._state = { ...this._state, error };
+    this._notify();
+  }
+
+  // Server-side response
+  setServerResponse(response: { data: T[]; recordsTotal: number; recordsFiltered: number; draw: number }) {
+    this._state = {
+      ...this._state,
+      allRows: response.data,
+      filteredRows: response.data,
+      sortedRows: response.data,
+      paginatedRows: response.data,
+      loading: false,
+      draw: response.draw,
+      pagination: {
+        ...this._state.pagination,
+        total: response.recordsFiltered,
+        lastPage: Math.ceil(response.recordsFiltered / this._state.pagination.perPage) || 1,
+      },
+    };
+    this._notify();
+  }
+
+  // Clear state
+  resetState() {
+    this._state = {
+      ...this._state,
+      sort: [],
+      filters: [],
+      globalSearch: '',
+      pagination: { ...this._state.pagination, page: 1 },
+      selectedIds: new Set(),
+    };
+    this._recompute();
+    if (this._stateSaveKey) {
+      try { localStorage.removeItem(this._stateSaveKey); } catch {}
+    }
+  }
+
+  // Excel mode
+  focusCell(rowIndex: number, columnKey: string) {
+    this._state = {
+      ...this._state,
+      excelFocusedCell: { rowIndex, columnKey },
+    };
+    this._notify();
+  }
+
+  startCellEdit() {
+    const focused = this._state.excelFocusedCell;
+    if (!focused) return;
+    const row = this._state.paginatedRows[focused.rowIndex] as any;
+    if (!row) return;
+    const col = this._columns.find((c) => c.key === focused.columnKey);
+    if (!col || col.editable === false) return;
+    this._state = {
+      ...this._state,
+      excelEditingCell: { ...focused },
+      excelEditValue: row[focused.columnKey] != null ? String(row[focused.columnKey]) : '',
+    };
+    this._notify();
+  }
+
+  setExcelEditValue(value: string) {
+    this._state = { ...this._state, excelEditValue: value };
+    // No notify needed — the input component manages its own value
+  }
+
+  // Returns { row, columnKey, oldValue, newValue } if there was a change, null otherwise
+  commitCellEdit(): { row: any; columnKey: string; oldValue: any; newValue: any } | null {
+    const editing = this._state.excelEditingCell;
+    if (!editing) return null;
+    const row = this._state.paginatedRows[editing.rowIndex] as any;
+    if (!row) { this.cancelCellEdit(); return null; }
+
+    const col = this._columns.find((c) => c.key === editing.columnKey);
+    const oldValue = row[editing.columnKey];
+    let newValue: any = this._state.excelEditValue;
+
+    // Cast value based on column type
+    if (col?.type === 'number') newValue = newValue === '' ? null : Number(newValue);
+    else if (col?.type === 'boolean') newValue = newValue === 'true' || newValue === '1';
+    else if (newValue === '') newValue = null;
+
+    this._state = {
+      ...this._state,
+      excelEditingCell: null,
+      excelEditValue: '',
+    };
+
+    if (newValue === oldValue || (newValue === null && (oldValue === null || oldValue === undefined))) {
+      this._notify();
+      return null;
+    }
+
+    // Update local data for client-side
+    row[editing.columnKey] = newValue;
+    this._notify();
+
+    return { row, columnKey: editing.columnKey, oldValue, newValue };
+  }
+
+  cancelCellEdit() {
+    this._state = {
+      ...this._state,
+      excelEditingCell: null,
+      excelEditValue: '',
+    };
+    this._notify();
+  }
+
+  clearExcelFocus() {
+    this._state = {
+      ...this._state,
+      excelFocusedCell: null,
+      excelEditingCell: null,
+      excelEditValue: '',
+    };
+    this._notify();
+  }
+
+  getVisibleColumns(): ColumnDef[] {
+    return this._state.columnOrder
+      .filter((key) => this._state.columnVisibility[key] !== false)
+      .map((key) => this._columns.find((c) => c.key === key))
+      .filter(Boolean) as ColumnDef[];
+  }
+
+  // Navigate to adjacent cell. Returns 'page-next' | 'page-prev' | null
+  navigateCell(direction: 'up' | 'down' | 'left' | 'right'): 'page-next' | 'page-prev' | null {
+    const focused = this._state.excelFocusedCell;
+    const rows = this._state.paginatedRows;
+    const visibleCols = this.getVisibleColumns();
+    if (visibleCols.length === 0) return null;
+
+    if (!focused) {
+      // Focus first editable cell
+      const firstEditable = visibleCols.find((c) => c.editable !== false);
+      if (firstEditable && rows.length > 0) {
+        this.focusCell(0, firstEditable.key);
+      }
+      return null;
+    }
+
+    let { rowIndex, columnKey } = focused;
+    const colIdx = visibleCols.findIndex((c) => c.key === columnKey);
+    if (colIdx === -1) return null;
+
+    switch (direction) {
+      case 'left': {
+        // Find previous editable column
+        for (let i = colIdx - 1; i >= 0; i--) {
+          if (visibleCols[i].editable !== false) {
+            this.focusCell(rowIndex, visibleCols[i].key);
+            return null;
+          }
+        }
+        // Wrap to last editable col of previous row
+        for (let i = visibleCols.length - 1; i >= 0; i--) {
+          if (visibleCols[i].editable !== false) {
+            if (rowIndex > 0) {
+              this.focusCell(rowIndex - 1, visibleCols[i].key);
+              return null;
+            } else {
+              return 'page-prev';
+            }
+          }
+        }
+        return null;
+      }
+      case 'right': {
+        for (let i = colIdx + 1; i < visibleCols.length; i++) {
+          if (visibleCols[i].editable !== false) {
+            this.focusCell(rowIndex, visibleCols[i].key);
+            return null;
+          }
+        }
+        // Wrap to first editable col of next row
+        for (let i = 0; i < visibleCols.length; i++) {
+          if (visibleCols[i].editable !== false) {
+            if (rowIndex < rows.length - 1) {
+              this.focusCell(rowIndex + 1, visibleCols[i].key);
+              return null;
+            } else {
+              return 'page-next';
+            }
+          }
+        }
+        return null;
+      }
+      case 'up': {
+        if (rowIndex > 0) {
+          this.focusCell(rowIndex - 1, columnKey);
+          return null;
+        }
+        return 'page-prev';
+      }
+      case 'down': {
+        if (rowIndex < rows.length - 1) {
+          this.focusCell(rowIndex + 1, columnKey);
+          return null;
+        }
+        return 'page-next';
+      }
+    }
+  }
+
+  // Core recompute pipeline: filter -> sort -> paginate
+  private _recompute() {
+    let rows = [...this._state.allRows];
+
+    // 1. Global search
+    if (this._state.globalSearch) {
+      const searchLower = this._state.globalSearch.toLowerCase();
+      const searchableCols = this._columns.filter((c) => c.searchable !== false);
+      rows = rows.filter((row: any) =>
+        searchableCols.some((col) => {
+          const val = row[col.key];
+          return val !== null && val !== undefined && String(val).toLowerCase().includes(searchLower);
+        })
+      );
+    }
+
+    // 2. Column filters
+    for (const filter of this._state.filters) {
+      rows = rows.filter((row: any) => {
+        const val = row[filter.column];
+        switch (filter.operator) {
+          case '=': return val == filter.value;
+          case '!=': return val != filter.value;
+          case '>': return val > filter.value;
+          case '<': return val < filter.value;
+          case '>=': return val >= filter.value;
+          case '<=': return val <= filter.value;
+          case 'like': return val !== null && val !== undefined && String(val).toLowerCase().includes(String(filter.value).toLowerCase());
+          case 'not_like': return val === null || val === undefined || !String(val).toLowerCase().includes(String(filter.value).toLowerCase());
+          case 'in': return Array.isArray(filter.value) && filter.value.includes(val);
+          case 'between': return Array.isArray(filter.value) && val >= filter.value[0] && val <= filter.value[1];
+          case 'null': return val === null || val === undefined;
+          case 'not_null': return val !== null && val !== undefined;
+          default: return true;
+        }
+      });
+    }
+
+    const filteredRows = rows;
+
+    // 3. Sort
+    if (this._state.sort.length > 0) {
+      rows = [...rows].sort((a: any, b: any) => {
+        for (const s of this._state.sort) {
+          const colDef = this._columns.find((c) => c.key === s.column);
+          const aVal = a[s.column];
+          const bVal = b[s.column];
+
+          let cmp = 0;
+          if (aVal === null || aVal === undefined) cmp = -1;
+          else if (bVal === null || bVal === undefined) cmp = 1;
+          else if (colDef?.type === 'number') cmp = Number(aVal) - Number(bVal);
+          else if (colDef?.type === 'date') cmp = new Date(aVal).getTime() - new Date(bVal).getTime();
+          else if (colDef?.type === 'boolean') cmp = (aVal ? 1 : 0) - (bVal ? 1 : 0);
+          else cmp = String(aVal).localeCompare(String(bVal));
+
+          if (cmp !== 0) return s.direction === 'desc' ? -cmp : cmp;
+        }
+        return 0;
+      });
+    }
+
+    const sortedRows = rows;
+
+    // 4. Paginate
+    const total = filteredRows.length;
+    const perPage = this._state.pagination.perPage;
+    let paginatedRows: T[];
+    let page: number;
+    let lastPage: number;
+
+    if (this._paginate) {
+      lastPage = Math.ceil(total / perPage) || 1;
+      page = Math.min(this._state.pagination.page, lastPage);
+      const start = (page - 1) * perPage;
+      paginatedRows = sortedRows.slice(start, start + perPage);
+    } else {
+      // No pagination — all rows visible (used with virtual scroll)
+      paginatedRows = sortedRows;
+      page = 1;
+      lastPage = 1;
+    }
+
+    this._state = {
+      ...this._state,
+      filteredRows,
+      sortedRows,
+      paginatedRows,
+      pagination: { page, perPage, total, lastPage },
+    };
+
+    this._notify();
+  }
+}

package/src/state/ServerDataTableStore.ts

@@ -0,0 +1,168 @@
+import type { DataTableConfig, DataTableRequest, DataTableResponse, DataTableState, FilterState, SortState } from '../types.js';
+import { DataTableStore } from './DataTableStore.js';
+
+function getCsrfToken(cookieName = 'XSRF-TOKEN'): string | null {
+  if (typeof document === 'undefined') return null;
+  const escaped = cookieName.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+  const match = document.cookie.match(new RegExp(`(?:^|;\\s*)${escaped}=([^;]*)`));
+  return match ? decodeURIComponent(match[1]) : null;
+}
+
+export class ServerDataTableStore<T = any> extends DataTableStore<T> {
+  private _serverUrl: string;
+  private _serverMethod: 'GET' | 'POST';
+  private _drawCounter = 0;
+  private _abortController: AbortController | null = null;
+  private _fetchDebounceTimer: ReturnType<typeof setTimeout> | null = null;
+  private _serverColumns: { data: string; name: string; searchable: boolean; orderable: boolean }[];
+  private _csrfCookieName: string;
+  private _csrfHeaderName: string;
+
+  constructor(config: DataTableConfig<T>) {
+    super(config);
+    this._serverUrl = config.serverUrl!;
+    this._serverMethod = config.serverMethod ?? 'GET';
+    this._csrfCookieName = config.csrfCookieName ?? 'XSRF-TOKEN';
+    this._csrfHeaderName = config.csrfHeaderName ?? 'X-CSRF-Token';
+    this._serverColumns = config.columns.map((c) => ({
+      data: c.key,
+      name: c.key,
+      searchable: c.searchable !== false,
+      orderable: c.sortable !== false,
+    }));
+  }
+
+  private _buildHeaders(extra: Record<string, string> = {}): Record<string, string> {
+    const headers: Record<string, string> = { ...extra };
+    const token = getCsrfToken(this._csrfCookieName);
+    if (token) {
+      headers[this._csrfHeaderName] = token;
+    }
+    return headers;
+  }
+
+  override setSort(sort: SortState[]) {
+    const state = this.getState();
+    // Update sort in state without recomputing locally
+    (this as any)._state = { ...state, sort, pagination: { ...state.pagination, page: 1 } };
+    this._debouncedFetch();
+  }
+
+  override setGlobalSearch(search: string) {
+    const state = this.getState();
+    (this as any)._state = { ...state, globalSearch: search, pagination: { ...state.pagination, page: 1 } };
+    this._debouncedFetch();
+  }
+
+  override setFilters(filters: FilterState[]) {
+    const state = this.getState();
+    (this as any)._state = { ...state, filters, pagination: { ...state.pagination, page: 1 } };
+    this._debouncedFetch();
+  }
+
+  override setPage(page: number) {
+    const state = this.getState();
+    (this as any)._state = { ...state, pagination: { ...state.pagination, page } };
+    this._fetchFromServer();
+  }
+
+  override setPerPage(perPage: number) {
+    const state = this.getState();
+    (this as any)._state = { ...state, pagination: { ...state.pagination, perPage, page: 1 } };
+    this._fetchFromServer();
+  }
+
+  private _debouncedFetch() {
+    if (this._fetchDebounceTimer) clearTimeout(this._fetchDebounceTimer);
+    this._fetchDebounceTimer = setTimeout(() => this._fetchFromServer(), 300);
+  }
+
+  async _fetchFromServer() {
+    if (this._abortController) this._abortController.abort();
+    this._abortController = new AbortController();
+
+    const state = this.getState();
+    this.setLoading(true);
+    this.setError(null);
+
+    const draw = ++this._drawCounter;
+    const request: DataTableRequest = {
+      draw,
+      start: (state.pagination.page - 1) * state.pagination.perPage,
+      length: state.pagination.perPage,
+      search: { value: state.globalSearch, regex: false },
+      order: state.sort.map((s) => ({
+        column: this._serverColumns.findIndex((c) => c.data === s.column),
+        dir: s.direction,
+      })),
+      columns: this._serverColumns.map((col) => ({
+        ...col,
+        search: {
+          value: state.filters.find((f) => f.column === col.data)?.value ?? '',
+          regex: false,
+        },
+      })),
+    };
+
+    try {
+      let response: Response;
+
+      if (this._serverMethod === 'POST') {
+        response = await fetch(this._serverUrl, {
+          method: 'POST',
+          headers: this._buildHeaders({ 'Content-Type': 'application/json' }),
+          body: JSON.stringify(request),
+          signal: this._abortController.signal,
+        });
+      } else {
+        const params = new URLSearchParams();
+        params.set('draw', String(request.draw));
+        params.set('start', String(request.start));
+        params.set('length', String(request.length));
+        params.set('search[value]', request.search.value);
+        params.set('search[regex]', String(request.search.regex));
+
+        request.order.forEach((o, i) => {
+          params.set(`order[${i}][column]`, String(o.column));
+          params.set(`order[${i}][dir]`, o.dir);
+        });
+
+        request.columns.forEach((c, i) => {
+          params.set(`columns[${i}][data]`, c.data);
+          params.set(`columns[${i}][name]`, c.name);
+          params.set(`columns[${i}][searchable]`, String(c.searchable));
+          params.set(`columns[${i}][orderable]`, String(c.orderable));
+          params.set(`columns[${i}][search][value]`, c.search.value);
+          params.set(`columns[${i}][search][regex]`, String(c.search.regex));
+        });
+
+        const url = `${this._serverUrl}?${params.toString()}`;
+        response = await fetch(url, { signal: this._abortController.signal });
+      }
+
+      if (!response.ok) {
+        throw new Error(`Server responded with ${response.status}`);
+      }
+
+      const json: DataTableResponse<T> = await response.json();
+
+      // Only accept if this is the latest draw
+      if (json.draw === draw) {
+        this.setServerResponse(json);
+      }
+    } catch (err: any) {
+      if (err.name === 'AbortError') return;
+      this.setLoading(false);
+      this.setError(err.message ?? 'Failed to fetch data');
+    }
+  }
+
+  async initialFetch() {
+    await this._fetchFromServer();
+  }
+
+  destroy() {
+    if (this._abortController) this._abortController.abort();
+    if (this._fetchDebounceTimer) clearTimeout(this._fetchDebounceTimer);
+  }
+}

package/src/state/index.ts

@@ -0,0 +1,2 @@
+export { DataTableStore } from './DataTableStore.js';
+export { ServerDataTableStore } from './ServerDataTableStore.js';

package/src/types.ts

@@ -0,0 +1,241 @@
+import type { Component } from 'svelte';
+
+// Column definition
+export type ColumnType = 'string' | 'number' | 'date' | 'boolean' | 'html' | 'custom';
+export type FilterOperator = '=' | '!=' | '>' | '<' | '>=' | '<=' | 'like' | 'not_like' | 'in' | 'between' | 'null' | 'not_null';
+export type SelectionMode = 'none' | 'single' | 'multi';
+export type EditorMode = 'inline' | 'bubble' | 'modal' | 'excel';
+export type FieldType = 'text' | 'textarea' | 'number' | 'select' | 'multi-select' | 'checkbox' | 'radio' | 'date' | 'datetime' | 'upload' | 'hidden' | 'readonly';
+export type ExportFormat = 'csv' | 'excel' | 'pdf' | 'clipboard' | 'print';
+
+export interface ColumnDef<T = any> {
+  key: string;
+  header: string;
+  type?: ColumnType;
+  sortable?: boolean;
+  searchable?: boolean;
+  filterable?: boolean;
+  visible?: boolean;
+  width?: string;
+  minWidth?: string;
+  maxWidth?: string;
+  className?: string;
+  headerClassName?: string;
+  orderable?: boolean;
+  defaultSort?: 'asc' | 'desc';
+  // Footer
+  footer?: string | ((rows: T[]) => string | number);
+  // Editor
+  editable?: boolean;
+  editorField?: EditorFieldDef;
+}
+
+export interface SortState {
+  column: string;
+  direction: 'asc' | 'desc';
+}
+
+export interface FilterState {
+  column: string;
+  value: any;
+  operator: FilterOperator;
+}
+
+export interface PaginationState {
+  page: number;
+  perPage: number;
+  total: number;
+  lastPage: number;
+}
+
+// Server-side protocol (compatible with jQuery DataTables wire protocol)
+export interface DataTableRequest {
+  draw: number;
+  start: number;
+  length: number;
+  search: { value: string; regex: boolean };
+  order: { column: number; dir: 'asc' | 'desc' }[];
+  columns: {
+    data: string;
+    name: string;
+    searchable: boolean;
+    orderable: boolean;
+    search: { value: string; regex: boolean };
+  }[];
+}
+
+export interface DataTableResponse<T = any> {
+  draw: number;
+  recordsTotal: number;
+  recordsFiltered: number;
+  data: T[];
+  error?: string;
+}
+
+// Editor
+export interface EditorFieldDef {
+  name: string;
+  type: FieldType;
+  label: string;
+  placeholder?: string;
+  options?: { label: string; value: any }[];
+  multiple?: boolean;
+  required?: boolean;
+  disabled?: boolean;
+  className?: string;
+  dependsOn?: string;
+  dependsOnValue?: any;
+  showWhen?: (formData: Record<string, any>) => boolean;
+  defaultValue?: any;
+}
+
+// Buttons
+export interface ButtonDef {
+  key: string;
+  label: string;
+  icon?: Component<any>;
+  action?: string | ((selectedRows: any[], allData: any[]) => void | Promise<void>);
+  variant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost';
+  disabled?: boolean | ((selectedRows: any[]) => boolean);
+  collection?: ButtonDef[];
+}
+
+// CSS class overrides for full Tailwind customization
+export interface DataTableClassNames {
+  container?: string;
+  toolbar?: string;
+  toolbarLeft?: string;
+  toolbarRight?: string;
+  searchInput?: string;
+  table?: string;
+  thead?: string;
+  th?: string;
+  thSortable?: string;
+  tbody?: string;
+  tr?: string;
+  trSelected?: string;
+  trEven?: string;
+  td?: string;
+  tfoot?: string;
+  tf?: string;
+  pagination?: string;
+  paginationInfo?: string;
+  paginationControls?: string;
+  pageButton?: string;
+  pageButtonActive?: string;
+  perPageSelect?: string;
+  btn?: string;
+  btnCreate?: string;
+  btnEdit?: string;
+  btnDelete?: string;
+  editorModal?: string;
+  editorBackdrop?: string;
+  editorField?: string;
+  editorInput?: string;
+  editorLabel?: string;
+  loading?: string;
+  empty?: string;
+  error?: string;
+}
+
+// Full config
+export interface DataTableConfig<T = any> {
+  // Data source
+  data?: T[];
+  serverUrl?: string;
+  serverMethod?: 'GET' | 'POST';
+  // CSRF token config (defaults to Svelar conventions)
+  csrfCookieName?: string;
+  csrfHeaderName?: string;
+  // Columns
+  columns: ColumnDef<T>[];
+  // Features
+  sortable?: boolean;
+  searchable?: boolean;
+  paginate?: boolean;
+  selectable?: SelectionMode;
+  // Pagination
+  perPage?: number;
+  perPageOptions?: number[];
+  // Search
+  searchDebounceMs?: number;
+  // State
+  stateSaveKey?: string;
+  // Row identity
+  rowId?: string | ((row: T) => string | number);
+  // Row classes
+  rowClass?: string | ((row: T, index: number) => string);
+  // Buttons
+  buttons?: (ButtonDef | ExportFormat)[];
+  // Editor
+  editorMode?: EditorMode;
+  editorFields?: EditorFieldDef[];
+  // Callbacks
+  onSort?: (sort: SortState[]) => void;
+  onFilter?: (filters: FilterState[]) => void;
+  onPageChange?: (page: number, perPage: number) => void;
+  onSelect?: (selectedRows: T[]) => void;
+  onRowClick?: (row: T, event: MouseEvent) => void;
+  onEdit?: (row: T, data: Record<string, any>) => void | Promise<void>;
+  onCellEdit?: (row: T, columnKey: string, newValue: any, oldValue: any) => void | Promise<void>;
+  onCreate?: (data: Record<string, any>) => void | Promise<void>;
+  onDelete?: (rows: T[]) => void | Promise<void>;
+  // Virtual scroll
+  virtualScroll?: boolean;
+  virtualRowHeight?: number;
+  // Responsive
+  responsive?: boolean;
+  // Row grouping
+  groupBy?: string;
+  // Detail/child rows
+  expandable?: boolean;
+  // Empty state
+  emptyText?: string;
+  // Loading
+  loadingText?: string;
+  // CSS
+  className?: string;
+  compact?: boolean;
+  striped?: boolean;
+  hover?: boolean;
+  bordered?: boolean;
+  // Tailwind / custom class overrides
+  classNames?: DataTableClassNames;
+  // Unstyled mode — disables all built-in CSS
+  unstyled?: boolean;
+}
+
+// Store state shape
+export interface DataTableState<T = any> {
+  // Source data
+  allRows: T[];
+  // Derived
+  filteredRows: T[];
+  sortedRows: T[];
+  paginatedRows: T[];
+  // State
+  sort: SortState[];
+  filters: FilterState[];
+  globalSearch: string;
+  pagination: PaginationState;
+  // Selection
+  selectedIds: Set<string | number>;
+  // Column state
+  columnVisibility: Record<string, boolean>;
+  columnOrder: string[];
+  // Loading
+  loading: boolean;
+  error: string | null;
+  // Editor
+  editingRowId: string | number | null;
+  editingColumn: string | null;
+  editorMode: EditorMode | null;
+  formData: Record<string, any>;
+  validationErrors: Record<string, string>;
+  // Server draw
+  draw: number;
+  // Excel mode
+  excelFocusedCell: { rowIndex: number; columnKey: string } | null;
+  excelEditingCell: { rowIndex: number; columnKey: string } | null;
+  excelEditValue: string;
+}

package/src/ui/DataTable.svelte

@@ -149,6 +149,10 @@
         if (row) await onEdit(row, formData);
       }
       store.closeEditor();
+      // Auto-refetch for server-side stores after successful edit/create
+      if ('initialFetch' in store) {
+        await (store as any).initialFetch();
+      }
     } catch (err: any) {
       if (err.errors) {
         store.setValidationErrors(err.errors);