@beeblock/svelar-datatable 0.1.6 → 0.1.8

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

@@ -1,8 +1,8 @@
 <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 type { DataTableConfig, DataTableClassNames, ColumnDef, EditorFieldDef } from '../types.ts';
+  import { DataTableStore } from '../state/DataTableStore.ts';
+  import { ServerDataTableStore } from '../state/ServerDataTableStore.ts';
   import DataTableToolbar from './DataTableToolbar.svelte';
   import DataTableHead from './DataTableHead.svelte';
   import DataTableBody from './DataTableBody.svelte';

package/src/ui/DataTableBody.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { ColumnDef, DataTableStore, SelectionMode, EditorMode, DataTableClassNames } from '../index.js';
+  import type { ColumnDef, DataTableStore, SelectionMode, EditorMode, DataTableClassNames } from '../index.ts';
   import type { Snippet } from 'svelte';
   import DataTableRow from './DataTableRow.svelte';
   import DataTableLoading from './DataTableLoading.svelte';

package/src/ui/DataTableBubbleEditor.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { EditorFieldDef, DataTableStore, DataTableClassNames } from '../index.js';
+  import type { EditorFieldDef, DataTableStore, DataTableClassNames } from '../index.ts';
   import DataTableEditorForm from './DataTableEditorForm.svelte';
   import { tick } from 'svelte';
 

package/src/ui/DataTableButtons.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-  import type { ButtonDef, ExportFormat, DataTableStore, ColumnDef } from '../index.js';
-  import { ExportManager } from '../export/ExportManager.js';
+  import type { ButtonDef, ExportFormat, DataTableStore, ColumnDef } from '../index.ts';
+  import { ExportManager } from '../export/ExportManager.ts';
 
   interface Props {
     buttons: (ButtonDef | ExportFormat)[];

package/src/ui/DataTableCell.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { ColumnDef, DataTableStore } from '../index.js';
+  import type { ColumnDef, DataTableStore } from '../index.ts';
   import type { Snippet } from 'svelte';
 
   interface Props {

package/src/ui/DataTableColumnToggle.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { ColumnDef, DataTableStore } from '../index.js';
+  import type { ColumnDef, DataTableStore } from '../index.ts';
 
   interface Props {
     store: DataTableStore;

package/src/ui/DataTableEditor.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { EditorFieldDef, DataTableStore, DataTableClassNames } from '../index.js';
+  import type { EditorFieldDef, DataTableStore, DataTableClassNames } from '../index.ts';
   import DataTableModalEditor from './DataTableModalEditor.svelte';
   import DataTableBubbleEditor from './DataTableBubbleEditor.svelte';
 

package/src/ui/DataTableEditorField.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { EditorFieldDef, DataTableStore } from '../index.js';
+  import type { EditorFieldDef, DataTableStore } from '../index.ts';
 
   interface Props {
     field: EditorFieldDef;

package/src/ui/DataTableEditorForm.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { EditorFieldDef, DataTableStore } from '../index.js';
+  import type { EditorFieldDef, DataTableStore } from '../index.ts';
   import DataTableEditorField from './DataTableEditorField.svelte';
 
   interface Props {

package/src/ui/DataTableFooter.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { ColumnDef, DataTableStore, SelectionMode, DataTableClassNames } from '../index.js';
+  import type { ColumnDef, DataTableStore, SelectionMode, DataTableClassNames } from '../index.ts';
 
   interface Props {
     columns: ColumnDef[];

package/src/ui/DataTableHead.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { ColumnDef, DataTableStore, SelectionMode, DataTableClassNames } from '../index.js';
+  import type { ColumnDef, DataTableStore, SelectionMode, DataTableClassNames } from '../index.ts';
 
   interface Props {
     columns: ColumnDef[];

package/src/ui/DataTableModalEditor.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { EditorFieldDef, DataTableStore, DataTableClassNames } from '../index.js';
+  import type { EditorFieldDef, DataTableStore, DataTableClassNames } from '../index.ts';
   import DataTableEditorForm from './DataTableEditorForm.svelte';
 
   interface Props {

package/src/ui/DataTablePagination.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { DataTableStore, DataTableClassNames } from '../index.js';
+  import type { DataTableStore, DataTableClassNames } from '../index.ts';
 
   interface Props {
     store: DataTableStore;

package/src/ui/DataTableRow.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { ColumnDef, DataTableStore, SelectionMode, EditorMode, DataTableClassNames } from '../index.js';
+  import type { ColumnDef, DataTableStore, SelectionMode, EditorMode, DataTableClassNames } from '../index.ts';
   import type { Snippet } from 'svelte';
   import DataTableCell from './DataTableCell.svelte';
   import DataTableExpandedRow from './DataTableExpandedRow.svelte';

package/src/ui/DataTableSearch.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { DataTableStore } from '../index.js';
+  import type { DataTableStore } from '../index.ts';
 
   interface Props {
     store: DataTableStore;

package/src/ui/DataTableToolbar.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { ColumnDef, ButtonDef, ExportFormat, DataTableStore, EditorMode, DataTableClassNames } from '../index.js';
+  import type { ColumnDef, ButtonDef, ExportFormat, DataTableStore, EditorMode, DataTableClassNames } from '../index.ts';
   import DataTableSearch from './DataTableSearch.svelte';
   import DataTableColumnToggle from './DataTableColumnToggle.svelte';
   import DataTableButtons from './DataTableButtons.svelte';