cenitu-table 0.4.0-beta.0 → 0.4.0-beta.1

package/README.md

@@ -20,6 +20,9 @@ A spreadsheet-like data grid with a built-in, multi-sheet formula engine. Writte
 - **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.
+- **Editing:** dropdowns that store an id and show a label, choices searched on your server, custom editors, also as React components.
+- **Rows:** expandable detail areas, hidden rows, row click events, footer totals, notes and links.
+- **Touch:** handles follow fingers, long press opens the context menu.
 - **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.
@@ -113,7 +116,7 @@ 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.
+Read: values, formulas, number formats, fonts, fills, alignment, column widths, row heights, hidden rows and columns, frozen panes, merges and defined names. Not read: charts, images, comments, conditional formats and data validation. 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
 
@@ -148,7 +151,7 @@ Rules worth knowing:
 - 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.
+- Select all, find and replace, and `downloadCSV`/`downloadXLSX` cover the loaded page only; `downloadAllCSV`/`downloadAllXLSX` cover the full result through `fetchAllRows`.
 - 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
@@ -167,6 +170,54 @@ Rules worth knowing:
 
 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.
 
+### Editors and dropdowns
+
+```tsx
+import { reactEditor, reactRenderer } from 'cenitu-table/react';
+
+const columns = [
+  // Stores the id, shows the label; typed and pasted labels become ids.
+  { data: 'statusId', type: 'dropdown', source: [{ value: 1, label: 'Open' }, { value: 2, label: 'Closed' }] },
+  // Searches on the server. Older requests are aborted through `signal`.
+  {
+    data: 'partnerId',
+    type: 'dropdown',
+    loadOptions: (query, signal) => api.partners(query, { signal }),
+    resolveLabel: (id, row) => row.partner?.name,
+  },
+  { data: 'color', editor: reactEditor(ColorPicker) }, // props: value, commit, cancel, row, col…
+  { data: 'state', renderer: reactRenderer(StateBadge) }, // props: value, context
+];
+```
+
+Without React, an editor is a function: `editor: ({ el, value, commit, cancel }) => ({ getValue, destroy })`. It renders into `el` and finishes with `commit(value)` or `cancel()`. A click elsewhere stores `getValue()` when given, and `destroy` runs once however it closes. With `loadOptions`, text alone changes nothing: a choice must be picked, or the cell emptied (`strict: false` allows free text).
+
+A `renderer` may return a cleanup function, called when the cell element is recycled while scrolling.
+
+### Rows, totals, notes and links
+
+```ts
+import { linkRenderer } from 'cenitu-table';
+
+new CenituGrid(el, {
+  data,
+  rowDetail: (host, row) => void (host.textContent = row.notes), // expand mark in row headers
+  columns: [
+    { data: 'total', summary: 'sum' }, // sum, avg, count, min, max or a function
+    { data: 'site', renderer: linkRenderer((v) => String(v)) }, // http, https, mailto and tel only
+  ],
+});
+
+grid.hideRows([3]);
+grid.setCellNote(0, 1, 'Check this');
+```
+
+In server mode, totals come from `summaryValues: { total: 1234 }`, because the page cannot know them. To export the full result there, give `fetchAllRows: (query) => api.all(query)` and call `downloadAllXLSX()` or `downloadAllCSV()`.
+
+### Theming
+
+`theme: 'light' | 'dark' | 'auto'` can change at runtime through `updateSettings` or the React prop. Colors are CSS variables on `.ct-root`, `.ct-menu`, `.ct-bar` and `.ct-pager`: `--ct-bg`, `--ct-fg`, `--ct-muted`, `--ct-grid`, `--ct-header-bg`, `--ct-header-fg`, `--ct-header-hl`, `--ct-accent`, `--ct-range`, `--ct-error`, `--ct-invalid-bg`, `--ct-readonly-fg`, `--ct-shadow`, `--ct-match`, `--ct-note`.
+
 ### Find, formula bar, sorting by several columns
 
 ```ts

package/README.tr.md

@@ -16,6 +16,9 @@ Spreadsheet benzeri bir data grid ve ona bağlı, çok sayfalı bir formül moto
 - **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.
+- **Düzenleme:** kimlik saklayıp etiket gösteren açılır listeler, sunucuda aranan seçenekler, React bileşeni de olabilen özel editörler.
+- **Satırlar:** açılır ayrıntı alanları, gizli satırlar, satır tıklama olayları, alt toplamlar, notlar ve bağlantılar.
+- **Dokunmatik:** tutamaçlar parmağı izler, uzun basış sağ tık menüsünü açar.
 - **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.
@@ -111,7 +114,7 @@ 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.
+Okunanlar: değerler, formüller, sayı biçimleri, yazı tipleri, dolgular, hizalama, sütun genişlikleri, satır yükseklikleri, gizli satır ve sütunlar, sabit bölmeler, birleştirmeler ve tanımlı adlar. Okunmayanlar: grafikler, resimler, yorumlar, koşullu biçimler ve veri doğrulama. Dosyada motorun bilmediği fonksiyonlar varsa `formulas: 'values'` ile formüller yerine dosyadaki sonuçları alabilirsiniz.
 
 ### Sunucu modu
 
@@ -146,7 +149,7 @@ Bilmeniz gerekenler:
 - 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.
+- Tümünü seçme, bul ve değiştir, `downloadCSV`/`downloadXLSX` yalnızca yüklü sayfayı kapsar; `downloadAllCSV`/`downloadAllXLSX` ise `fetchAllRows` ile tüm sonucu aktarır.
 - Satırlar yerelde eklenip silinemez. Sığmayan yapıştırma kesilir ve `afterPasteClipped` ile bildirilir.
 
 ### Satır olayları ve kolon düzeni
@@ -165,6 +168,54 @@ Bilmeniz gerekenler:
 
 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.
 
+### Editörler ve açılır listeler
+
+```tsx
+import { reactEditor, reactRenderer } from 'cenitu-table/react';
+
+const columns = [
+  // Kimliği saklar, etiketi gösterir; yazılan ve yapıştırılan etiketler kimliğe çevrilir.
+  { data: 'durumId', type: 'dropdown', source: [{ value: 1, label: 'Açık' }, { value: 2, label: 'Kapalı' }] },
+  // Sunucuda arar. Eski istekler `signal` ile iptal edilir.
+  {
+    data: 'cariId',
+    type: 'dropdown',
+    loadOptions: (sorgu, signal) => api.cariler(sorgu, { signal }),
+    resolveLabel: (id, satir) => satir.cari?.ad,
+  },
+  { data: 'renk', editor: reactEditor(RenkSecici) }, // prop'lar: value, commit, cancel, row, col…
+  { data: 'durum', renderer: reactRenderer(DurumRozeti) }, // prop'lar: value, context
+];
+```
+
+React olmadan editör bir fonksiyondur: `editor: ({ el, value, commit, cancel }) => ({ getValue, destroy })`. `el` içine çizer, `commit(deger)` ya da `cancel()` ile biter. Başka yere tıklanınca varsa `getValue()` saklanır; `destroy` nasıl kapanırsa kapansın bir kez çalışır. `loadOptions` ile yalnızca metin yazmak değeri değiştirmez: seçenek seçilmeli ya da hücre boşaltılmalıdır (`strict: false` serbest metne izin verir).
+
+`renderer` bir temizlik fonksiyonu döndürebilir; hücre elemanı kaydırma sırasında yeniden kullanılırken çağrılır.
+
+### Satırlar, toplamlar, notlar ve bağlantılar
+
+```ts
+import { linkRenderer } from 'cenitu-table';
+
+new CenituGrid(el, {
+  data,
+  rowDetail: (alan, satir) => void (alan.textContent = satir.aciklama), // satır başlığında açma işareti
+  columns: [
+    { data: 'tutar', summary: 'sum' }, // sum, avg, count, min, max ya da fonksiyon
+    { data: 'site', renderer: linkRenderer((v) => String(v)) }, // yalnızca http, https, mailto, tel
+  ],
+});
+
+grid.hideRows([3]);
+grid.setCellNote(0, 1, 'Kontrol et');
+```
+
+Sunucu modunda toplamlar `summaryValues: { tutar: 1234 }` ile verilir, çünkü sayfa bunları bilemez. Tüm sonucu dışa aktarmak için `fetchAllRows: (sorgu) => api.tumu(sorgu)` verip `downloadAllXLSX()` ya da `downloadAllCSV()` çağırın.
+
+### Tema
+
+`theme: 'light' | 'dark' | 'auto'` çalışırken `updateSettings` ya da React prop'uyla değiştirilebilir. Renkler `.ct-root`, `.ct-menu`, `.ct-bar` ve `.ct-pager` üzerindeki CSS değişkenleridir: `--ct-bg`, `--ct-fg`, `--ct-muted`, `--ct-grid`, `--ct-header-bg`, `--ct-header-fg`, `--ct-header-hl`, `--ct-accent`, `--ct-range`, `--ct-error`, `--ct-invalid-bg`, `--ct-readonly-fg`, `--ct-shadow`, `--ct-match`, `--ct-note`.
+
 ### 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-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;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-Cl7J9niR.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.linkRenderer=e.linkRenderer;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-BIH30fQ2.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 k, u as _, v as b, w as f, 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, $, a0 as aa } from "./index-CKuAiNIg.js";
 export {
   e as CSV_MIME,
   r as CellError,
@@ -25,31 +25,32 @@ export {
   D as inverseMove,
   L as isDateFormat,
   T as isError,
-  _ as isFormula,
-  b as keyToAddress,
+  k as isFormula,
+  _ as keyToAddress,
+  b as linkRenderer,
   f as normalizeRange,
-  k as numberFormatFromMeta,
-  z as parseA1,
-  N as parseDateString,
-  h as parseFormula,
-  y as pxToColWidth,
-  I as quoteSheetName,
-  P as rangeContains,
-  V as readXLSX,
-  v as registerFunction,
-  w as sanitizeSheetNames,
-  W as serialToDate,
-  q as setClock,
-  B as setRandom,
-  G as toA1,
-  H as toCSV,
-  K as toXLSX,
-  O as toXLSXCompressed,
-  U as trTR,
-  Z as unparse,
-  j as unregisterFunction,
-  J as workbookEngine,
-  Q as xlsxParts,
-  Y as zipDeflate,
-  $ as zipStore
+  z as numberFormatFromMeta,
+  N as parseA1,
+  h as parseDateString,
+  y as parseFormula,
+  I as pxToColWidth,
+  P as quoteSheetName,
+  V as rangeContains,
+  v as readXLSX,
+  w as registerFunction,
+  W as sanitizeSheetNames,
+  q as serialToDate,
+  B as setClock,
+  G as setRandom,
+  H as toA1,
+  K as toCSV,
+  O as toXLSX,
+  U as toXLSXCompressed,
+  Z as trTR,
+  j as unparse,
+  J as unregisterFunction,
+  Q as workbookEngine,
+  Y as xlsxParts,
+  $ as zipDeflate,
+  aa as zipStore
 };