cenitu-table 0.3.0 → 0.4.0-beta.0

package/README.md

@@ -19,6 +19,7 @@ A spreadsheet-like data grid with a built-in, multi-sheet formula engine. Writte
 - **Formatting:** bold, italic, underline, strike-through, colors, alignment, wrapping (Ctrl+B / I / U), conditional formatting for cells or whole rows.
 - **Layout:** frozen rows and columns, merged cells, hidden columns, column drag-and-drop.
 - **Formula engine:** 100+ functions (SUM, IF, XLOOKUP, SUMIFS, TEXT, date functions…), dynamic arrays that spill (FILTER, SORT, UNIQUE, SEQUENCE), cross-sheet references (`'Other sheet'!A1`), named expressions, incremental recalculation, cycle detection.
+- **Server mode:** paging, sorting and filtering on your backend, with a page bar and text, list, date and yes/no filters.
 - **Data binding:** rows as arrays or as objects bound to columns by property path; edits are written back to your objects.
 - **Import and export:** read and write XLSX (formulas, formats, styles, frozen panes, merges), export CSV with protection against formula injection, all without any library.
 - **Accessibility:** ARIA grid roles and an announced active cell for screen readers.
@@ -114,6 +115,58 @@ book.sheets.forEach((sheet, i) => {
 
 Read: values, formulas, number formats, fonts, fills, alignment, column widths, row heights, hidden columns, frozen panes, merges and defined names. Not read: charts, images, comments, conditional formats, data validation and hidden rows (they are shown). Pass `formulas: 'values'` to take the results stored in the file instead of formulas, for example when a file uses functions the engine does not have.
 
+### Server mode
+
+For lists too large to load, the grid describes the rows it needs and your application fetches them. It never sorts or filters on its own.
+
+```tsx
+<CenituTable
+  dataMode="server"
+  rowKey="id"
+  data={page.items}
+  totalCount={page.totalCount}
+  loading={isFetching}
+  loadError={isError}
+  query={query}
+  onQueryChange={setQuery}
+  columns={[
+    { id: 'orderDate', data: 'orderDate', sortable: true, serverFilter: { kind: 'date' } },
+    { id: 'status', data: 'status', serverFilter: { kind: 'list', options: statusOptions } },
+    { id: 'partner', data: 'partner.name' },
+  ]}
+/>
+```
+
+`query` holds `page`, `pageSize`, `sort: [{ field, desc }]`, `filters` and `search`, always with column ids, so hiding or moving columns cannot break it. Filters are `text`, `list`, `date` (`from`, `to`) or `boolean`. Without React, listen to the `afterQueryChange` hook and pass rows to `grid.setPageRows(rows, total)`.
+
+Rules worth knowing:
+
+- Only columns with `sortable` or `serverFilter` get a menu.
+- Sort, filter and page size changes return to page 1.
+- New rows keep the sort marks, filters, column layout, scroll position and, by `rowKey`, the selection.
+- Ignoring outdated responses is up to the application, since it makes the requests.
+- Change events carry `rowKey` and `columnId`; saving edits, also before a page change, is up to the application.
+- Undo history ends with each new page.
+- Formulas are off unless `formulas` is set, and they then see only the loaded page.
+- Select all, find and replace, and CSV/XLSX export cover the loaded page only.
+- Rows cannot be added or removed locally. A paste that does not fit is cut off and reported by `afterPasteClipped`.
+
+### Row events and saved column layout
+
+```tsx
+<CenituTable
+  rowKey="id"
+  columnLayout={saved}
+  onColumnLayoutChange={(layout) => localStorage.setItem('orders', JSON.stringify(layout))}
+  onRowDoubleClick={({ rowKey }) => {
+    openOrder(rowKey);
+    return false; // keeps the cell editor closed
+  }}
+/>
+```
+
+Layouts need column ids (`columns[i].id` or `data`). Removed columns are skipped when restoring, and new ones stay after the saved ones. A double click also fires two row clicks, as in the browser. `setColumnLayout` clears undo history when it moves columns.
+
 ### Find, formula bar, sorting by several columns
 
 ```ts

package/README.tr.md

@@ -15,6 +15,7 @@ Spreadsheet benzeri bir data grid ve ona bağlı, çok sayfalı bir formül moto
 - **Biçimlendirme:** kalın, italik, altı çizili, üstü çizili, renkler, hizalama, metin kaydırma (Ctrl+B / I / U); hücre ya da tüm satır için koşullu biçimlendirme.
 - **Yerleşim:** sabit satır ve sütunlar, birleştirilmiş hücreler, gizli sütunlar, sürükleyerek sütun taşıma.
 - **Formül motoru:** 100'den fazla fonksiyon (SUM, IF, XLOOKUP, SUMIFS, TEXT, tarih fonksiyonları…), taşan dinamik diziler (FILTER, SORT, UNIQUE, SEQUENCE), sayfalar arası referanslar (`'Diğer Sayfa'!A1`), isimli ifadeler, artımlı yeniden hesaplama, döngü tespiti.
+- **Sunucu modu:** sayfalama, sıralama ve süzme arka uçta; sayfa çubuğu ile metin, liste, tarih ve evet/hayır süzgeçleri.
 - **Veri bağlama:** satırlar dizi ya da nesne olarak verilebilir. Nesnelerde sütunlar alan yoluna bağlanır ve düzenlemeler nesnelerinize geri yazılır.
 - **İçe ve dışa aktarma:** XLSX okuma ve yazma (formüller, biçimler, stiller, sabit bölmeler, birleştirmeler), formül enjeksiyonuna karşı korumalı CSV; hiçbir kütüphane kullanmadan.
 - **Erişilebilirlik:** ARIA grid rolleri, ekran okuyucuya duyurulan aktif hücre.
@@ -112,6 +113,58 @@ kitap.sheets.forEach((sayfa, i) => {
 
 Okunanlar: değerler, formüller, sayı biçimleri, yazı tipleri, dolgular, hizalama, sütun genişlikleri, satır yükseklikleri, gizli sütunlar, sabit bölmeler, birleştirmeler ve tanımlı adlar. Okunmayanlar: grafikler, resimler, yorumlar, koşullu biçimler, veri doğrulama ve gizli satırlar (görünür hale gelir). Dosyada motorun bilmediği fonksiyonlar varsa `formulas: 'values'` ile formüller yerine dosyadaki sonuçları alabilirsiniz.
 
+### Sunucu modu
+
+Tarayıcıya sığmayacak listelerde grid hangi satırlara ihtiyacı olduğunu bildirir, veriyi uygulamanız getirir. Grid kendi başına sıralama ya da süzme yapmaz.
+
+```tsx
+<CenituTable
+  dataMode="server"
+  rowKey="id"
+  data={sayfa.items}
+  totalCount={sayfa.totalCount}
+  loading={yukleniyor}
+  loadError={hataVar}
+  query={sorgu}
+  onQueryChange={setSorgu}
+  columns={[
+    { id: 'orderDate', data: 'orderDate', sortable: true, serverFilter: { kind: 'date' } },
+    { id: 'status', data: 'status', serverFilter: { kind: 'list', options: durumlar } },
+    { id: 'partner', data: 'partner.name' },
+  ]}
+/>
+```
+
+`query` içinde `page`, `pageSize`, `sort: [{ field, desc }]`, `filters` ve `search` bulunur. Alanlar her zaman kolon kimliğidir, bu yüzden kolon gizlemek ya da taşımak sorguyu bozmaz. Süzgeç türleri `text`, `list`, `date` (`from`, `to`) ve `boolean`'dır. React olmadan `afterQueryChange` olayını dinleyip satırları `grid.setPageRows(satirlar, toplam)` ile verin.
+
+Bilmeniz gerekenler:
+
+- Yalnızca `sortable` ya da `serverFilter` tanımlı kolonlarda menü çıkar.
+- Sıralama, süzgeç ve sayfa boyutu değişince 1. sayfaya dönülür.
+- Yeni satırlar gelince sıralama işaretleri, süzgeçler, kolon düzeni, kaydırma konumu ve `rowKey` ile seçim korunur.
+- İstekleri uygulama yaptığı için eski yanıtları yok saymak da uygulamanın işidir.
+- Değişiklik olayları `rowKey` ve `columnId` taşır; düzenlemeleri sayfa değişmeden önce de dahil kaydetmek uygulamaya aittir.
+- Geri alma geçmişi her yeni sayfada sıfırlanır.
+- `formulas` verilmedikçe formüller kapalıdır; açılırsa yalnızca yüklü sayfayı görür.
+- Tümünü seçme, bul ve değiştir, CSV/XLSX dışa aktarma yalnızca yüklü sayfayı kapsar.
+- Satırlar yerelde eklenip silinemez. Sığmayan yapıştırma kesilir ve `afterPasteClipped` ile bildirilir.
+
+### Satır olayları ve kolon düzeni
+
+```tsx
+<CenituTable
+  rowKey="id"
+  columnLayout={kayitli}
+  onColumnLayoutChange={(duzen) => localStorage.setItem('siparisler', JSON.stringify(duzen))}
+  onRowDoubleClick={({ rowKey }) => {
+    siparisiAc(rowKey);
+    return false; // hücre editörünü kapalı tutar
+  }}
+/>
+```
+
+Kolon düzeni için kolon kimliği gerekir (`columns[i].id` ya da `data`). Geri yüklerken kaldırılmış kolonlar atlanır, yeni kolonlar kayıtlı olanların sonrasında kalır. Tarayıcıdaki gibi çift tıklama iki satır tıklaması da üretir. `setColumnLayout` kolon taşırsa geri alma geçmişini temizler.
+
 ### Bul, formül çubuğu, çok sütunlu sıralama
 
 ```ts

package/dist/cenitu-table.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-BHarWDHD.cjs");exports.CSV_MIME=e.CSV_MIME;exports.CellError=e.CellError;exports.CenituGrid=e.CenituGrid;exports.FormulaEngine=e.FormulaEngine;exports.FormulaSyntaxError=e.FormulaSyntaxError;exports.MAX_COLS=e.MAX_COLS;exports.MAX_ROWS=e.MAX_ROWS;exports.RangeValue=e.RangeValue;exports.SHEET_SPAN=e.SHEET_SPAN;exports.XLSX_MIME=e.XLSX_MIME;exports.ZipReader=e.ZipReader;exports.cellKey=e.cellKey;exports.columnIndex=e.columnIndex;exports.columnLabel=e.columnLabel;exports.crc32=e.crc32;exports.dateCodeFromPattern=e.dateCodeFromPattern;exports.dateToSerial=e.dateToSerial;exports.downloadBlob=e.downloadBlob;exports.enUS=e.enUS;exports.formatDateCode=e.formatDateCode;exports.formatSerialDate=e.formatSerialDate;exports.getRegisteredFunctionNames=e.getRegisteredFunctionNames;exports.inverseMove=e.inverseMove;exports.isDateFormat=e.isDateFormat;exports.isError=e.isError;exports.isFormula=e.isFormula;exports.keyToAddress=e.keyToAddress;exports.normalizeRange=e.normalizeRange;exports.numberFormatFromMeta=e.numberFormatFromMeta;exports.parseA1=e.parseA1;exports.parseDateString=e.parseDateString;exports.parseFormula=e.parseFormula;exports.pxToColWidth=e.pxToColWidth;exports.quoteSheetName=e.quoteSheetName;exports.rangeContains=e.rangeContains;exports.readXLSX=e.readXLSX;exports.registerFunction=e.registerFunction;exports.sanitizeSheetNames=e.sanitizeSheetNames;exports.serialToDate=e.serialToDate;exports.setClock=e.setClock;exports.setRandom=e.setRandom;exports.toA1=e.toA1;exports.toCSV=e.toCSV;exports.toXLSX=e.toXLSX;exports.toXLSXCompressed=e.toXLSXCompressed;exports.trTR=e.trTR;exports.unparse=e.unparse;exports.unregisterFunction=e.unregisterFunction;exports.workbookEngine=e.workbookEngine;exports.xlsxParts=e.xlsxParts;exports.zipDeflate=e.zipDeflate;exports.zipStore=e.zipStore;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-Bidvqh7P.cjs");exports.CSV_MIME=e.CSV_MIME;exports.CellError=e.CellError;exports.CenituGrid=e.CenituGrid;exports.FormulaEngine=e.FormulaEngine;exports.FormulaSyntaxError=e.FormulaSyntaxError;exports.MAX_COLS=e.MAX_COLS;exports.MAX_ROWS=e.MAX_ROWS;exports.RangeValue=e.RangeValue;exports.SHEET_SPAN=e.SHEET_SPAN;exports.XLSX_MIME=e.XLSX_MIME;exports.ZipReader=e.ZipReader;exports.cellKey=e.cellKey;exports.columnIndex=e.columnIndex;exports.columnLabel=e.columnLabel;exports.crc32=e.crc32;exports.dateCodeFromPattern=e.dateCodeFromPattern;exports.dateToSerial=e.dateToSerial;exports.downloadBlob=e.downloadBlob;exports.enUS=e.enUS;exports.formatDateCode=e.formatDateCode;exports.formatSerialDate=e.formatSerialDate;exports.getRegisteredFunctionNames=e.getRegisteredFunctionNames;exports.inverseMove=e.inverseMove;exports.isDateFormat=e.isDateFormat;exports.isError=e.isError;exports.isFormula=e.isFormula;exports.keyToAddress=e.keyToAddress;exports.normalizeRange=e.normalizeRange;exports.numberFormatFromMeta=e.numberFormatFromMeta;exports.parseA1=e.parseA1;exports.parseDateString=e.parseDateString;exports.parseFormula=e.parseFormula;exports.pxToColWidth=e.pxToColWidth;exports.quoteSheetName=e.quoteSheetName;exports.rangeContains=e.rangeContains;exports.readXLSX=e.readXLSX;exports.registerFunction=e.registerFunction;exports.sanitizeSheetNames=e.sanitizeSheetNames;exports.serialToDate=e.serialToDate;exports.setClock=e.setClock;exports.setRandom=e.setRandom;exports.toA1=e.toA1;exports.toCSV=e.toCSV;exports.toXLSX=e.toXLSX;exports.toXLSXCompressed=e.toXLSXCompressed;exports.trTR=e.trTR;exports.unparse=e.unparse;exports.unregisterFunction=e.unregisterFunction;exports.workbookEngine=e.workbookEngine;exports.xlsxParts=e.xlsxParts;exports.zipDeflate=e.zipDeflate;exports.zipStore=e.zipStore;

package/dist/cenitu-table.js

@@ -1,4 +1,4 @@
-import { a as e, b as r, C as o, F as t, c as n, M as i, d as l, R as m, S, X as d, Z as u, e as C, f as F, g, h as p, j as X, k as c, l as E, m as M, n as R, o as x, p as A, q as D, r as L, s as T, t as _, u as b, v as f, w as k, x as z, y as N, z as h, A as y, B as I, D as P, E as V, G as v, H as w, I as W, J as q, K as B, L as G, N as H, P as K, Q as O, T as U, U as Z, V as j, W as J, Y as Q, _ as Y, $ } from "./index-BpjIy-X9.js";
+import { a as e, b as r, C as o, F as t, c as n, M as i, d as l, R as m, S, X as d, Z as u, e as C, f as F, g, h as p, j as X, k as c, l as E, m as M, n as R, o as x, p as A, q as D, r as L, s as T, t as _, u as b, v as f, w as k, x as z, y as N, z as h, A as y, B as I, D as P, E as V, G as v, H as w, I as W, J as q, K as B, L as G, N as H, P as K, Q as O, T as U, U as Z, V as j, W as J, Y as Q, _ as Y, $ } from "./index-BIH30fQ2.js";
 export {
   e as CSV_MIME,
   r as CellError,