@beeblock/svelar-datatable 0.1.0

package/README.md

@@ -0,0 +1,149 @@
+# @beeblock/svelar-datatable
+
+Full-featured DataTable plugin for [Svelar](https://svelar.dev) / SvelteKit 2 with Svelte 5.
+
+## Features
+
+- **Sorting** — single-click or multi-sort (Shift+click)
+- **Searching** — global search with debounce
+- **Pagination** — configurable per-page options, page navigation
+- **Selection** — single, multi, range (Shift+click), select all
+- **Column management** — visibility toggle, reorder, resize
+- **Editing** — four modes: modal, bubble (popover), inline (double-click), excel (spreadsheet)
+- **Export** — CSV, clipboard, print (Excel/PDF with optional deps)
+- **Virtual scroll** — render 10,000+ rows with only visible DOM nodes
+- **Row grouping** — group rows by any column value
+- **Per-column filters** — programmatic column-level filtering
+- **Custom cells** — Svelte 5 snippets for full cell rendering control
+- **Row customization** — `rowClass`, `rowId` function, expandable detail rows
+- **Server-side** — jQuery DataTables wire protocol compatible, GET or POST
+- **State persistence** — save sort/filter/page/column state to localStorage
+- **Tailwind CSS** — `classNames` prop for pure Tailwind customization of every element
+- **CSS variables** — 12+ CSS custom properties for quick theming
+- **Footer aggregation** — per-column footer with custom functions
+- **Responsive** — horizontal scroll for small screens
+
+## Install
+
+```bash
+npm install @beeblock/svelar-datatable
+```
+
+Peer dependencies: `@beeblock/svelar >= 0.4.0`, `svelte ^5.0.0`
+
+## Quick Start
+
+```svelte
+<script lang="ts">
+  import { DataTable } from '@beeblock/svelar-datatable/ui';
+  import type { ColumnDef } from '@beeblock/svelar-datatable';
+
+  const columns: ColumnDef[] = [
+    { key: 'id', header: 'ID', type: 'number', sortable: true },
+    { key: 'name', header: 'Name', sortable: true, searchable: true },
+    { key: 'email', header: 'Email', sortable: true, searchable: true },
+  ];
+
+  const data = [
+    { id: 1, name: 'Alice', email: 'alice@example.com' },
+    { id: 2, name: 'Bob', email: 'bob@example.com' },
+  ];
+</script>
+
+<DataTable {data} {columns} sortable searchable paginate perPage={10} />
+```
+
+## Server-Side
+
+```svelte
+<!-- Frontend -->
+<DataTable
+  serverUrl="/api/datatable/users"
+  columns={columns}
+  sortable
+  searchable
+  paginate
+  perPage={25}
+/>
+```
+
+```ts
+// src/routes/api/datatable/users/+server.ts
+import { DataTableController } from '@beeblock/svelar-datatable/server';
+import { User } from '$lib/models/User';
+
+const dt = new DataTableController(User);
+export const GET = dt.handle();
+```
+
+The server controller handles pagination, sorting, searching, and filtering — compatible with the jQuery DataTables wire protocol.
+
+## Editing
+
+Four editor modes, configured via `editorMode`:
+
+```svelte
+<!-- Modal editor -->
+<DataTable editorMode="modal" editorFields={fields} onEdit={save} onCreate={create} />
+
+<!-- Bubble (popover anchored to row) -->
+<DataTable editorMode="bubble" editorFields={fields} onEdit={save} />
+
+<!-- Inline (double-click a cell) -->
+<DataTable editorMode="inline" onCellEdit={saveCellEdit} />
+
+<!-- Excel (spreadsheet navigation) -->
+<DataTable editorMode="excel" onCellEdit={saveCellEdit} />
+```
+
+## Tailwind Customization
+
+Style every element with Tailwind utility classes via the `classNames` prop:
+
+```svelte
+<DataTable
+  {data}
+  {columns}
+  striped={false}
+  hover={false}
+  classNames={{
+    container: '!bg-slate-900 !border-slate-800',
+    thead: '!bg-slate-950',
+    th: '!bg-slate-950 !text-slate-400 !tracking-widest',
+    tr: 'hover:!bg-slate-800',
+    td: '!text-slate-300 !border-b-slate-800',
+    pagination: '!border-t-slate-800 !text-slate-400 !bg-slate-900',
+    pageButton: '!bg-slate-800 !text-slate-400 !border-slate-700',
+    searchInput: '!bg-slate-800 !text-slate-200 !border-slate-700',
+  }}
+/>
+```
+
+All 39 keys from `DataTableClassNames` are wired: `container`, `toolbar`, `toolbarLeft`, `toolbarRight`, `searchInput`, `thead`, `th`, `tbody`, `tr`, `trSelected`, `trEven`, `td`, `tfoot`, `tf`, `pagination`, `paginationInfo`, `paginationControls`, `pageButton`, `pageButtonActive`, `perPageSelect`, `btn`, `btnCreate`, `btnEdit`, `btnDelete`, `editorModal`, `editorBackdrop`, `editorField`, `editorInput`, `editorLabel`, `loading`, `empty`, `error`.
+
+## Imports
+
+```ts
+// UI component (Svelte source — not compiled)
+import { DataTable } from '@beeblock/svelar-datatable/ui';
+
+// Types
+import type {
+  ColumnDef, EditorFieldDef, ButtonDef, DataTableClassNames,
+  DataTableConfig, DataTableState, ExportFormat,
+} from '@beeblock/svelar-datatable';
+
+// Stores
+import { DataTableStore, ServerDataTableStore } from '@beeblock/svelar-datatable';
+
+// Server controller (API routes)
+import { DataTableController, DataTableService } from '@beeblock/svelar-datatable/server';
+```
+
+## Documentation
+
+Full documentation with all props, callbacks, store API, and examples: [svelar.dev/docs/datatable](https://svelar.dev/docs/datatable)
+
+## License
+
+MIT

package/dist/SvelarDatatablePlugin.d.ts

@@ -0,0 +1,13 @@
+import type { DataTableConfig } from './types.js';
+interface DatatablePluginConfig {
+    prefix?: string;
+    defaults?: Partial<DataTableConfig>;
+}
+export declare class SvelarDatatablePlugin {
+    private _config;
+    constructor(config?: DatatablePluginConfig);
+    get name(): string;
+    get config(): DatatablePluginConfig;
+    static defaults(): Partial<DataTableConfig>;
+}
+export {};

package/dist/export/ExportManager.d.ts

@@ -0,0 +1,4 @@
+import type { ColumnDef, ExportFormat } from '../types.js';
+export declare class ExportManager<T = any> {
+    export(format: ExportFormat, data: T[], columns: ColumnDef<T>[], filename?: string): Promise<void>;
+}

package/dist/export/clipboard.d.ts

@@ -0,0 +1,2 @@
+import type { ColumnDef } from '../types.js';
+export declare function copyToClipboard<T>(data: T[], columns: ColumnDef<T>[]): Promise<void>;

package/dist/export/csv.d.ts

@@ -0,0 +1,4 @@
+import type { ColumnDef } from '../types.js';
+export declare function generateCSV<T>(data: T[], columns: ColumnDef<T>[]): string;
+export declare function downloadCSV(content: string, filename?: string): void;
+export declare function downloadBlob(blob: Blob, filename: string): void;

package/dist/export/excel.d.ts

@@ -0,0 +1,2 @@
+import type { ColumnDef } from '../types.js';
+export declare function exportExcel<T>(data: T[], columns: ColumnDef<T>[], filename?: string): Promise<void>;

package/dist/export/index.d.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/dist/export/pdf.d.ts

@@ -0,0 +1,2 @@
+import type { ColumnDef } from '../types.js';
+export declare function exportPdf<T>(data: T[], columns: ColumnDef<T>[], filename?: string): void;

package/dist/export/print.d.ts

@@ -0,0 +1,2 @@
+import type { ColumnDef } from '../types.js';
+export declare function printTable<T>(data: T[], columns: ColumnDef<T>[], title?: string): void;

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export { SvelarDatatablePlugin } from './SvelarDatatablePlugin.js';
+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/dist/index.js

@@ -0,0 +1,19 @@
+var y={prefix:"/api",defaults:{perPage:15,perPageOptions:[10,15,25,50,100],searchDebounceMs:300,sortable:!0,searchable:!0,paginate:!0,selectable:"none",striped:!0,hover:!0,bordered:!1,compact:!1,responsive:!0,virtualScroll:!1,virtualRowHeight:48}},S=class{_config;constructor(t={}){this._config={...y,...t,defaults:{...y.defaults,...t.defaults}}}get name(){return"svelar-datatable"}get config(){return this._config}static defaults(){return{...y.defaults}}};var m=class{_state;_listeners=new Set;_columns=[];_rowIdFn;_stateSaveKey=null;_lastSelectedId=null;_paginate=!0;constructor(t){this._columns=t.columns,this._stateSaveKey=t.stateSaveKey??null,this._paginate=t.paginate!==!1,this._rowIdFn=typeof t.rowId=="function"?t.rowId:s=>s[t.rowId??"id"];let e=this._loadState();this._state={allRows:t.data??[],filteredRows:[],sortedRows:[],paginatedRows:[],sort:e?.sort??[],filters:e?.filters??[],globalSearch:e?.globalSearch??"",pagination:{page:e?.page??1,perPage:t.perPage??15,total:0,lastPage:1},selectedIds:new Set,columnVisibility:e?.columnVisibility??Object.fromEntries(t.columns.map(s=>[s.key,s.visible!==!1])),columnOrder:e?.columnOrder??t.columns.map(s=>s.key),loading:!1,error:null,editingRowId:null,editingColumn:null,editorMode:null,formData:{},validationErrors:{},draw:0,excelFocusedCell:null,excelEditingCell:null,excelEditValue:""},this._recompute()}subscribe(t){return this._listeners.add(t),()=>this._listeners.delete(t)}getState(){return this._state}_notify(){for(let t of this._listeners)t()}_saveState(){if(this._stateSaveKey)try{let t={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(t))}catch{}}_loadState(){if(!this._stateSaveKey)return null;try{let t=localStorage.getItem(this._stateSaveKey);return t?JSON.parse(t):null}catch{return null}}setData(t){this._state={...this._state,allRows:t},this._recompute()}setSort(t){this._state={...this._state,sort:t,pagination:{...this._state.pagination,page:1}},this._recompute(),this._saveState()}toggleSort(t,e=!1){let s=this._state.sort.find(i=>i.column===t),a;s?s.direction==="asc"?a=e?this._state.sort.map(i=>i.column===t?{...i,direction:"desc"}:i):[{column:t,direction:"desc"}]:a=e?this._state.sort.filter(i=>i.column!==t):[]:a=e?[...this._state.sort,{column:t,direction:"asc"}]:[{column:t,direction:"asc"}],this.setSort(a)}setGlobalSearch(t){this._state={...this._state,globalSearch:t,pagination:{...this._state.pagination,page:1}},this._recompute(),this._saveState()}setFilters(t){this._state={...this._state,filters:t,pagination:{...this._state.pagination,page:1}},this._recompute(),this._saveState()}setColumnFilter(t,e,s="like"){let a=this._state.filters.filter(i=>i.column!==t);e!==""&&e!==null&&e!==void 0&&a.push({column:t,value:e,operator:s}),this.setFilters(a)}setPage(t){let e=this._state.pagination.lastPage,s=Math.max(1,Math.min(t,e));this._state={...this._state,pagination:{...this._state.pagination,page:s}},this._recompute(),this._saveState()}setPerPage(t){this._state={...this._state,pagination:{...this._state.pagination,perPage:t,page:1}},this._recompute(),this._saveState()}toggleColumnVisibility(t){let e={...this._state.columnVisibility};e[t]=!e[t],this._state={...this._state,columnVisibility:e},this._notify(),this._saveState()}setColumnVisibility(t){this._state={...this._state,columnVisibility:t},this._notify(),this._saveState()}reorderColumns(t){this._state={...this._state,columnOrder:t},this._notify(),this._saveState()}getRowId(t){return this._rowIdFn(t)}toggleSelect(t){let e=new Set(this._state.selectedIds);e.has(t)?e.delete(t):e.add(t),this._lastSelectedId=t,this._state={...this._state,selectedIds:e},this._notify()}getLastSelectedId(){return this._lastSelectedId}selectSingle(t){this._state={...this._state,selectedIds:new Set([t])},this._notify()}selectAll(){let t=this._state.filteredRows.map(e=>this.getRowId(e));this._state={...this._state,selectedIds:new Set(t)},this._notify()}deselectAll(){this._state={...this._state,selectedIds:new Set},this._notify()}selectRange(t,e){let s=this._state.sortedRows,a=s.findIndex(n=>this.getRowId(n)===t),i=s.findIndex(n=>this.getRowId(n)===e);if(a===-1||i===-1)return;let o=Math.min(a,i),u=Math.max(a,i),r=new Set(this._state.selectedIds);for(let n=o;n<=u;n++)r.add(this.getRowId(s[n]));this._state={...this._state,selectedIds:r},this._notify()}getSelectedRows(){return this._state.allRows.filter(t=>this._state.selectedIds.has(this.getRowId(t)))}openEditor(t,e,s){let a=t!==null?this._state.allRows.find(o=>this.getRowId(o)===t):null,i=a?{...a}:{};this._state={...this._state,editingRowId:t,editingColumn:e,editorMode:s,formData:i,validationErrors:{}},this._notify()}closeEditor(){this._state={...this._state,editingRowId:null,editingColumn:null,editorMode:null,formData:{},validationErrors:{}},this._notify()}setFormField(t,e){this._state={...this._state,formData:{...this._state.formData,[t]:e}},this._notify()}setValidationErrors(t){this._state={...this._state,validationErrors:t},this._notify()}setLoading(t){this._state={...this._state,loading:t},this._notify()}setError(t){this._state={...this._state,error:t},this._notify()}setServerResponse(t){this._state={...this._state,allRows:t.data,filteredRows:t.data,sortedRows:t.data,paginatedRows:t.data,loading:!1,draw:t.draw,pagination:{...this._state.pagination,total:t.recordsFiltered,lastPage:Math.ceil(t.recordsFiltered/this._state.pagination.perPage)||1}},this._notify()}resetState(){if(this._state={...this._state,sort:[],filters:[],globalSearch:"",pagination:{...this._state.pagination,page:1},selectedIds:new Set},this._recompute(),this._stateSaveKey)try{localStorage.removeItem(this._stateSaveKey)}catch{}}focusCell(t,e){this._state={...this._state,excelFocusedCell:{rowIndex:t,columnKey:e}},this._notify()}startCellEdit(){let t=this._state.excelFocusedCell;if(!t)return;let e=this._state.paginatedRows[t.rowIndex];if(!e)return;let s=this._columns.find(a=>a.key===t.columnKey);!s||s.editable===!1||(this._state={...this._state,excelEditingCell:{...t},excelEditValue:e[t.columnKey]!=null?String(e[t.columnKey]):""},this._notify())}setExcelEditValue(t){this._state={...this._state,excelEditValue:t}}commitCellEdit(){let t=this._state.excelEditingCell;if(!t)return null;let e=this._state.paginatedRows[t.rowIndex];if(!e)return this.cancelCellEdit(),null;let s=this._columns.find(o=>o.key===t.columnKey),a=e[t.columnKey],i=this._state.excelEditValue;return s?.type==="number"?i=i===""?null:Number(i):s?.type==="boolean"?i=i==="true"||i==="1":i===""&&(i=null),this._state={...this._state,excelEditingCell:null,excelEditValue:""},i===a||i===null&&a==null?(this._notify(),null):(e[t.columnKey]=i,this._notify(),{row:e,columnKey:t.columnKey,oldValue:a,newValue:i})}cancelCellEdit(){this._state={...this._state,excelEditingCell:null,excelEditValue:""},this._notify()}clearExcelFocus(){this._state={...this._state,excelFocusedCell:null,excelEditingCell:null,excelEditValue:""},this._notify()}getVisibleColumns(){return this._state.columnOrder.filter(t=>this._state.columnVisibility[t]!==!1).map(t=>this._columns.find(e=>e.key===t)).filter(Boolean)}navigateCell(t){let e=this._state.excelFocusedCell,s=this._state.paginatedRows,a=this.getVisibleColumns();if(a.length===0)return null;if(!e){let r=a.find(n=>n.editable!==!1);return r&&s.length>0&&this.focusCell(0,r.key),null}let{rowIndex:i,columnKey:o}=e,u=a.findIndex(r=>r.key===o);if(u===-1)return null;switch(t){case"left":{for(let r=u-1;r>=0;r--)if(a[r].editable!==!1)return this.focusCell(i,a[r].key),null;for(let r=a.length-1;r>=0;r--)if(a[r].editable!==!1)return i>0?(this.focusCell(i-1,a[r].key),null):"page-prev";return null}case"right":{for(let r=u+1;r<a.length;r++)if(a[r].editable!==!1)return this.focusCell(i,a[r].key),null;for(let r=0;r<a.length;r++)if(a[r].editable!==!1)return i<s.length-1?(this.focusCell(i+1,a[r].key),null):"page-next";return null}case"up":return i>0?(this.focusCell(i-1,o),null):"page-prev";case"down":return i<s.length-1?(this.focusCell(i+1,o),null):"page-next"}}_recompute(){let t=[...this._state.allRows];if(this._state.globalSearch){let n=this._state.globalSearch.toLowerCase(),d=this._columns.filter(l=>l.searchable!==!1);t=t.filter(l=>d.some(p=>{let h=l[p.key];return h!=null&&String(h).toLowerCase().includes(n)}))}for(let n of this._state.filters)t=t.filter(d=>{let l=d[n.column];switch(n.operator){case"=":return l==n.value;case"!=":return l!=n.value;case">":return l>n.value;case"<":return l<n.value;case">=":return l>=n.value;case"<=":return l<=n.value;case"like":return l!=null&&String(l).toLowerCase().includes(String(n.value).toLowerCase());case"not_like":return l==null||!String(l).toLowerCase().includes(String(n.value).toLowerCase());case"in":return Array.isArray(n.value)&&n.value.includes(l);case"between":return Array.isArray(n.value)&&l>=n.value[0]&&l<=n.value[1];case"null":return l==null;case"not_null":return l!=null;default:return!0}});let e=t;this._state.sort.length>0&&(t=[...t].sort((n,d)=>{for(let l of this._state.sort){let p=this._columns.find(k=>k.key===l.column),h=n[l.column],g=d[l.column],f=0;if(h==null?f=-1:g==null?f=1:p?.type==="number"?f=Number(h)-Number(g):p?.type==="date"?f=new Date(h).getTime()-new Date(g).getTime():p?.type==="boolean"?f=(h?1:0)-(g?1:0):f=String(h).localeCompare(String(g)),f!==0)return l.direction==="desc"?-f:f}return 0}));let s=t,a=e.length,i=this._state.pagination.perPage,o,u,r;if(this._paginate){r=Math.ceil(a/i)||1,u=Math.min(this._state.pagination.page,r);let n=(u-1)*i;o=s.slice(n,n+i)}else o=s,u=1,r=1;this._state={...this._state,filteredRows:e,sortedRows:s,paginatedRows:o,pagination:{page:u,perPage:i,total:a,lastPage:r}},this._notify()}};function I(c="XSRF-TOKEN"){if(typeof document>"u")return null;let t=c.replace(/[.*+?^${}()|[\]\\]/g,"\\$&"),e=document.cookie.match(new RegExp(`(?:^|;\\s*)${t}=([^;]*)`));return e?decodeURIComponent(e[1]):null}var v=class extends m{_serverUrl;_serverMethod;_drawCounter=0;_abortController=null;_fetchDebounceTimer=null;_serverColumns;_csrfCookieName;_csrfHeaderName;constructor(t){super(t),this._serverUrl=t.serverUrl,this._serverMethod=t.serverMethod??"GET",this._csrfCookieName=t.csrfCookieName??"XSRF-TOKEN",this._csrfHeaderName=t.csrfHeaderName??"X-CSRF-Token",this._serverColumns=t.columns.map(e=>({data:e.key,name:e.key,searchable:e.searchable!==!1,orderable:e.sortable!==!1}))}_buildHeaders(t={}){let e={...t},s=I(this._csrfCookieName);return s&&(e[this._csrfHeaderName]=s),e}setSort(t){let e=this.getState();this._state={...e,sort:t,pagination:{...e.pagination,page:1}},this._debouncedFetch()}setGlobalSearch(t){let e=this.getState();this._state={...e,globalSearch:t,pagination:{...e.pagination,page:1}},this._debouncedFetch()}setFilters(t){let e=this.getState();this._state={...e,filters:t,pagination:{...e.pagination,page:1}},this._debouncedFetch()}setPage(t){let e=this.getState();this._state={...e,pagination:{...e.pagination,page:t}},this._fetchFromServer()}setPerPage(t){let e=this.getState();this._state={...e,pagination:{...e.pagination,perPage:t,page:1}},this._fetchFromServer()}_debouncedFetch(){this._fetchDebounceTimer&&clearTimeout(this._fetchDebounceTimer),this._fetchDebounceTimer=setTimeout(()=>this._fetchFromServer(),300)}async _fetchFromServer(){this._abortController&&this._abortController.abort(),this._abortController=new AbortController;let t=this.getState();this.setLoading(!0),this.setError(null);let e=++this._drawCounter,s={draw:e,start:(t.pagination.page-1)*t.pagination.perPage,length:t.pagination.perPage,search:{value:t.globalSearch,regex:!1},order:t.sort.map(a=>({column:this._serverColumns.findIndex(i=>i.data===a.column),dir:a.direction})),columns:this._serverColumns.map(a=>({...a,search:{value:t.filters.find(i=>i.column===a.data)?.value??"",regex:!1}}))};try{let a;if(this._serverMethod==="POST")a=await fetch(this._serverUrl,{method:"POST",headers:this._buildHeaders({"Content-Type":"application/json"}),body:JSON.stringify(s),signal:this._abortController.signal});else{let o=new URLSearchParams;o.set("draw",String(s.draw)),o.set("start",String(s.start)),o.set("length",String(s.length)),o.set("search[value]",s.search.value),o.set("search[regex]",String(s.search.regex)),s.order.forEach((r,n)=>{o.set(`order[${n}][column]`,String(r.column)),o.set(`order[${n}][dir]`,r.dir)}),s.columns.forEach((r,n)=>{o.set(`columns[${n}][data]`,r.data),o.set(`columns[${n}][name]`,r.name),o.set(`columns[${n}][searchable]`,String(r.searchable)),o.set(`columns[${n}][orderable]`,String(r.orderable)),o.set(`columns[${n}][search][value]`,r.search.value),o.set(`columns[${n}][search][regex]`,String(r.search.regex))});let u=`${this._serverUrl}?${o.toString()}`;a=await fetch(u,{signal:this._abortController.signal})}if(!a.ok)throw new Error(`Server responded with ${a.status}`);let i=await a.json();i.draw===e&&this.setServerResponse(i)}catch(a){if(a.name==="AbortError")return;this.setLoading(!1),this.setError(a.message??"Failed to fetch data")}}async initialFetch(){await this._fetchFromServer()}destroy(){this._abortController&&this._abortController.abort(),this._fetchDebounceTimer&&clearTimeout(this._fetchDebounceTimer)}};function x(c){if(c==null)return"";let t=String(c);return t.includes(",")||t.includes('"')||t.includes(`
+`)||t.includes("\r")?'"'+t.replace(/"/g,'""')+'"':t}function T(c,t){let e=t.filter(i=>i.visible!==!1),s=e.map(i=>x(i.header)).join(","),a=c.map(i=>e.map(o=>x(i[o.key])).join(","));return"\uFEFF"+[s,...a].join(`\r
+`)}function D(c,t="export.csv"){let e=new Blob([c],{type:"text/csv;charset=utf-8;"});w(e,t)}function w(c,t){let e=URL.createObjectURL(c),s=document.createElement("a");s.href=e,s.download=t,document.body.appendChild(s),s.click(),document.body.removeChild(s),URL.revokeObjectURL(e)}async function R(c,t){let e=t.filter(o=>o.visible!==!1),s=e.map(o=>o.header).join("	"),a=c.map(o=>e.map(u=>{let r=o[u.key];return r==null?"":String(r)}).join("	")),i=[s,...a].join(`
+`);await navigator.clipboard.writeText(i)}function b(c,t,e){let s=t.filter(r=>r.visible!==!1),a=s.map(r=>`<th style="border:1px solid #ddd;padding:8px 12px;text-align:left;background:#f5f5f5;font-weight:600;">${_(r.header)}</th>`).join(""),i=c.map(r=>`<tr>${s.map(d=>{let l=r[d.key];return`<td style="border:1px solid #ddd;padding:8px 12px;">${_(l==null?"":String(l))}</td>`}).join("")}</tr>`).join(""),o=`<!DOCTYPE html>
+<html><head>
+<title>${_(e??"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>
+${e?`<h1>${_(e)}</h1>`:""}
+<table>
+  <thead><tr>${a}</tr></thead>
+  <tbody>${i}</tbody>
+</table>
+</body></html>`,u=window.open("","_blank");u&&(u.document.write(o),u.document.close(),u.focus(),setTimeout(()=>u.print(),250))}function _(c){return c.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;")}async function E(c,t,e="export.xlsx"){let s;try{s=await import("exceljs")}catch{throw new Error("exceljs is required for Excel export. Install it: npm install exceljs")}let a=new s.Workbook,i=a.addWorksheet("Data"),o=t.filter(d=>d.visible!==!1);i.columns=o.map(d=>({header:d.header,key:d.key,width:20}));let u=i.getRow(1);u.font={bold:!0},u.fill={type:"pattern",pattern:"solid",fgColor:{argb:"FFF0F0F0"}};for(let d of c){let l={};for(let p of o)l[p.key]=d[p.key]??"";i.addRow(l)}let r=await a.xlsx.writeBuffer(),n=new Blob([r],{type:"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"});w(n,e)}function F(c,t,e="export.pdf"){b(c,t,e.replace(".pdf",""))}var C=class{async export(t,e,s,a){switch(t){case"csv":{let i=T(e,s);D(i,a??"export.csv");break}case"excel":await E(e,s,a??"export.xlsx");break;case"pdf":F(e,s,a??"export.pdf");break;case"clipboard":await R(e,s);break;case"print":b(e,s);break}}};export{m as DataTableStore,C as ExportManager,v as ServerDataTableStore,S as SvelarDatatablePlugin};

package/dist/server/DataTableController.d.ts

@@ -0,0 +1,4 @@
+import { type DataTableServiceOptions } from './DataTableService.js';
+export declare class DataTableController {
+    static handle(event: any, model: any, options?: DataTableServiceOptions): Promise<Response>;
+}

package/dist/server/DataTableRequest.d.ts

@@ -0,0 +1,3 @@
+import type { DataTableRequest } from '../types.js';
+export declare function parseDataTableRequest(params: URLSearchParams): DataTableRequest;
+export declare function parseDataTableRequestFromBody(request: Request): Promise<DataTableRequest>;

package/dist/server/DataTableService.d.ts

@@ -0,0 +1,25 @@
+import type { DataTableRequest, DataTableResponse } from '../types.js';
+export interface DataTableServiceOptions {
+    searchable?: string[];
+    orderable?: string[];
+    baseQuery?: (query: any) => any;
+    scopes?: Record<string, (query: any) => any>;
+    computedColumns?: Record<string, string>;
+}
+export declare class DataTableService<T = any> {
+    private _model;
+    private _searchable;
+    private _orderable;
+    private _baseQueryFn;
+    private _scopes;
+    private _computedColumns;
+    private _activeScopes;
+    constructor(model: any, options?: DataTableServiceOptions);
+    searchable(columns: string[]): this;
+    orderable(columns: string[]): this;
+    setBaseQuery(fn: (query: any) => any): this;
+    addScope(name: string, fn: (query: any) => any): this;
+    applyScope(name: string): this;
+    addComputedColumn(name: string, sqlExpr: string): this;
+    process(request: DataTableRequest): Promise<DataTableResponse<T>>;
+}

package/dist/server/index.d.ts

@@ -0,0 +1,3 @@
+export { DataTableService, type DataTableServiceOptions } from './DataTableService.js';
+export { DataTableController } from './DataTableController.js';
+export { parseDataTableRequest, parseDataTableRequestFromBody } from './DataTableRequest.js';

package/dist/server/index.js

@@ -0,0 +1 @@
+var h=class{_model;_searchable=[];_orderable=[];_baseQueryFn=null;_scopes={};_computedColumns={};_activeScopes=[];constructor(e,t){this._model=e,t?.searchable&&(this._searchable=t.searchable),t?.orderable&&(this._orderable=t.orderable),t?.baseQuery&&(this._baseQueryFn=t.baseQuery),t?.scopes&&(this._scopes=t.scopes),t?.computedColumns&&(this._computedColumns=t.computedColumns)}searchable(e){return this._searchable=e,this}orderable(e){return this._orderable=e,this}setBaseQuery(e){return this._baseQueryFn=e,this}addScope(e,t){return this._scopes[e]=t,this}applyScope(e){return this._activeScopes.push(e),this}addComputedColumn(e,t){return this._computedColumns[e]=t,this}async process(e){try{let t=this._model.query();this._baseQueryFn&&this._baseQueryFn(t);let u=await t.count(),a=this._model.query();this._baseQueryFn&&this._baseQueryFn(a);for(let r of this._activeScopes){let o=this._scopes[r];o&&o(a)}for(let[r,o]of Object.entries(this._computedColumns))a=a.selectRaw(`(${o}) as ${r}`);if(e.search.value){let r=e.search.value,o=this._searchable.length>0?this._searchable:e.columns.filter(i=>i.searchable).map(i=>i.data);o.length>0&&(a=a.whereNested(i=>{for(let l=0;l<o.length;l++){let m=o[l];l===0?i.where(m,"LIKE",`%${r}%`):i.orWhere(m,"LIKE",`%${r}%`)}}))}for(let r of e.columns)r.search.value&&r.searchable&&(a=a.where(r.data,"LIKE",`%${r.search.value}%`));let c=await a.clone().count();for(let r of e.order){let o=e.columns[r.column];o&&(this._orderable.length>0?this._orderable:e.columns.filter(l=>l.orderable).map(l=>l.data)).includes(o.data)&&(a=a.orderBy(o.data,r.dir))}a=a.offset(e.start).limit(e.length);let d=await a.get();return{draw:e.draw,recordsTotal:u,recordsFiltered:c,data:d}}catch(t){return{draw:e.draw,recordsTotal:0,recordsFiltered:0,data:[],error:t.message??"Server error"}}}};function p(s){let e=parseInt(s.get("draw")??"1",10),t=parseInt(s.get("start")??"0",10),u=parseInt(s.get("length")??"15",10),a={value:s.get("search[value]")??"",regex:s.get("search[regex]")==="true"},n=[],c=0;for(;s.has(`order[${c}][column]`);)n.push({column:parseInt(s.get(`order[${c}][column]`)??"0",10),dir:s.get(`order[${c}][dir]`)??"asc"}),c++;let d=[],r=0;for(;s.has(`columns[${r}][data]`);)d.push({data:s.get(`columns[${r}][data]`)??"",name:s.get(`columns[${r}][name]`)??"",searchable:s.get(`columns[${r}][searchable]`)!=="false",orderable:s.get(`columns[${r}][orderable]`)!=="false",search:{value:s.get(`columns[${r}][search][value]`)??"",regex:s.get(`columns[${r}][search][regex]`)==="true"}}),r++;return{draw:e,start:t,length:u,search:a,order:n,columns:d}}async function y(s){return await s.json()}var b=class{static async handle(e,t,u){try{let a=new h(t,u),n;e.request.method==="POST"?n=await y(e.request):n=p(e.url.searchParams);let c=await a.process(n);return new Response(JSON.stringify(c),{status:200,headers:{"Content-Type":"application/json"}})}catch(a){let n={draw:0,recordsTotal:0,recordsFiltered:0,data:[],error:a.message??"Internal server error"};return new Response(JSON.stringify(n),{status:500,headers:{"Content-Type":"application/json"}})}}};export{b as DataTableController,h as DataTableService,p as parseDataTableRequest,y as parseDataTableRequestFromBody};

package/dist/state/DataTableStore.d.ts

@@ -0,0 +1,64 @@
+import type { ColumnDef, DataTableConfig, DataTableState, FilterState, SortState } from '../types.js';
+type Listener = () => void;
+export declare class DataTableStore<T = any> {
+    private _state;
+    private _listeners;
+    private _columns;
+    private _rowIdFn;
+    private _stateSaveKey;
+    private _lastSelectedId;
+    private _paginate;
+    constructor(config: DataTableConfig<T>);
+    subscribe(listener: Listener): () => void;
+    getState(): DataTableState<T>;
+    private _notify;
+    private _saveState;
+    private _loadState;
+    setData(rows: T[]): void;
+    setSort(sort: SortState[]): void;
+    toggleSort(column: string, multiSort?: boolean): void;
+    setGlobalSearch(search: string): void;
+    setFilters(filters: FilterState[]): void;
+    setColumnFilter(column: string, value: any, operator?: FilterState['operator']): void;
+    setPage(page: number): void;
+    setPerPage(perPage: number): void;
+    toggleColumnVisibility(column: string): void;
+    setColumnVisibility(visibility: Record<string, boolean>): void;
+    reorderColumns(columnOrder: string[]): void;
+    getRowId(row: T): string | number;
+    toggleSelect(rowId: string | number): void;
+    getLastSelectedId(): string | number | null;
+    selectSingle(rowId: string | number): void;
+    selectAll(): void;
+    deselectAll(): void;
+    selectRange(fromId: string | number, toId: string | number): void;
+    getSelectedRows(): T[];
+    openEditor(rowId: string | number | null, column: string | null, mode: 'inline' | 'bubble' | 'modal'): void;
+    closeEditor(): void;
+    setFormField(name: string, value: any): void;
+    setValidationErrors(errors: Record<string, string>): void;
+    setLoading(loading: boolean): void;
+    setError(error: string | null): void;
+    setServerResponse(response: {
+        data: T[];
+        recordsTotal: number;
+        recordsFiltered: number;
+        draw: number;
+    }): void;
+    resetState(): void;
+    focusCell(rowIndex: number, columnKey: string): void;
+    startCellEdit(): void;
+    setExcelEditValue(value: string): void;
+    commitCellEdit(): {
+        row: any;
+        columnKey: string;
+        oldValue: any;
+        newValue: any;
+    } | null;
+    cancelCellEdit(): void;
+    clearExcelFocus(): void;
+    getVisibleColumns(): ColumnDef[];
+    navigateCell(direction: 'up' | 'down' | 'left' | 'right'): 'page-next' | 'page-prev' | null;
+    private _recompute;
+}
+export {};

package/dist/state/ServerDataTableStore.d.ts

@@ -0,0 +1,23 @@
+import type { DataTableConfig, FilterState, SortState } from '../types.js';
+import { DataTableStore } from './DataTableStore.js';
+export declare class ServerDataTableStore<T = any> extends DataTableStore<T> {
+    private _serverUrl;
+    private _serverMethod;
+    private _drawCounter;
+    private _abortController;
+    private _fetchDebounceTimer;
+    private _serverColumns;
+    private _csrfCookieName;
+    private _csrfHeaderName;
+    constructor(config: DataTableConfig<T>);
+    private _buildHeaders;
+    setSort(sort: SortState[]): void;
+    setGlobalSearch(search: string): void;
+    setFilters(filters: FilterState[]): void;
+    setPage(page: number): void;
+    setPerPage(perPage: number): void;
+    private _debouncedFetch;
+    _fetchFromServer(): Promise<void>;
+    initialFetch(): Promise<void>;
+    destroy(): void;
+}

package/dist/state/index.d.ts

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

package/dist/types.d.ts

@@ -0,0 +1,208 @@
+import type { Component } from 'svelte';
+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?: string | ((rows: T[]) => string | number);
+    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;
+}
+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;
+}
+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;
+}
+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[];
+}
+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;
+}
+export interface DataTableConfig<T = any> {
+    data?: T[];
+    serverUrl?: string;
+    serverMethod?: 'GET' | 'POST';
+    csrfCookieName?: string;
+    csrfHeaderName?: string;
+    columns: ColumnDef<T>[];
+    sortable?: boolean;
+    searchable?: boolean;
+    paginate?: boolean;
+    selectable?: SelectionMode;
+    perPage?: number;
+    perPageOptions?: number[];
+    searchDebounceMs?: number;
+    stateSaveKey?: string;
+    rowId?: string | ((row: T) => string | number);
+    rowClass?: string | ((row: T, index: number) => string);
+    buttons?: (ButtonDef | ExportFormat)[];
+    editorMode?: EditorMode;
+    editorFields?: EditorFieldDef[];
+    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>;
+    virtualScroll?: boolean;
+    virtualRowHeight?: number;
+    responsive?: boolean;
+    groupBy?: string;
+    expandable?: boolean;
+    emptyText?: string;
+    loadingText?: string;
+    className?: string;
+    compact?: boolean;
+    striped?: boolean;
+    hover?: boolean;
+    bordered?: boolean;
+    classNames?: DataTableClassNames;
+    unstyled?: boolean;
+}
+export interface DataTableState<T = any> {
+    allRows: T[];
+    filteredRows: T[];
+    sortedRows: T[];
+    paginatedRows: T[];
+    sort: SortState[];
+    filters: FilterState[];
+    globalSearch: string;
+    pagination: PaginationState;
+    selectedIds: Set<string | number>;
+    columnVisibility: Record<string, boolean>;
+    columnOrder: string[];
+    loading: boolean;
+    error: string | null;
+    editingRowId: string | number | null;
+    editingColumn: string | null;
+    editorMode: EditorMode | null;
+    formData: Record<string, any>;
+    validationErrors: Record<string, string>;
+    draw: number;
+    excelFocusedCell: {
+        rowIndex: number;
+        columnKey: string;
+    } | null;
+    excelEditingCell: {
+        rowIndex: number;
+        columnKey: string;
+    } | null;
+    excelEditValue: string;
+}

package/dist/ui/index.d.ts

@@ -0,0 +1,20 @@
+export { default as DataTable } from './DataTable.svelte';
+export { default as DataTableHead } from './DataTableHead.svelte';
+export { default as DataTableBody } from './DataTableBody.svelte';
+export { default as DataTableRow } from './DataTableRow.svelte';
+export { default as DataTableCell } from './DataTableCell.svelte';
+export { default as DataTableExpandedRow } from './DataTableExpandedRow.svelte';
+export { default as DataTableFooter } from './DataTableFooter.svelte';
+export { default as DataTablePagination } from './DataTablePagination.svelte';
+export { default as DataTableSearch } from './DataTableSearch.svelte';
+export { default as DataTableToolbar } from './DataTableToolbar.svelte';
+export { default as DataTableColumnToggle } from './DataTableColumnToggle.svelte';
+export { default as DataTableButtons } from './DataTableButtons.svelte';
+export { default as DataTableEditor } from './DataTableEditor.svelte';
+export { default as DataTableEditorForm } from './DataTableEditorForm.svelte';
+export { default as DataTableEditorField } from './DataTableEditorField.svelte';
+export { default as DataTableModalEditor } from './DataTableModalEditor.svelte';
+export { default as DataTableBubbleEditor } from './DataTableBubbleEditor.svelte';
+export { default as DataTableLoading } from './DataTableLoading.svelte';
+export { default as DataTableEmpty } from './DataTableEmpty.svelte';
+export { default as VirtualScroller } from './virtual/VirtualScroller.svelte';