@toolbox-web/grid 1.25.1 → 1.26.0

package/lib/plugins/editing/types.d.ts

@@ -196,8 +196,28 @@ export interface EditCloseDetail<TRow = unknown> {
  */
 declare module '../../core/types' {
     interface BaseColumnConfig<TRow, TValue> {
-        /** Whether the field is editable (enables editors). Requires EditingPlugin. */
-        editable?: boolean;
+        /**
+         * Whether the field is editable (enables editors). Requires EditingPlugin.
+         *
+         * - `true` — editable for all rows
+         * - `false` / omitted — not editable
+         * - `(row: TRow) => boolean` — conditionally editable per row
+         *
+         * When a function is provided it is evaluated each time the grid needs to
+         * determine if a specific cell can enter edit mode (click, keyboard, grid
+         * mode render, tab navigation, etc.). Keep the function fast — it runs on
+         * hot render paths.
+         *
+         * @example
+         * ```typescript
+         * // Always editable
+         * { field: 'name', editable: true }
+         *
+         * // Conditionally editable
+         * { field: 'price', editable: (row) => row.status !== 'locked' }
+         * ```
+         */
+        editable?: boolean | ((row: TRow) => boolean);
         /** Optional custom editor factory or element tag name. Requires EditingPlugin. */
         editor?: ColumnEditorSpec<TRow, TValue>;
         /**
@@ -306,7 +326,7 @@ declare module '../../core/types' {
          */
         editorParams?: Record<string, unknown>;
     }
-    interface GridConfig {
+    interface GridConfig<TRow = any> {
         /**
          * Edit trigger mode. Requires `EditingPlugin` to be loaded.
          *
@@ -319,6 +339,32 @@ declare module '../../core/types' {
          * - `false`: Disable editing entirely
          */
         editOn?: 'click' | 'dblclick' | 'manual' | false;
+        /**
+         * Row-level editability gate. Requires `EditingPlugin` to be loaded.
+         *
+         * When provided, this function is called **before** the column-level
+         * `editable` check. If it returns `false` for a given row, **no cell** in
+         * that row can be edited regardless of the column configuration.
+         *
+         * Omitting this property (or returning `true`) defers to per-column
+         * `editable` settings.
+         *
+         * Keep the callback fast — it is invoked on every editability check
+         * (click, keyboard, grid-mode render, tab navigation).
+         *
+         * @example
+         * ```typescript
+         * // Block editing for archived rows
+         * gridConfig = {
+         *   rowEditable: (row) => !row.archived,
+         *   columns: [
+         *     { field: 'name', editable: true },
+         *     { field: 'price', editable: (row) => row.status === 'draft' },
+         *   ],
+         * };
+         * ```
+         */
+        rowEditable?: (row: TRow) => boolean;
     }
     interface DataGridEventMap<TRow = unknown> {
         /** Fired when a cell edit is canceled (Escape key). The cell reverts to its previous value. @group Editing Events */
@@ -377,7 +423,9 @@ export interface EditingConfig {
      *
      * @example
      * ```typescript
-     * const grid = document.querySelector('tbw-grid');
+     * import { queryGrid } from '@toolbox-web/grid';
+     *
+     * const grid = queryGrid('tbw-grid');
      * grid.gridConfig = {
      *   getRowId: (r) => r.id,
      *   columns: [...],

package/lib/plugins/export/ExportPlugin.d.ts

@@ -41,10 +41,10 @@ import { ExportConfig, ExportFormat, ExportParams } from './types';
  *
  * @example Basic Export with Button
  * ```ts
- * import '@toolbox-web/grid';
+ * import { queryGrid } from '@toolbox-web/grid';
  * import { ExportPlugin } from '@toolbox-web/grid/plugins/export';
  *
- * const grid = document.querySelector('tbw-grid');
+ * const grid = queryGrid('tbw-grid');
  * grid.gridConfig = {
  *   columns: [
  *     { field: 'name', header: 'Name' },

package/lib/plugins/export/index.js

@@ -1,2 +1,2 @@
-const e='<svg viewBox="0 0 16 16" width="12" height="12"><path fill="currentColor" d="M6 10.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/></svg>',t={expand:"▶",collapse:"▼",sortAsc:"▲",sortDesc:"▼",sortNone:"⇅",submenuArrow:"▶",dragHandle:"⋮⋮",toolPanel:"☰",filter:e,filterActive:e,print:"🖨️"};class r{static dependencies;static manifest;aliases;version="undefined"!=typeof __GRID_VERSION__?__GRID_VERSION__:"dev";styles;cellRenderers;headerRenderers;cellEditors;grid;config;userConfig;#e;get defaultConfig(){return{}}constructor(e={}){this.userConfig=e}attach(e){this.#e?.abort(),this.#e=new AbortController,this.grid=e,this.config={...this.defaultConfig,...this.userConfig}}detach(){this.#e?.abort(),this.#e=void 0}getPlugin(e){return this.grid?.getPlugin(e)}emit(e,t){this.grid?.dispatchEvent?.(new CustomEvent(e,{detail:t,bubbles:!0}))}emitCancelable(e,t){const r=new CustomEvent(e,{detail:t,bubbles:!0,cancelable:!0});return this.grid?.dispatchEvent?.(r),r.defaultPrevented}on(e,t){this.grid?._pluginManager?.subscribe(this,e,t)}off(e){this.grid?._pluginManager?.unsubscribe(this,e)}emitPluginEvent(e,t){this.grid?._pluginManager?.emitPluginEvent(e,t)}requestRender(){this.grid?.requestRender?.()}requestColumnsRender(){this.grid?.requestColumnsRender?.()}requestRenderWithFocus(){this.grid?.requestRenderWithFocus?.()}requestAfterRender(){this.grid?.requestAfterRender?.()}requestVirtualRefresh(){this.grid?.requestVirtualRefresh?.()}get rows(){return this.grid?.rows??[]}get sourceRows(){return this.grid?.sourceRows??[]}get columns(){return this.grid?.columns??[]}get visibleColumns(){return this.grid?._visibleColumns??[]}get gridElement(){return this.grid?._hostElement}get disconnectSignal(){return this.#e?.signal??this.grid?.disconnectSignal}get gridIcons(){const e=this.grid?.gridConfig?.icons??{};return{...t,...e}}get isAnimationEnabled(){const e=this.grid?.effectiveConfig?.animation?.mode??"reduced-motion";if(!1===e||"off"===e)return!1;if(!0===e||"on"===e)return!0;const t=this.gridElement;if(t){return"0"!==getComputedStyle(t).getPropertyValue("--tbw-animation-enabled").trim()}return!0}get animationDuration(){const e=this.gridElement;if(e){const t=getComputedStyle(e).getPropertyValue("--tbw-animation-duration").trim(),r=parseInt(t,10);if(!isNaN(r))return r}return 200}resolveIcon(e,t){return void 0!==t?t:this.gridIcons[e]}setIcon(e,t){"string"==typeof t?e.innerHTML=t:t instanceof HTMLElement&&(e.innerHTML="",e.appendChild(t.cloneNode(!0)))}warn(e){var t,r;console.warn(`${t=this.gridElement.id,r=this.name,`[tbw-grid${t?`#${t}`:""}${r?`:${r}`:""}]`} ${e}`)}}function n(e,t){return t?.length?[...t].sort((e,t)=>e-t).map(t=>e[t]).filter(e=>null!=e):e}function s(e,t=!0){if(null==e)return"";if(e instanceof Date)return e.toISOString();if("object"==typeof e)return JSON.stringify(e);const r=String(e);return t&&(r.includes(",")||r.includes('"')||r.includes("\n")||r.includes("\r"))?`"${r.replace(/"/g,'""')}"`:r}function i(e,t){const r=URL.createObjectURL(e),n=document.createElement("a");n.href=r,n.download=t,n.style.display="none",document.body.appendChild(n),n.click(),document.body.removeChild(n),URL.revokeObjectURL(r)}function o(e){return e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&apos;")}class l extends r{name="export";get defaultConfig(){return{fileName:"export",includeHeaders:!0,onlyVisible:!0,onlySelected:!1}}isExportingFlag=!1;lastExportInfo=null;performExport(e,t){const r=this.config,l={format:e,fileName:t?.fileName??r.fileName??"export",includeHeaders:t?.includeHeaders??r.includeHeaders,processCell:t?.processCell,processHeader:t?.processHeader,columns:t?.columns,rowIndices:t?.rowIndices},a=function(e,t,r=!0){let n=e;if(r&&(n=n.filter(e=>!e.hidden&&!e.field.startsWith("__")&&!0!==e.meta?.utility)),t?.length){const e=new Set(t);n=n.filter(t=>e.has(t.field))}return n}(this.columns,t?.columns,r.onlyVisible);let c;if(t?.rowIndices)c=n(this.rows,t.rowIndices);else if(r.onlySelected){const e=this.getSelectionState();c=e?.selected?.size?n(this.rows,[...e.selected]):[...this.rows]}else c=[...this.rows];this.isExportingFlag=!0;let d=l.fileName;try{switch(e){case"csv":{const e=function(e,t,r,n={}){const i=n.delimiter??",",o=n.newline??"\n",l=[],a=n.bom?"\ufeff":"";if(!1!==r.includeHeaders){const e=t.map(e=>{const t=e.header||e.field;return s(r.processHeader?r.processHeader(t,e.field):t)});l.push(e.join(i))}for(const c of e){const e=t.map(e=>{let t=c[e.field];return r.processCell&&(t=r.processCell(t,e.field,c)),s(t)});l.push(e.join(i))}return a+l.join(o)}(c,a,l,{bom:!0});d=d.endsWith(".csv")?d:`${d}.csv`,function(e,t){i(new Blob([e],{type:"text/csv;charset=utf-8;"}),t)}(e,d);break}case"excel":{const e=function(e,t,r){let n='<?xml version="1.0" encoding="UTF-8"?>\n<?mso-application progid="Excel.Sheet"?>\n<Workbook xmlns="urn:schemas-microsoft-com:office:spreadsheet"\n  xmlns:ss="urn:schemas-microsoft-com:office:spreadsheet">\n<Worksheet ss:Name="Sheet1">\n<Table>';if(!1!==r.includeHeaders){n+="\n<Row>";for(const e of t){const t=e.header||e.field;n+=`<Cell><Data ss:Type="String">${o(r.processHeader?r.processHeader(t,e.field):t)}</Data></Cell>`}n+="</Row>"}for(const s of e){n+="\n<Row>";for(const e of t){let t=s[e.field];r.processCell&&(t=r.processCell(t,e.field,s));let i="String",l="";null==t?l="":"number"!=typeof t||isNaN(t)?t instanceof Date?(i="DateTime",l=t.toISOString()):l=o(String(t)):(i="Number",l=String(t)),n+=`<Cell><Data ss:Type="${i}">${l}</Data></Cell>`}n+="</Row>"}return n+="\n</Table>\n</Worksheet>\n</Workbook>",n}(c,a,l);d=d.endsWith(".xls")?d:`${d}.xls`,function(e,t){const r=t.endsWith(".xls")?t:`${t}.xls`;i(new Blob([e],{type:"application/vnd.ms-excel;charset=utf-8;"}),r)}(e,d);break}case"json":{const e=c.map(e=>{const t={};for(const r of a){let n=e[r.field];l.processCell&&(n=l.processCell(n,r.field,e)),t[r.field]=n}return t}),t=JSON.stringify(e,null,2);d=d.endsWith(".json")?d:`${d}.json`;i(new Blob([t],{type:"application/json"}),d);break}}this.lastExportInfo={format:e,timestamp:/* @__PURE__ */new Date},this.emit("export-complete",{format:e,fileName:d,rowCount:c.length,columnCount:a.length})}finally{this.isExportingFlag=!1}}getSelectionState(){try{return this.grid?.getPluginState?.("selection")??null}catch{return null}}exportCsv(e){this.performExport("csv",e)}exportExcel(e){this.performExport("excel",e)}exportJson(e){this.performExport("json",e)}isExporting(){return this.isExportingFlag}getLastExport(){return this.lastExportInfo}}export{l as ExportPlugin};
+function e(e,t){return`[tbw-grid${e?`#${e}`:""}${t?`:${t}`:""}]`}function t(t,r,n,i){return`${e(n,i)} ${t}: ${r}\n\n  → More info: ${function(e){return`https://toolboxjs.com/grid/errors#${e.toLowerCase()}`}(t)}`}const r='<svg viewBox="0 0 16 16" width="12" height="12"><path fill="currentColor" d="M6 10.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/></svg>',n={expand:"▶",collapse:"▼",sortAsc:"▲",sortDesc:"▼",sortNone:"⇅",submenuArrow:"▶",dragHandle:"⋮⋮",toolPanel:"☰",filter:r,filterActive:r,print:"🖨️"};class i{static dependencies;static manifest;aliases;version="undefined"!=typeof __GRID_VERSION__?__GRID_VERSION__:"dev";styles;cellRenderers;headerRenderers;cellEditors;grid;config;userConfig;#e;get defaultConfig(){return{}}constructor(e={}){this.userConfig=e}attach(e){this.#e?.abort(),this.#e=new AbortController,this.grid=e,this.config={...this.defaultConfig,...this.userConfig}}detach(){this.#e?.abort(),this.#e=void 0}getPlugin(e){return this.grid?.getPlugin(e)}emit(e,t){this.grid?.dispatchEvent?.(new CustomEvent(e,{detail:t,bubbles:!0}))}emitCancelable(e,t){const r=new CustomEvent(e,{detail:t,bubbles:!0,cancelable:!0});return this.grid?.dispatchEvent?.(r),r.defaultPrevented}on(e,t){this.grid?._pluginManager?.subscribe(this,e,t)}off(e){this.grid?._pluginManager?.unsubscribe(this,e)}emitPluginEvent(e,t){this.grid?._pluginManager?.emitPluginEvent(e,t)}requestRender(){this.grid?.requestRender?.()}requestColumnsRender(){this.grid?.requestColumnsRender?.()}requestRenderWithFocus(){this.grid?.requestRenderWithFocus?.()}requestAfterRender(){this.grid?.requestAfterRender?.()}requestVirtualRefresh(){this.grid?.requestVirtualRefresh?.()}get rows(){return this.grid?.rows??[]}get sourceRows(){return this.grid?.sourceRows??[]}get columns(){return this.grid?.columns??[]}get visibleColumns(){return this.grid?._visibleColumns??[]}get gridElement(){return this.grid?._hostElement}get disconnectSignal(){return this.#e?.signal??this.grid?.disconnectSignal}get gridIcons(){const e=this.grid?.gridConfig?.icons??{};return{...n,...e}}get isAnimationEnabled(){const e=this.grid?.effectiveConfig?.animation?.mode??"reduced-motion";if(!1===e||"off"===e)return!1;if(!0===e||"on"===e)return!0;const t=this.gridElement;if(t){return"0"!==getComputedStyle(t).getPropertyValue("--tbw-animation-enabled").trim()}return!0}get animationDuration(){const e=this.gridElement;if(e){const t=getComputedStyle(e).getPropertyValue("--tbw-animation-duration").trim(),r=parseInt(t,10);if(!isNaN(r))return r}return 200}resolveIcon(e,t){return void 0!==t?t:this.gridIcons[e]}setIcon(e,t){"string"==typeof t?e.innerHTML=t:t instanceof HTMLElement&&(e.innerHTML="",e.appendChild(t.cloneNode(!0)))}warn(r,n){void 0!==n?console.warn(t(r,n,this.gridElement.id,this.name)):console.warn(`${e(this.gridElement.id,this.name)} ${r}`)}throwDiagnostic(e,r){throw new Error(t(e,r,this.gridElement.id,this.name))}}function s(e,t){return t?.length?[...t].sort((e,t)=>e-t).map(t=>e[t]).filter(e=>null!=e):e}function o(e,t=!0){if(null==e)return"";if(e instanceof Date)return e.toISOString();if("object"==typeof e)return JSON.stringify(e);const r=String(e);return t&&(r.includes(",")||r.includes('"')||r.includes("\n")||r.includes("\r"))?`"${r.replace(/"/g,'""')}"`:r}function l(e,t){const r=URL.createObjectURL(e),n=document.createElement("a");n.href=r,n.download=t,n.style.display="none",document.body.appendChild(n),n.click(),document.body.removeChild(n),URL.revokeObjectURL(r)}function a(e){return e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&apos;")}class c extends i{name="export";get defaultConfig(){return{fileName:"export",includeHeaders:!0,onlyVisible:!0,onlySelected:!1}}isExportingFlag=!1;lastExportInfo=null;performExport(e,t){const r=this.config,n={format:e,fileName:t?.fileName??r.fileName??"export",includeHeaders:t?.includeHeaders??r.includeHeaders,processCell:t?.processCell,processHeader:t?.processHeader,columns:t?.columns,rowIndices:t?.rowIndices},i=function(e,t,r=!0){let n=e;if(r&&(n=n.filter(e=>!e.hidden&&!e.field.startsWith("__")&&!0!==e.meta?.utility)),t?.length){const e=new Set(t);n=n.filter(t=>e.has(t.field))}return n}(this.columns,t?.columns,r.onlyVisible);let c;if(t?.rowIndices)c=s(this.rows,t.rowIndices);else if(r.onlySelected){const e=this.getSelectionState();c=e?.selected?.size?s(this.rows,[...e.selected]):[...this.rows]}else c=[...this.rows];this.isExportingFlag=!0;let d=n.fileName;try{switch(e){case"csv":{const e=function(e,t,r,n={}){const i=n.delimiter??",",s=n.newline??"\n",l=[],a=n.bom?"\ufeff":"";if(!1!==r.includeHeaders){const e=t.map(e=>{const t=e.header||e.field;return o(r.processHeader?r.processHeader(t,e.field):t)});l.push(e.join(i))}for(const c of e){const e=t.map(e=>{let t=c[e.field];return r.processCell&&(t=r.processCell(t,e.field,c)),o(t)});l.push(e.join(i))}return a+l.join(s)}(c,i,n,{bom:!0});d=d.endsWith(".csv")?d:`${d}.csv`,function(e,t){l(new Blob([e],{type:"text/csv;charset=utf-8;"}),t)}(e,d);break}case"excel":{const e=function(e,t,r){let n='<?xml version="1.0" encoding="UTF-8"?>\n<?mso-application progid="Excel.Sheet"?>\n<Workbook xmlns="urn:schemas-microsoft-com:office:spreadsheet"\n  xmlns:ss="urn:schemas-microsoft-com:office:spreadsheet">\n<Worksheet ss:Name="Sheet1">\n<Table>';if(!1!==r.includeHeaders){n+="\n<Row>";for(const e of t){const t=e.header||e.field;n+=`<Cell><Data ss:Type="String">${a(r.processHeader?r.processHeader(t,e.field):t)}</Data></Cell>`}n+="</Row>"}for(const i of e){n+="\n<Row>";for(const e of t){let t=i[e.field];r.processCell&&(t=r.processCell(t,e.field,i));let s="String",o="";null==t?o="":"number"!=typeof t||isNaN(t)?t instanceof Date?(s="DateTime",o=t.toISOString()):o=a(String(t)):(s="Number",o=String(t)),n+=`<Cell><Data ss:Type="${s}">${o}</Data></Cell>`}n+="</Row>"}return n+="\n</Table>\n</Worksheet>\n</Workbook>",n}(c,i,n);d=d.endsWith(".xls")?d:`${d}.xls`,function(e,t){const r=t.endsWith(".xls")?t:`${t}.xls`;l(new Blob([e],{type:"application/vnd.ms-excel;charset=utf-8;"}),r)}(e,d);break}case"json":{const e=c.map(e=>{const t={};for(const r of i){let i=e[r.field];n.processCell&&(i=n.processCell(i,r.field,e)),t[r.field]=i}return t}),t=JSON.stringify(e,null,2);d=d.endsWith(".json")?d:`${d}.json`;l(new Blob([t],{type:"application/json"}),d);break}}this.lastExportInfo={format:e,timestamp:/* @__PURE__ */new Date},this.emit("export-complete",{format:e,fileName:d,rowCount:c.length,columnCount:i.length})}finally{this.isExportingFlag=!1}}getSelectionState(){try{return this.grid?.getPluginState?.("selection")??null}catch{return null}}exportCsv(e){this.performExport("csv",e)}exportExcel(e){this.performExport("excel",e)}exportJson(e){this.performExport("json",e)}isExporting(){return this.isExportingFlag}getLastExport(){return this.lastExportInfo}}export{c as ExportPlugin};
 //# sourceMappingURL=index.js.map