cenitu-table 0.3.0 → 0.4.0-beta.0

package/dist/react.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const _=require("react/jsx-runtime"),r=require("react"),C=require("./index-BHarWDHD.cjs"),T=["fixedRowsTop","fixedColumnsStart","readOnly","columns","colHeaders","mergeCells","columnSorting","filters","fillHandle","locale","language","contextMenu","search"],E=r.forwardRef(function(e,g){const l=r.useRef(null),t=r.useRef(null),u=r.useRef(e);u.current=e,r.useLayoutEffect(()=>{const{className:c,style:h,onChange:S,onSelection:j,onSort:w,onFilter:v,...x}=u.current,d=new C.CenituGrid(l.current,x);return d.addHook("afterChange",(s,a)=>{var n,i;return(i=(n=u.current).onChange)==null?void 0:i.call(n,s,a)}),d.addHook("afterSelection",(s,a,n,i)=>{var y,R;return(R=(y=u.current).onSelection)==null?void 0:R.call(y,s,a,n,i)}),d.addHook("afterColumnSort",(s,a)=>{var n,i;return(i=(n=u.current).onSort)==null?void 0:i.call(n,s,a)}),d.addHook("afterFilter",s=>{var a,n;return(n=(a=u.current).onFilter)==null?void 0:n.call(a,s)}),t.current=d,()=>{d.destroy(),t.current=null}},[]),r.useImperativeHandle(g,()=>t.current,[]);const m=r.useRef(!1);r.useEffect(()=>{if(!m.current)return;const c=t.current;c&&e.data&&!H(c,e.data)&&c.loadData(e.data)},[e.data]);const f=T.map(c=>e[c]);return r.useEffect(()=>{var h;if(!m.current)return;const c={};T.forEach(S=>e[S]!==void 0&&(c[S]=e[S])),(h=t.current)==null||h.updateSettings(c)},f),r.useEffect(()=>{m.current=!0},[]),_.jsx("div",{ref:l,className:e.className,style:e.style})});function H(o,e){if(!C.isObjectData(e))return b(o.getSourceData(),e);if(o.getSourceObjects()===e)return!0;const g=Array.from({length:o.countCols()},(l,t)=>o.colToProp(t));return b(o.getBoundRows(),C.ObjectBinding.create(e,g).toRows())}function b(o,e){const g=Math.max(o.length,e.length);for(let l=0;l<g;l++){const t=o[l]??[],u=e[l]??[],m=Math.max(t.length,u.length);for(let f=0;f<m;f++)if((t[f]??null)!==(u[f]??null))return!1}return!0}exports.CenituGrid=C.CenituGrid;exports.CenituTable=E;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const b=require("react/jsx-runtime"),s=require("react"),h=require("./index-Bidvqh7P.cjs"),w=["fixedRowsTop","fixedColumnsStart","readOnly","columns","colHeaders","mergeCells","columnSorting","filters","fillHandle","locale","language","contextMenu","search","query","totalCount","loading","loadError"],H=s.forwardRef(function(e,C){const f=s.useRef(null),u=s.useRef(null),r=s.useRef(e);r.current=e,s.useLayoutEffect(()=>{const{className:a,style:y,onChange:m,onSelection:x,onSort:E,onFilter:D,onQueryChange:j,onRowClick:v,onRowDoubleClick:q,onColumnLayoutChange:L,..._}=r.current,c=new h.CenituGrid(f.current,_);return c.addHook("afterChange",(o,n)=>{var t,l;return(l=(t=r.current).onChange)==null?void 0:l.call(t,o,n)}),c.addHook("afterSelection",(o,n,t,l)=>{var R,S;return(S=(R=r.current).onSelection)==null?void 0:S.call(R,o,n,t,l)}),c.addHook("afterColumnSort",(o,n)=>{var t,l;return(l=(t=r.current).onSort)==null?void 0:l.call(t,o,n)}),c.addHook("afterFilter",o=>{var n,t;return(t=(n=r.current).onFilter)==null?void 0:t.call(n,o)}),c.addHook("afterQueryChange",(o,n)=>{var t,l;return(l=(t=r.current).onQueryChange)==null?void 0:l.call(t,o,n)}),c.addHook("afterRowClick",o=>{var n,t;return(t=(n=r.current).onRowClick)==null?void 0:t.call(n,o)}),c.addHook("afterRowDoubleClick",o=>{var n,t;return(t=(n=r.current).onRowDoubleClick)==null?void 0:t.call(n,o)}),c.addHook("afterColumnLayout",o=>{var n,t;return(t=(n=r.current).onColumnLayoutChange)==null?void 0:t.call(n,o)}),u.current=c,()=>{c.destroy(),u.current=null}},[]),s.useImperativeHandle(C,()=>u.current,[]);const g=s.useRef(!1);s.useEffect(()=>{if(!g.current)return;const a=u.current;!a||!e.data||(e.dataMode==="server"?a.setPageRows(e.data,e.totalCount):T(a,e.data)||a.loadData(e.data))},[e.data]);const d=w.map(a=>e[a]);return s.useEffect(()=>{var y;if(!g.current)return;const a={};w.forEach(m=>e[m]!==void 0&&(a[m]=e[m])),(y=u.current)==null||y.updateSettings(a)},d),s.useEffect(()=>{g.current=!0},[]),b.jsx("div",{ref:f,className:e.className,style:e.style})});function T(i,e){if(!h.isObjectData(e))return k(i.getSourceData(),e);if(i.getSourceObjects()===e)return!0;const C=Array.from({length:i.countCols()},(f,u)=>i.colToProp(u));return k(i.getBoundRows(),h.ObjectBinding.create(e,C).toRows())}function k(i,e){const C=Math.max(i.length,e.length);for(let f=0;f<C;f++){const u=i[f]??[],r=e[f]??[],g=Math.max(u.length,r.length);for(let d=0;d<g;d++)if((u[d]??null)!==(r[d]??null))return!1}return!0}exports.CenituGrid=h.CenituGrid;exports.CenituTable=H;

package/dist/react.js

@@ -1,7 +1,7 @@
-import { jsx as T } from "react/jsx-runtime";
-import { forwardRef as E, useRef as h, useLayoutEffect as O, useImperativeHandle as R, useEffect as C } from "react";
-import { C as b, i as j, O as v } from "./index-BpjIy-X9.js";
-const _ = [
+import { jsx as H } from "react/jsx-runtime";
+import { forwardRef as x, useRef as g, useLayoutEffect as b, useImperativeHandle as D, useEffect as y } from "react";
+import { C as E, i as T, O as v } from "./index-BIH30fQ2.js";
+const k = [
   "fixedRowsTop",
   "fixedColumnsStart",
   "readOnly",
@@ -14,58 +14,74 @@ const _ = [
   "locale",
   "language",
   "contextMenu",
-  "search"
-], G = E(function(t, d) {
-  const a = h(null), e = h(null), o = h(t);
-  o.current = t, O(() => {
-    const { className: c, style: S, onChange: g, onSelection: N, onSort: F, onFilter: I, ...w } = o.current, f = new b(a.current, w);
-    return f.addHook("afterChange", (u, l) => {
-      var n, s;
-      return (s = (n = o.current).onChange) == null ? void 0 : s.call(n, u, l);
-    }), f.addHook("afterSelection", (u, l, n, s) => {
-      var x, y;
-      return (y = (x = o.current).onSelection) == null ? void 0 : y.call(x, u, l, n, s);
-    }), f.addHook("afterColumnSort", (u, l) => {
-      var n, s;
-      return (s = (n = o.current).onSort) == null ? void 0 : s.call(n, u, l);
-    }), f.addHook("afterFilter", (u) => {
-      var l, n;
-      return (n = (l = o.current).onFilter) == null ? void 0 : n.call(l, u);
-    }), e.current = f, () => {
-      f.destroy(), e.current = null;
+  "search",
+  "query",
+  "totalCount",
+  "loading",
+  "loadError"
+], P = x(function(e, d) {
+  const i = g(null), a = g(null), r = g(e);
+  r.current = e, b(() => {
+    const { className: u, style: h, onChange: m, onSelection: O, onSort: j, onFilter: M, onQueryChange: N, onRowClick: F, onRowDoubleClick: I, onColumnLayoutChange: Q, ..._ } = r.current, l = new E(i.current, _);
+    return l.addHook("afterChange", (o, n) => {
+      var t, c;
+      return (c = (t = r.current).onChange) == null ? void 0 : c.call(t, o, n);
+    }), l.addHook("afterSelection", (o, n, t, c) => {
+      var w, S;
+      return (S = (w = r.current).onSelection) == null ? void 0 : S.call(w, o, n, t, c);
+    }), l.addHook("afterColumnSort", (o, n) => {
+      var t, c;
+      return (c = (t = r.current).onSort) == null ? void 0 : c.call(t, o, n);
+    }), l.addHook("afterFilter", (o) => {
+      var n, t;
+      return (t = (n = r.current).onFilter) == null ? void 0 : t.call(n, o);
+    }), l.addHook("afterQueryChange", (o, n) => {
+      var t, c;
+      return (c = (t = r.current).onQueryChange) == null ? void 0 : c.call(t, o, n);
+    }), l.addHook("afterRowClick", (o) => {
+      var n, t;
+      return (t = (n = r.current).onRowClick) == null ? void 0 : t.call(n, o);
+    }), l.addHook("afterRowDoubleClick", (o) => {
+      var n, t;
+      return (t = (n = r.current).onRowDoubleClick) == null ? void 0 : t.call(n, o);
+    }), l.addHook("afterColumnLayout", (o) => {
+      var n, t;
+      return (t = (n = r.current).onColumnLayoutChange) == null ? void 0 : t.call(n, o);
+    }), a.current = l, () => {
+      l.destroy(), a.current = null;
     };
-  }, []), R(d, () => e.current, []);
-  const m = h(!1);
-  C(() => {
-    if (!m.current) return;
-    const c = e.current;
-    c && t.data && !D(c, t.data) && c.loadData(t.data);
-  }, [t.data]);
-  const i = _.map((c) => t[c]);
-  return C(() => {
-    var S;
-    if (!m.current) return;
-    const c = {};
-    _.forEach((g) => t[g] !== void 0 && (c[g] = t[g])), (S = e.current) == null || S.updateSettings(c);
-  }, i), C(() => {
-    m.current = !0;
-  }, []), /* @__PURE__ */ T("div", { ref: a, className: t.className, style: t.style });
+  }, []), D(d, () => a.current, []);
+  const C = g(!1);
+  y(() => {
+    if (!C.current) return;
+    const u = a.current;
+    !u || !e.data || (e.dataMode === "server" ? u.setPageRows(e.data, e.totalCount) : L(u, e.data) || u.loadData(e.data));
+  }, [e.data]);
+  const f = k.map((u) => e[u]);
+  return y(() => {
+    var h;
+    if (!C.current) return;
+    const u = {};
+    k.forEach((m) => e[m] !== void 0 && (u[m] = e[m])), (h = a.current) == null || h.updateSettings(u);
+  }, f), y(() => {
+    C.current = !0;
+  }, []), /* @__PURE__ */ H("div", { ref: i, className: e.className, style: e.style });
 });
-function D(r, t) {
-  if (!j(t)) return H(r.getSourceData(), t);
-  if (r.getSourceObjects() === t) return !0;
-  const d = Array.from({ length: r.countCols() }, (a, e) => r.colToProp(e));
-  return H(r.getBoundRows(), v.create(t, d).toRows());
+function L(s, e) {
+  if (!T(e)) return R(s.getSourceData(), e);
+  if (s.getSourceObjects() === e) return !0;
+  const d = Array.from({ length: s.countCols() }, (i, a) => s.colToProp(a));
+  return R(s.getBoundRows(), v.create(e, d).toRows());
 }
-function H(r, t) {
-  const d = Math.max(r.length, t.length);
-  for (let a = 0; a < d; a++) {
-    const e = r[a] ?? [], o = t[a] ?? [], m = Math.max(e.length, o.length);
-    for (let i = 0; i < m; i++) if ((e[i] ?? null) !== (o[i] ?? null)) return !1;
+function R(s, e) {
+  const d = Math.max(s.length, e.length);
+  for (let i = 0; i < d; i++) {
+    const a = s[i] ?? [], r = e[i] ?? [], C = Math.max(a.length, r.length);
+    for (let f = 0; f < C; f++) if ((a[f] ?? null) !== (r[f] ?? null)) return !1;
   }
   return !0;
 }
 export {
-  b as CenituGrid,
-  G as CenituTable
+  E as CenituGrid,
+  P as CenituTable
 };

package/dist/types/grid/cellTypes.d.ts

@@ -1,4 +1,5 @@
 import type { ConditionOp } from './filters.js';
+import type { ServerFilterDef } from './serverMode.js';
 import { type CellValue, type RawCell } from '../formula/values.js';
 export type CellType = 'text' | 'numeric' | 'date' | 'checkbox' | 'dropdown';
 export interface NumericFormat {
@@ -43,6 +44,12 @@ export interface CellRenderContext {
 }
 /** Settings that can be given per column (`columns`) or per cell (`cells`). */
 export interface CellMeta {
+    /** Stable column id used in server queries and change events; default `data`. */
+    id?: string;
+    /** Server mode: the server can sort this column. */
+    sortable?: boolean;
+    /** Server mode: what the server can filter this column by. */
+    serverFilter?: ServerFilterDef;
     /** Object mode: property path bound to this column, e.g. "qty" or "customer.name". */
     data?: string;
     type?: CellType;

package/dist/types/grid/columnMenu.d.ts

@@ -1,5 +1,6 @@
 import type { ColumnFilter, SortOrder } from './filters.js';
 import type { Messages } from './messages.js';
+import { type ServerFilter, type ServerFilterDef } from './serverMode.js';
 export interface ColumnMenuOptions {
     anchor: HTMLElement;
     messages: Messages;
@@ -14,6 +15,12 @@ export interface ColumnMenuOptions {
     filterable: boolean;
     onSort(order: SortOrder | null, add?: boolean): void;
     onFilter(filter: ColumnFilter | null): void;
+    /** Server mode: replaces the local filter controls. */
+    server?: {
+        def: ServerFilterDef;
+        value: ServerFilter | undefined;
+        onFilter(filter: ServerFilter | null): void;
+    };
     onClose(): void;
 }
 /** Excel-like column dropdown: sort buttons, a condition filter and a value checklist. */

package/dist/types/grid/grid.d.ts

@@ -11,6 +11,7 @@ import { type ColumnFilter, type SortOrder } from './filters.js';
 import { type MergeArea } from './merges.js';
 import { type Messages } from './messages.js';
 import { type SearchOptions } from './search.js';
+import { type QueryChangeReason, type ServerFilter, type ServerQuery } from './serverMode.js';
 export interface GridOptions {
     /** Rows as arrays, or as objects bound to columns through `columns[i].data` (edits are written back). */
     data?: RawCell[][] | DataRow[];
@@ -66,6 +67,52 @@ export interface GridOptions {
     search?: boolean;
     /** Shows a bar above the grid with the active cell's address and content; editable. */
     formulaBar?: boolean;
+    /**
+     * 'server': the application fetches pages; the grid never sorts or filters itself and reports
+     * what it needs through the `afterQueryChange` hook. Formulas are off unless `formulas` is set,
+     * and rows cannot be added locally. Default 'client'.
+     */
+    dataMode?: 'client' | 'server';
+    /** Server mode: object property (or function) identifying a row across pages. */
+    rowKey?: string | ((row: DataRow | RawCell[]) => unknown);
+    /** Server mode: page, sort and filters. Set again to change them from outside. */
+    query?: Partial<ServerQuery>;
+    /** Server mode: records matching the query, for the page bar. */
+    totalCount?: number;
+    /** Server mode: old rows stay visible, dimmed, until new ones arrive. */
+    loading?: boolean;
+    /** Server mode: true shows the default message, a string shows that message. */
+    loadError?: boolean | string;
+    /** Server mode: page sizes offered (default 25, 50, 100). */
+    pageSizes?: number[];
+    /** Server mode: page bar below the grid. Default true. */
+    pager?: boolean;
+    /** Server mode: fills the page bar's slot for application buttons. */
+    pagerActions?: (slot: HTMLElement) => void;
+    /** Server mode: replaces the content of the empty, loading and error messages. */
+    renderStatus?: (el: HTMLElement, state: 'empty' | 'loading' | 'error') => void;
+    /** Column widths, order and visibility to start with, from `getColumnLayout`. */
+    columnLayout?: ColumnLayout;
+}
+/** Saved column arrangement. Only columns with an id (`columns[i].id` or `data`) are included. */
+export interface ColumnLayout {
+    columns: {
+        id: string;
+        width: number;
+        hidden: boolean;
+    }[];
+}
+export interface RowEvent {
+    /** Visual row. */
+    row: number;
+    physicalRow: number;
+    col: number;
+    columnId?: string;
+    /** Needs the `rowKey` option. */
+    rowKey?: unknown;
+    /** The source object (object mode) or raw row. */
+    rowData: DataRow | RawCell[] | undefined;
+    originalEvent: MouseEvent;
 }
 export interface SortKey {
     col: number;
@@ -78,6 +125,10 @@ export interface CellChange {
     col: number;
     /** Bound property in object mode. */
     prop?: string;
+    /** Column id, when the column has one. */
+    columnId?: string;
+    /** Server mode: `rowKey` value of the row; indexes change between pages, this does not. */
+    rowKey?: unknown;
     oldValue: RawCell;
     newValue: RawCell;
 }
@@ -91,6 +142,15 @@ interface HookMap {
     afterAlter: (action: AlterAction, index: number, amount: number) => void;
     afterColumnSort: (col: number, order: SortOrder | null) => void;
     afterSort: (keys: SortKey[]) => void;
+    afterRowClick: (e: RowEvent) => void;
+    /** Return false to keep the cell editor closed, e.g. when double click opens the record. */
+    afterRowDoubleClick: (e: RowEvent) => boolean | void;
+    /** Columns were resized, moved, hidden or shown; save the layout here. */
+    afterColumnLayout: (layout: ColumnLayout) => void;
+    /** Server mode: fetch the rows for `query`. */
+    afterQueryChange: (query: ServerQuery, reason: QueryChangeReason) => void;
+    /** Server mode: a paste did not fit the loaded rows; `lost` rows were not pasted. */
+    afterPasteClipped: (lost: number) => void;
     afterFilter: (filters: Map<number, ColumnFilter>) => void;
     afterAutofill: (source: CellRange, target: CellRange) => void;
     afterValidate: (row: number, col: number, error: string | undefined) => void;
@@ -163,9 +223,27 @@ export declare class CenituGrid {
     /** Matches shown highlighted while the search box is open (physical cell keys). */
     private searchHits;
     private bar?;
+    private server?;
     private frame;
     private cleanup;
     constructor(container: HTMLElement, options?: GridOptions);
+    /** Current query (server mode). */
+    getQuery(): ServerQuery | undefined;
+    /** Changes the query and asks for new rows. Anything but a page change returns to page 1. */
+    setQuery(change: Partial<ServerQuery>, reason?: QueryChangeReason): void;
+    /**
+     * Shows a fetched page. Unlike `loadData`, sort marks, filters, column layout and scroll stay,
+     * and the selection follows its row by `rowKey` when the row is still there. Undo history ends
+     * here: it refers to rows that are gone.
+     */
+    setPageRows(rows: RawCell[][] | DataRow[], totalCount?: number): void;
+    private rowKeyAt;
+    /** Stable id of a column: `columns[i].id`, then its bound property. */
+    getColumnId(col: number): string | undefined;
+    private colOfId;
+    private buildServerMode;
+    /** Page bar, busy state and the empty/loading/error message. */
+    private renderServerState;
     /** Number of visible rows. */
     countRows(): number;
     countSourceRows(): number;
@@ -216,7 +294,7 @@ export declare class CenituGrid {
     getCellMeta(row: number, col: number): CellMeta;
     setCellMeta(row: number, col: number, meta: CellMeta): void;
     /** Updates a subset of options at runtime. */
-    updateSettings(s: Pick<GridOptions, 'fixedRowsTop' | 'fixedColumnsStart' | 'readOnly' | 'columns' | 'colHeaders' | 'mergeCells' | 'columnSorting' | 'filters' | 'fillHandle' | 'locale' | 'language' | 'contextMenu' | 'conditionalFormats' | 'search'>): void;
+    updateSettings(s: Pick<GridOptions, 'fixedRowsTop' | 'fixedColumnsStart' | 'readOnly' | 'columns' | 'colHeaders' | 'mergeCells' | 'columnSorting' | 'filters' | 'fillHandle' | 'locale' | 'language' | 'contextMenu' | 'conditionalFormats' | 'search' | 'query' | 'totalCount' | 'loading' | 'loadError'>): void;
     selectCell(row: number, col: number, row2?: number, col2?: number): void;
     private announce;
     /** Selection as [[row, col, row2, col2]] (visual). */
@@ -234,6 +312,16 @@ export declare class CenituGrid {
     toggleCellStyle(flag: 'bold' | 'italic' | 'underline' | 'strike'): void;
     setRowHeight(row: number, height: number): void;
     getRowHeight(row: number): number;
+    /** Current widths, order and visibility; store it and give it back with `setColumnLayout`. */
+    getColumnLayout(): ColumnLayout;
+    /**
+     * Restores a saved layout. Ids that no longer exist are skipped and new columns stay after the
+     * saved ones, so a layout survives application updates. Clears undo history when columns moved:
+     * its entries refer to the old order.
+     */
+    setColumnLayout(layout: ColumnLayout): void;
+    private applyColumnLayout;
+    private layoutChanged;
     hideColumns(cols: number[]): void;
     /** Shows the given hidden columns, or all of them. */
     showColumns(cols?: number[]): void;
@@ -258,6 +346,8 @@ export declare class CenituGrid {
     /** The primary sort key, or null. */
     getSortState(): SortKey | null;
     getSortKeys(): SortKey[];
+    /** Server mode: sets or clears the filter of a column; asks for rows from page 1. */
+    setServerFilter(columnId: string, filter: ServerFilter | null): void;
     setFilter(col: number, filter: ColumnFilter | null): void;
     clearFilters(): void;
     getFilters(): Map<number, ColumnFilter>;
@@ -294,6 +384,7 @@ export declare class CenituGrid {
      * is a no-op, out of range, or would split a merged cell.
      */
     moveColumns(start: number, count: number, target: number): boolean;
+    private relocateColumns;
     canMoveColumns(start: number, count: number, target: number): boolean;
     undo(): void;
     redo(): void;
@@ -418,6 +509,8 @@ export declare class CenituGrid {
     private onMouseDown;
     private onContextMenu;
     private onDoubleClick;
+    /** The row a click landed on; null for headers, checkboxes and drags that ended on another cell. */
+    private rowEventAt;
     private onDrag;
     private onMouseUp;
     private dropLine?;
@@ -428,6 +521,7 @@ export declare class CenituGrid {
     private fillToDataEnd;
     private startResize;
     private startRowResize;
+    private openServerMenu;
     private openMenu;
     private toggleCheckboxes;
     private moveActive;

package/dist/types/grid/messages.d.ts

@@ -60,6 +60,16 @@ export interface Messages {
     previous: string;
     close: string;
     formulaBar: string;
+    /** {from}, {to} and {total} are record numbers. */
+    pagerRange: string;
+    pageSize: string;
+    noRows: string;
+    loading: string;
+    loadError: string;
+    dateFrom: string;
+    dateTo: string;
+    yes: string;
+    no: string;
 }
 export declare const enUS: Messages;
 export declare const trTR: Messages;

package/dist/types/grid/serverMode.d.ts

@@ -0,0 +1,66 @@
+import type { Messages } from './messages.js';
+/** What a column can be filtered by on the server. */
+export type ServerFilterDef = {
+    kind: 'text';
+} | {
+    kind: 'list';
+    options: {
+        value: string;
+        label?: string;
+    }[];
+} | {
+    kind: 'date';
+} | {
+    kind: 'boolean';
+};
+/** A filter value in the query; date bounds are as the date inputs give them (YYYY-MM-DD). */
+export type ServerFilter = {
+    kind: 'text';
+    value: string;
+} | {
+    kind: 'list';
+    values: string[];
+} | {
+    kind: 'date';
+    from?: string;
+    to?: string;
+} | {
+    kind: 'boolean';
+    value: boolean;
+};
+export interface ServerSort {
+    field: string;
+    desc: boolean;
+}
+/** Describes the rows the application should fetch. Fields are column ids, never indexes. */
+export interface ServerQuery {
+    page: number;
+    pageSize: number;
+    sort: ServerSort[];
+    filters: Record<string, ServerFilter>;
+    search?: string;
+}
+export type QueryChangeReason = 'page' | 'pageSize' | 'sort' | 'filter' | 'search';
+export declare const DEFAULT_PAGE_SIZES: number[];
+export declare function initialQuery(q: Partial<ServerQuery> | undefined, pageSizes: number[]): ServerQuery;
+export declare const pageCount: (total: number, pageSize: number) => number;
+/** The controls for one filter; `read` gives the entered filter, or null when it is empty. */
+export declare function serverFilterSection(doc: Document, m: Messages, def: ServerFilterDef, value: ServerFilter | undefined): {
+    el: HTMLElement;
+    read(): ServerFilter | null;
+};
+/** Page bar: custom actions, record range, page size, previous and next. */
+export declare class Pager {
+    private readonly m;
+    readonly el: HTMLDivElement;
+    /** Slot for application buttons. */
+    readonly actions: HTMLDivElement;
+    private readonly range;
+    private readonly size;
+    private readonly position;
+    private readonly prev;
+    private readonly next;
+    constructor(doc: Document, m: Messages, pageSizes: number[], onPage: (delta: number) => void, onSize: (size: number) => void);
+    /** `total` undefined keeps the last figures, so the bar does not flicker while a page loads. */
+    update(q: ServerQuery, total: number | undefined): void;
+}

package/dist/types/index.d.ts

@@ -1,8 +1,9 @@
-export { CenituGrid, type GridOptions, type CellChange, type ChangeSource, type AlterAction, type SortKey, type HookName, } from './grid/grid.js';
+export { CenituGrid, type GridOptions, type CellChange, type ChangeSource, type AlterAction, type SortKey, type ColumnLayout, type RowEvent, type HookName, } from './grid/grid.js';
 export type { CellMeta, CellStyle, ConditionalFormat, NumericFormat, CellRenderContext, CellType as GridCellType } from './grid/cellTypes.js';
 export type { ColumnFilter, ConditionOp, SortOrder } from './grid/filters.js';
 export type { MergeArea } from './grid/merges.js';
 export type { SearchOptions } from './grid/search.js';
+export type { ServerQuery, ServerFilter, ServerFilterDef, ServerSort, QueryChangeReason } from './grid/serverMode.js';
 export type { MenuEntry, MenuItem } from './grid/contextMenu.js';
 export type { DataRow } from './grid/binding.js';
 export { enUS, trTR, type Messages } from './grid/messages.js';

package/dist/types/react/index.d.ts

@@ -1,6 +1,7 @@
 import { type CSSProperties } from 'react';
 import type { ColumnFilter, SortOrder } from '../grid/filters.js';
-import { CenituGrid, type CellChange, type ChangeSource, type GridOptions } from '../grid/grid.js';
+import { CenituGrid, type CellChange, type ChangeSource, type ColumnLayout, type GridOptions, type RowEvent } from '../grid/grid.js';
+import type { QueryChangeReason, ServerQuery } from '../grid/serverMode.js';
 export interface CenituTableProps extends GridOptions {
     className?: string;
     style?: CSSProperties;
@@ -8,6 +9,12 @@ export interface CenituTableProps extends GridOptions {
     onSelection?(row: number, col: number, row2: number, col2: number): void;
     onSort?(col: number, order: SortOrder | null): void;
     onFilter?(filters: Map<number, ColumnFilter>): void;
+    onRowClick?(event: RowEvent): void;
+    /** Return false to keep the cell editor closed. */
+    onRowDoubleClick?(event: RowEvent): boolean | void;
+    onColumnLayoutChange?(layout: ColumnLayout): void;
+    /** Server mode: fetch the rows for `query`. */
+    onQueryChange?(query: ServerQuery, reason: QueryChangeReason): void;
 }
 /**
  * React component around CenituGrid. The ref exposes the grid instance for imperative calls.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cenitu-table",
-  "version": "0.3.0",
+  "version": "0.4.0-beta.0",
   "description": "Spreadsheet-like data grid with a built-in multi-sheet formula engine. Zero runtime dependencies.",
   "type": "module",
   "license": "MIT",