@lowdefy/blocks-aggrid 5.5.1 → 6.0.0

package/README.md

@@ -1,25 +1,62 @@
 # Lowdefy Blocks for Ag-Grid
 
-This repository provides blocks for [Ag-Grid](https://www.ag-grid.com/), a feature rich javascript grid and table library.
+This repository provides blocks for [AG Grid](https://www.ag-grid.com/), a feature rich javascript grid and table library.
 
-The implementation of these blocks is a minimal wrapper for the [@ag-grid-community/core
-](https://www.npmjs.com/package/@ag-grid-community/core) package. This means you write normal Ag-Grid config to create tables.
+The implementation of these blocks is a minimal wrapper for the [ag-grid-community](https://www.npmjs.com/package/ag-grid-community) package, on AG Grid v33. This means you write normal AG Grid config to create tables.
 
-See the [Ag-Grid docs](https://www.ag-grid.com/documentation/react/getting-started/) for the table settings API.
+See the [AG Grid docs](https://www.ag-grid.com/react-data-grid/) for the table settings API.
 
 ## Blocks
 
-Block types for supported [Ag-Grid themes](https://www.ag-grid.com/documentation/javascript/themes-provided/) are available for for `dispay` and `input` block categories.
+Each grid is available as a `display` block and as an `input` block. The display blocks render data; the input blocks additionally hold the table data as the block's value.
 
 ### Block types
 
-The availible ag-gird block types are:
+Display blocks:
 
-- [`AgGridAlpine`](https://www.ag-grid.com/example?theme=ag-theme-alpine)
-- [`AgGridAlpineDark`](https://www.ag-grid.com/example?theme=ag-theme-alpine-dark)
-- [`AgGridBalham`](https://www.ag-grid.com/example?theme=ag-theme-balham)
-- [`AgGridBalhamDark`](https://www.ag-grid.com/example?theme=ag-theme-balham-dark)
-- [`AgGridMaterial`](https://www.ag-grid.com/example?theme=ag-theme-material)
+- `AgGridLowdefy` — themed from the app's antd design tokens. Recommended for Lowdefy apps.
+- `AgGridAlpine`
+- `AgGridBalham`
+- `AgGridMaterial`
+
+Input blocks:
+
+- `AgGridLowdefyInput` — themed from the app's antd design tokens. Recommended for Lowdefy apps.
+- `AgGridInputAlpine`
+- `AgGridInputBalham`
+- `AgGridInputMaterial`
+
+## Themes
+
+All eight blocks render through [AG Grid's Theming API](https://www.ag-grid.com/react-data-grid/theming/). No block imports an AG Grid stylesheet and no block uses `theme="legacy"`.
+
+**`AgGridLowdefy` is the recommended grid for Lowdefy apps.** It adopts the app's antd theme tokens — primary colour, surfaces, fonts and radius — and follows light/dark mode automatically, with no configuration. It takes a `size` property (`small | middle | large`, default `middle`) matching antd Table's densities, which sets row and header height to 36 / 44 / 54 pixels.
+
+`AgGridBalham`, `AgGridAlpine` and `AgGridMaterial` remain first-class built-ins for users who want those looks, and are kept indefinitely with the same API. On v33 they render AG Grid's prebuilt Theming API equivalents of those themes (`themeBalham` / `themeAlpine` / `themeMaterial`) with the same antd colour mapping applied as theme parameters, so they look very close to before but are no longer pixel-identical.
+
+### Adopting `AgGridLowdefy`
+
+To adopt, change `type: AgGridBalham` to `type: AgGridLowdefy` (or `type: AgGridInputBalham` to `type: AgGridLowdefyInput`). Every property carries over unchanged, and the grid will deliberately look different afterwards — that is the point. This is a visual opt-in, not a migration.
+
+### `size` and explicit heights
+
+A `rowHeight` or `headerHeight` grid option overrides what `size` sets — use one or the other, not both. `size` sets the theme parameters `rowHeight` and `headerHeight`, and an AG Grid grid option always beats a theme parameter, so `size: large` together with `rowHeight: 30` gives 30 pixel rows under a 54 pixel header.
+
+### `themeParams`
+
+All eight blocks take a `themeParams` object property: [AG Grid theming parameter](https://www.ag-grid.com/react-data-grid/theming-parameters/) names merged onto the block's own theme, for retinting a single grid.
+
+```yaml
+- id: my_table
+  type: AgGridLowdefy
+  properties:
+    themeParams:
+      headerBackgroundColor: '#1a1a2e'
+      headerTextColor: '#e0e0ff'
+      borderColor: var(--ant-color-border)
+```
+
+Values are CSS strings and may reference antd tokens. Neither Lowdefy nor AG Grid validates parameter names, so a misspelled key is a silent no-op — check spelling against AG Grid's theming parameter reference.
 
 ### Events
 
@@ -72,9 +109,7 @@ The availible ag-gird block types are:
 
 - `exportDataAsCsv`: When called, table data will be downloaded in csv format.
 - `sizeColumnsToFit`: When called, size table column widths to fit all columns to table width.
-- `autoSize`: When called, auto size columns. The following can be passed as the first argument of `args`.
-      - `skipHeader: boolean`: Do not consider header content width when auto-sizing columns.
-      - `columnIds: string[]`: List of `colId`s for which to calculate auto-size when called.
+- `autoSize`: When called, auto size columns. The following can be passed as the first argument of `args`. - `skipHeader: boolean`: Do not consider header content width when auto-sizing columns. - `columnIds: string[]`: List of `colId`s for which to calculate auto-size when called.
 - `setFilterModel`: When called, apply filter model to table. See https://www.ag-grid.com/javascript-data-grid/filter-api/ for model details.
 - `setQuickFilter`: When called, pass a quick filter text into the grid for filtering. See https://www.ag-grid.com/javascript-data-grid/filter-quick/ for details.
 
@@ -299,12 +334,14 @@ pages:
             sortable: true
             resizable: true
             filter: true
-          rowSelection: 'multiple'
+          rowSelection:
+            mode: multiRow
+            enableClickSelection: true
+            checkboxes: true
           columnDefs:
             - headerName: Title
               field: title
               width: 350
-              checkboxSelection: true
             - headerName: Year
               field: year
               width: 100
@@ -379,13 +416,15 @@ pages:
             sortable: true
             resizable: true
             filter: true
-          rowSelection: 'multiple'
+          rowSelection:
+            mode: multiRow
+            enableClickSelection: true
+            checkboxes: true
+            headerCheckbox: true
           columnDefs:
             - headerName: Title
               field: title
               width: 350
-              checkboxSelection: true
-              headerCheckboxSelection: true
             - headerName: Year
               field: year
               width: 100

package/dist/AgGrid.js

@@ -13,22 +13,31 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 */ import React, { useState, useRef, useEffect, useMemo, useCallback } from 'react';
-import { AgGridReact } from '@ag-grid-community/react';
-import { ClientSideRowModelModule } from '@ag-grid-community/client-side-row-model';
-import { CsvExportModule } from '@ag-grid-community/csv-export';
-import processColDefs from './processColDefs.js';
+import { AgGridReact } from 'ag-grid-react';
+import { AllCommunityModule, ModuleRegistry } from 'ag-grid-community';
+import useColDefs from './useColDefs.js';
 import assignRowId from './assignRowId.js';
 import LoadingOverlay from './LoadingOverlay.js';
-const AgGrid = ({ properties, methods, loading, events, components })=>{
-    const { quickFilterValue, columnDefs, defaultColDef, rowData: newRowData, suppressCellFocus = true, ...someProperties } = properties;
+// Registration is idempotent, so each core registers independently to stay standalone.
+ModuleRegistry.registerModules([
+    AllCommunityModule
+]);
+const AgGrid = ({ components, events, loading, methods, properties, theme })=>{
+    const { quickFilterValue, columnDefs, defaultColDef, height, rowData: newRowData, rowId, size, suppressCellFocus = true, themeParams, ...someProperties } = properties;
     const [rowData, setRowData] = useState(newRowData ?? []);
     const gridRef = useRef();
     const memoDefaultColDef = useMemo(()=>defaultColDef);
+    const processedColDefs = useColDefs({
+        columnDefs,
+        methods,
+        components,
+        gridRef
+    });
     const getRowId = useCallback((params)=>{
-        if (properties.rowId && params.data[properties.rowId] !== undefined) return params.data[properties.rowId];
+        if (rowId && params.data[rowId] !== undefined) return params.data[rowId];
         return assignRowId(params);
     }, [
-        properties.rowId
+        rowId
     ]);
     const onRowClick = useCallback((event)=>{
         if (events.onRowClick) {
@@ -60,7 +69,9 @@ const AgGrid = ({ properties, methods, loading, events, components })=>{
         }
     }, []);
     const onRowSelected = useCallback((event)=>{
-        if (!event.node.selected) return; // see https://stackoverflow.com/a/63265775/2453657
+        // AG Grid fires onRowSelected for deselection too, which the Lowdefy event does not represent.
+        // See https://stackoverflow.com/a/63265775/2453657
+        if (!event.node.isSelected()) return;
         if (events.onRowSelected) {
             methods.triggerEvent({
                 name: 'onRowSelected',
@@ -144,6 +155,7 @@ const AgGrid = ({ properties, methods, loading, events, components })=>{
     }, /*#__PURE__*/ React.createElement(AgGridReact, {
         columnMenu: "legacy",
         ...someProperties,
+        theme: theme,
         suppressCellFocus: suppressCellFocus,
         rowData: rowData,
         defaultColDef: memoDefaultColDef,
@@ -153,11 +165,7 @@ const AgGrid = ({ properties, methods, loading, events, components })=>{
         onRowSelected: onRowSelected,
         onRowClicked: onRowClick,
         onCellClicked: onCellClicked,
-        modules: [
-            ClientSideRowModelModule,
-            CsvExportModule
-        ],
-        columnDefs: processColDefs(columnDefs, methods, components),
+        columnDefs: processedColDefs,
         ref: gridRef,
         getRowId: getRowId,
         suppressLoadingOverlay: true

package/dist/AgGridInput.js

@@ -13,22 +13,30 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 */ import React, { useState, useRef, useEffect, useMemo, useCallback } from 'react';
-import { AgGridReact } from '@ag-grid-community/react';
-import { ClientSideRowModelModule } from '@ag-grid-community/client-side-row-model';
-import { CsvExportModule } from '@ag-grid-community/csv-export';
-import processColDefs from './processColDefs.js';
+import { AgGridReact } from 'ag-grid-react';
+import { AllCommunityModule, ModuleRegistry } from 'ag-grid-community';
+import useColDefs from './useColDefs.js';
 import assignRowId from './assignRowId.js';
 import LoadingOverlay from './LoadingOverlay.js';
-const AgGridInput = ({ properties, methods, loading, events, value })=>{
-    const { quickFilterValue, columnDefs, defaultColDef, ...someProperties } = properties;
+// Registration is idempotent, so each core registers independently to stay standalone.
+ModuleRegistry.registerModules([
+    AllCommunityModule
+]);
+const AgGridInput = ({ events, loading, methods, properties, theme, value })=>{
+    const { quickFilterValue, columnDefs, defaultColDef, height, rowId, size, themeParams, ...someProperties } = properties;
     const [rowData, setRowData] = useState(value ?? []);
     const gridRef = useRef();
     const memoDefaultColDef = useMemo(()=>defaultColDef);
+    const processedColDefs = useColDefs({
+        columnDefs,
+        methods,
+        gridRef
+    });
     const getRowId = useCallback((params)=>{
-        if (properties.rowId && params.data[properties.rowId] !== undefined) return params.data[properties.rowId];
+        if (rowId && params.data[rowId] !== undefined) return params.data[rowId];
         return assignRowId(params);
     }, [
-        properties.rowId
+        rowId
     ]);
     const onRowClick = useCallback((event)=>{
         if (events.onRowClick) {
@@ -60,7 +68,9 @@ const AgGridInput = ({ properties, methods, loading, events, value })=>{
         }
     }, []);
     const onRowSelected = useCallback((event)=>{
-        if (!event.node.selected) return; // see https://stackoverflow.com/a/63265775/2453657
+        // AG Grid fires onRowSelected for deselection too, which the Lowdefy event does not represent.
+        // See https://stackoverflow.com/a/63265775/2453657
+        if (!event.node.isSelected()) return;
         if (events.onRowSelected) {
             methods.triggerEvent({
                 name: 'onRowSelected',
@@ -192,6 +202,7 @@ const AgGridInput = ({ properties, methods, loading, events, value })=>{
     }, /*#__PURE__*/ React.createElement(AgGridReact, {
         columnMenu: "legacy",
         ...someProperties,
+        theme: theme,
         rowData: rowData,
         onCellClicked: onCellClicked,
         onCellValueChanged: onCellValueChanged,
@@ -202,11 +213,7 @@ const AgGridInput = ({ properties, methods, loading, events, value })=>{
         onSortChanged: onSortChanged,
         onRowDragEnd: onRowDragEnd,
         defaultColDef: memoDefaultColDef,
-        modules: [
-            ClientSideRowModelModule,
-            CsvExportModule
-        ],
-        columnDefs: processColDefs(columnDefs, methods),
+        columnDefs: processedColDefs,
         ref: gridRef,
         getRowId: getRowId,
         suppressLoadingOverlay: true

package/dist/ag-grid-antd.module.css

@@ -1,44 +1,22 @@
-.antdTheme.antdTheme {
-  --ag-background-color: var(--ant-color-bg-container);
-  --ag-foreground-color: var(--ant-color-text);
-  --ag-secondary-foreground-color: var(--ant-color-text-secondary);
-  --ag-border-color: var(--ant-color-border);
-  --ag-secondary-border-color: var(--ant-color-border-secondary);
-  --ag-header-background-color: var(--ant-color-fill-quaternary);
-  --ag-header-foreground-color: var(--ant-color-text);
-  --ag-header-cell-hover-background-color: var(--ant-color-fill-tertiary);
-  --ag-header-cell-moving-background-color: var(--ant-color-fill-secondary);
-  --ag-tooltip-background-color: var(--ant-color-bg-spotlight);
-  --ag-odd-row-background-color: var(--ant-color-fill-quaternary);
-  --ag-control-panel-background-color: var(--ant-color-bg-elevated);
-  --ag-subheader-background-color: var(--ant-color-bg-layout);
-  --ag-subheader-toolbar-background-color: var(--ant-color-bg-layout);
-  --ag-selected-row-background-color: var(--ant-color-primary-bg);
-  --ag-row-hover-color: var(--ant-color-primary-bg-hover);
-  --ag-column-hover-color: var(--ant-color-primary-bg-hover);
-  --ag-range-selection-highlight-color: var(--ant-color-primary-bg-hover);
-  --ag-modal-overlay-background-color: var(--ant-color-bg-mask);
-  --ag-input-disabled-background-color: var(--ant-color-bg-container-disabled);
-  --ag-input-disabled-border-color: var(--ant-color-border);
-  --ag-disabled-foreground-color: var(--ant-color-text-disabled);
-  --ag-chip-background-color: var(--ant-color-fill-secondary);
-  --ag-input-focus-box-shadow: 0 0 0 2px var(--ant-color-primary-bg);
-  --ag-input-focus-border-color: var(--ant-color-primary);
-  --ag-range-selection-border-color: var(--ant-color-primary);
-  --ag-range-selection-background-color: var(--ant-color-primary-bg);
-  --ag-checkbox-checked-color: var(--ant-color-primary);
-  --ag-checkbox-unchecked-color: var(--ant-color-text-quaternary);
-  --ag-checkbox-background-color: var(--ant-color-bg-container);
-  --ag-card-shadow: var(--ant-box-shadow-secondary);
-  --ag-popup-shadow: var(--ant-box-shadow);
-  --ag-font-family: var(--ant-font-family);
-  --ag-font-size: var(--ant-font-size);
-}
+/*
+  Copyright 2020-2026 Lowdefy, Inc
 
-.antdTheme :global(.ag-root-wrapper) {
-  border-radius: var(--ant-border-radius);
-  overflow: hidden;
-}
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/
+
+/* Lowdefy's own cell-rendering and layout helpers for all AgGrid blocks. Colours come from the
+   theme params in src/theme/themeLowdefy.js, not from this file: the Theming API honours AG Grid
+   custom properties inherited from an ancestor, so declaring any here would override those params. */
 
 /* Avatar sizing per ag-grid theme — reads row-height via the wrapper class. */
 .antdTheme:global(.ag-theme-balham),
@@ -56,15 +34,6 @@
   --lf-avatar-font-size: var(--ant-font-size-sm, 12px);
 }
 
-.antdTheme :global(.ag-overlay-loading-wrapper) {
-  background-color: color-mix(in srgb, var(--ant-color-bg-container) 70%, transparent);
-}
-
-.antdTheme :global(.ag-overlay-loading-center) {
-  border-radius: var(--ant-border-radius);
-  box-shadow: var(--ant-box-shadow-secondary);
-}
-
 .antdTheme :global(.ag-overlay-no-rows-wrapper) {
   color: var(--ant-color-text-secondary);
 }

package/dist/blocks/AgGridAlpine/AgGridAlpine.js

@@ -14,11 +14,11 @@
   limitations under the License.
 */ import React from 'react';
 import { withBlockDefaults } from '@lowdefy/block-utils';
-import '@ag-grid-community/styles/ag-grid.css';
-import '@ag-grid-community/styles/ag-theme-alpine.css';
 import antdStyles from '../../ag-grid-antd.module.css';
+import { themeAlpineAntd, useGridTheme } from '../../theme/themeLowdefy.js';
 import AgGrid from '../../AgGrid.js';
 const AgGridAlpine = ({ blockId, components, events, loading, methods, properties, styles })=>{
+    const theme = useGridTheme(themeAlpineAntd, properties.themeParams);
     return /*#__PURE__*/ React.createElement("div", {
         id: blockId,
         className: `ag-theme-alpine ${antdStyles.antdTheme}`,
@@ -32,7 +32,8 @@ const AgGridAlpine = ({ blockId, components, events, loading, methods, propertie
         events: events,
         loading: loading,
         methods: methods,
-        properties: properties
+        properties: properties,
+        theme: theme
     }));
 };
 export default withBlockDefaults(AgGridAlpine);

package/dist/blocks/AgGridAlpine/e2e.js

@@ -13,4 +13,4 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 */ import createAgGridDisplayHelper from '../../createAgGridDisplayHelper.js';
-export default createAgGridDisplayHelper('alpine');
+export default createAgGridDisplayHelper();