diff --git a/packages/plugins/blocks/blocks-aggrid/README.md b/packages/plugins/blocks/blocks-aggrid/README.md
new file mode 100644
index 0000000000..81470000ab
--- /dev/null
+++ b/packages/plugins/blocks/blocks-aggrid/README.md
@@ -0,0 +1,565 @@
+# 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.
+
+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.
+
+See the [Ag-Grid docs](https://www.ag-grid.com/documentation/react/getting-started/) 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.
+
+### Block type Urls
+
+The block types are hosted at:
+
+- `AgGridAlpine`: https://blocks-cdn.lowdefy.com/v3.12.3/blocks-aggrid/meta/AgGridAlpine.json
+- `AgGridAlpineDark`: https://blocks-cdn.lowdefy.com/v3.12.3/blocks-aggrid/meta/AgGridAlpineDark.json
+- `AgGridBalham`: https://blocks-cdn.lowdefy.com/v3.12.3/blocks-aggrid/meta/AgGridBalham.json
+- `AgGridBalhamDark`: https://blocks-cdn.lowdefy.com/v3.12.3/blocks-aggrid/meta/AgGridBalhamDark.json
+- `AgGridMaterial`: https://blocks-cdn.lowdefy.com/v3.12.3/blocks-aggrid/meta/AgGridMaterial.json
+- `AgGridInputAlpine`: https://blocks-cdn.lowdefy.com/v3.12.3/blocks-aggrid/meta/AgGridInputAlpine.json
+- `AgGridInputAlpineDark`: https://blocks-cdn.lowdefy.com/v3.12.3/blocks-aggrid/meta/AgGridInputAlpineDark.json
+- `AgGridInputBalham`: https://blocks-cdn.lowdefy.com/v3.12.3/blocks-aggrid/meta/AgGridInputBalham.json
+- `AgGridInputBalhamDark`: https://blocks-cdn.lowdefy.com/v3.12.3/blocks-aggrid/meta/AgGridInputBalhamDark.json
+- `AgGridInputMaterial`: https://blocks-cdn.lowdefy.com/v3.12.3/blocks-aggrid/meta/AgGridInputMaterial.json
+
+### Events
+
+##### All Blocks
+
+- `onCellClick`: Trigger event when a cell is clicked and pass the following to `_event`:
+  - `cell: object`: Cell data object.
+  - `colId: string`: Column id of the clicked cell.
+  - `index: number`: Data index of the clicked row as per provided data array.
+  - `row: object`: Row data object.
+  - `rowIndex: number`: List index of the clicked row, changes with data sorting or filtering.
+  - `selected: object[]`: List of selected row objects.
+- `onFilterChanged`: Trigger event when the filter changes and pass the following to `_event`:
+  - `rows: object[]`: List of row objects matched by the filter.
+- `onRowClick`: Trigger event when a row is clicked and pass the following to `_event`:
+  - `index: number`: Data index of the clicked row as per provided data array.
+  - `row: object`: Row data object.
+  - `rowIndex: number`: List index of the clicked row, changes with data sorting or filtering.
+  - `selected: object[]`: List of selected row objects.
+- `onRowSelected`: Trigger event when a row is selected and pass the following to `_event`:
+  - `index: number`: Data index of the clicked row as per provided data array.
+  - `row: object`: Row data object.
+  - `rowIndex: number`: List index of the clicked row, changes with data sorting or filtering.
+  - `selected: object[]`: List of selected row objects.
+- `onSelectionChanged`: Triggered when the selected rows is changed and pass the following to `_event`:
+  - `selected: object[]`: List of selected row objects.
+
+##### Input Blocks
+
+- `onCellValueChanged`: Triggered when a cell value is changed on the grid. The following is passed to the action `_event`:
+  - `field: string`: The field name of the changed cell.
+  - `index: number`: Data index of the clicked row as per provided data array.
+  - `newRowData: object[]`: The table data with the change applied.
+  - `newValue: any`: The updated cell value.
+  - `oldValue: any`: The cell value before the update was made.
+  - `rowData: object`: The row data after the cell value has been changed.
+  - `rowIndex: number`: List index of the clicked row, changes with data sorting or filtering.
+- `onRowDragEnd`: Triggered when a row is dragged to another position in the grid. The following is passed to the action `_event`:
+  - `fromData: object`: Row data of the row selection which to moved.
+  - `fromIndex: number`: Array index of the row selection which to moved.
+  - `newRowData: object[]`: The table data with the change applied.
+  - `toData: object`: Row data of the row to which the selection will be moved.
+  - `toIndex: number`: Array index of the row to which the selection will be moved.
+
+### Methods
+
+- `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.
+- `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.
+
+### AgGridAlpine Example
+
+```yaml
+name: my-app
+lowdefy: 3.12.3
+types:
+  AgGridAlpine:
+    url: https://blocks-cdn.lowdefy.com/v3.12.3/blocks-aggrid/meta/AgGridAlpine.json
+pages:
+  - id: dashboard
+    type: PageHeaderMenu
+    blocks:
+      - id: my_table
+        type: AgGridAlpine
+        properties:
+          rowData:
+            - title: One
+              year: 2010
+              viewerReviews: 30
+            - title: Two
+              year: 2011
+              viewerReviews: 20
+          defaultColDef:
+            sortable: true
+            resizable: true
+            filter: true
+          columnDefs:
+            - headerName: Title
+              field: title
+              width: 350
+            - headerName: Year
+              field: year
+              width: 100
+            - headerName: Viewer Reviews
+              field: viewerReviews
+              width: 160
+              type: numericColumn
+```
+
+### AgGridAlpine valueFormatter: \_function Example
+
+```yaml
+name: my-app
+lowdefy: 3.12.3
+types:
+  AgGridAlpine:
+    url: https://blocks-cdn.lowdefy.com/v3.12.3/blocks-aggrid/meta/AgGridAlpine.json
+pages:
+  - id: dashboard
+    type: PageHeaderMenu
+    blocks:
+      - id: my_table
+        type: AgGridAlpine
+        properties:
+          rowData:
+            - title: One
+              year: 2010
+              total: 300.21
+            - title: Two
+              year: 2011
+              total: 1230.9495
+          defaultColDef:
+            sortable: true
+            resizable: true
+            filter: true
+          columnDefs:
+            - headerName: Title
+              field: title
+              width: 350
+            - headerName: Year
+              field: year
+              width: 100
+            - headerName: Total
+              field: total
+              width: 160
+              type: numericColumn
+              valueFormatter:
+                _function:
+                  __format.intlNumberFormat:
+                    on:
+                      __args: 0.value
+                    params:
+                      options:
+                        style: 'currency'
+                        currency: 'EUR'
+```
+
+### AgGridAlpine onRowClick Example
+
+```yaml
+name: my-app
+lowdefy: 3.12.3
+types:
+  AgGridAlpine:
+    url: https://blocks-cdn.lowdefy.com/v3.12.3/blocks-aggrid/meta/AgGridAlpine.json
+pages:
+  - id: dashboard
+    type: PageHeaderMenu
+    blocks:
+      - id: my_table
+        type: AgGridAlpine
+        properties:
+          rowData:
+            - title: One
+              year: 2010
+              viewerReviews: 30
+            - title: Two
+              year: 2011
+              viewerReviews: 20
+          defaultColDef:
+            sortable: true
+            resizable: true
+            filter: true
+          columnDefs:
+            - headerName: Title
+              field: title
+              width: 350
+            - headerName: Year
+              field: year
+              width: 100
+            - headerName: Viewer Reviews
+              field: viewerReviews
+              width: 160
+              type: numericColumn
+        events:
+          onRowClick:
+            - id: set_selected
+              type: SetState
+              params:
+                selected_row: # Update 'selected' in state with the event data.
+                  _event: row
+      - id: selection
+        type: Title
+        properties:
+          level: 4
+          content:
+            _if: # Show the event data in a title, or call to action.
+              test:
+                _eq:
+                  - _state: selected_row
+                  - null
+              then: 'Click to select a row.'
+              else:
+                _string.concat:
+                  - 'Title: '
+                  - _state: selected_row.title
+                  - ', Year: '
+                  - _state: selected_row.year
+```
+
+### AgGridAlpine onCellClick Example
+
+```yaml
+name: my-app
+lowdefy: 3.12.3
+types:
+  AgGridAlpine:
+    url: https://blocks-cdn.lowdefy.com/v3.12.3/blocks-aggrid/meta/AgGridAlpine.json
+pages:
+  - id: dashboard
+    type: PageHeaderMenu
+    blocks:
+      - id: my_table
+        type: AgGridAlpine
+        properties:
+          rowData:
+            - title: One
+              year: 2010
+              viewerReviews: 30
+            - title: Two
+              year: 2011
+              viewerReviews: 20
+          defaultColDef:
+            sortable: true
+            resizable: true
+            filter: true
+          columnDefs:
+            - headerName: Title
+              field: title
+              width: 350
+            - headerName: Year
+              field: year
+              width: 100
+            - headerName: Viewer Reviews
+              field: viewerReviews
+              width: 160
+              type: numericColumn
+        events:
+          onCellClick:
+            - id: set_selected
+              type: SetState
+              params:
+                selected_cell: # Update 'selected_cell' in state with the event cell data.
+                  _event: cell
+      - id: selection
+        type: Title
+        properties:
+          level: 4
+          content:
+            _if: # Show the event data in a title, or call to action.
+              test:
+                _eq:
+                  - _state: selected_cell.column
+                  - title
+              then:
+                _string.concat:
+                  - 'Title: '
+                  - _state: selected_cell.value
+              else: 'Select a movie title.'
+```
+
+### AgGridAlpine onRowSelected Example
+
+```yaml
+name: my-app
+lowdefy: 3.12.3
+types:
+  AgGridAlpine:
+    url: https://blocks-cdn.lowdefy.com/v3.12.3/blocks-aggrid/meta/AgGridAlpine.json
+pages:
+  - id: dashboard
+    type: PageHeaderMenu
+    blocks:
+      - id: my_table
+        type: AgGridAlpine
+        properties:
+          rowData:
+            - title: One
+              year: 2010
+              viewerReviews: 30
+            - title: Two
+              year: 2011
+              viewerReviews: 20
+          defaultColDef:
+            sortable: true
+            resizable: true
+            filter: true
+          rowSelection: 'multiple'
+          columnDefs:
+            - headerName: Title
+              field: title
+              width: 350
+              checkboxSelection: true
+            - headerName: Year
+              field: year
+              width: 100
+            - headerName: Viewer Reviews
+              field: viewerReviews
+              width: 160
+              type: numericColumn
+        events:
+          onRowSelected:
+            - id: set_selected
+              type: SetState
+              params:
+                selected_row: # Update 'selected' in state with the event data.
+                  _event: row
+                all_selected:
+                  _event: selected
+      - id: selection
+        type: Title
+        properties:
+          level: 4
+          content:
+            _if: # Show the event data in a title, or call to action.
+              test:
+                _eq:
+                  - _state: selected_row
+                  - null
+              then: 'Click to select a row.'
+              else:
+                _string.concat:
+                  - 'Last Selected - Title: '
+                  - _state: selected_row.title
+                  - ', Year: '
+                  - _state: selected_row.year
+      - id: all_selected
+        type: Title
+        properties:
+          level: 4
+          content:
+            _if: # Show the event data in a title, or call to action.
+              test:
+                _eq:
+                  - _state: all_selected
+                  - null
+              then: 'Select rows.'
+              else:
+                _string.concat:
+                  - 'Total Selected: '
+                  - _array.length:
+                      _state: all_selected
+```
+
+### AgGridAlpine onSelectionChanged Example
+
+```yaml
+name: my-app
+lowdefy: 3.12.3
+types:
+  AgGridAlpine:
+    url: https://blocks-cdn.lowdefy.com/v3.12.3/blocks-aggrid/meta/AgGridAlpine.json
+pages:
+  - id: dashboard
+    type: PageHeaderMenu
+    blocks:
+      - id: my_table
+        type: AgGridAlpine
+        properties:
+          rowData:
+            - title: One
+              year: 2010
+              viewerReviews: 30
+            - title: Two
+              year: 2011
+              viewerReviews: 20
+          defaultColDef:
+            sortable: true
+            resizable: true
+            filter: true
+          rowSelection: 'multiple'
+          columnDefs:
+            - headerName: Title
+              field: title
+              width: 350
+              checkboxSelection: true
+              headerCheckboxSelection: true
+            - headerName: Year
+              field: year
+              width: 100
+            - headerName: Viewer Reviews
+              field: viewerReviews
+              width: 160
+              type: numericColumn
+        events:
+          onSelectionChanged:
+            - id: set_selected
+              type: SetState
+              params:
+                all_selected:
+                  _event: selected
+      - id: all_selected
+        type: Title
+        properties:
+          level: 4
+          content:
+            _if: # Show the event data in a title, or call to action.
+              test:
+                _eq:
+                  - _state: all_selected
+                  - null
+              then: 'Select rows.'
+              else:
+                _string.concat:
+                  - 'Total Selected: '
+                  - _array.length:
+                      _state: all_selected
+```
+
+### AgGridAlpine editable cells Example
+
+```yaml
+name: my-app
+lowdefy: 3.12.3
+types:
+  AgGridAlpine:
+    url: https://blocks-cdn.lowdefy.com/v3.12.3/blocks-aggrid/meta/AgGridAlpine.json
+pages:
+  - id: dashboard
+    type: PageHeaderMenu
+    blocks:
+      - id: Download
+        type: Button
+        events:
+          onClick:
+            - id: download
+              type: CallMethod
+              params:
+                blockId: table
+                method: exportDataAsCsv
+      - id: table
+        type: AgGridAlpine
+        properties:
+          rowData:
+            - a: zero
+              b: 000
+              c: AA
+            - a: one
+              b: 111
+              c: BB
+            - a: two
+              b: 222
+              c: CC
+          columnDefs:
+            - field: 'a'
+            - field: 'b'
+            - field: 'c'
+```
+
+### AgGridInputAlpine onRowDragMove Example
+
+```yaml
+name: my-app
+lowdefy: 3.12.3
+types:
+  AgGridInputAlpine:
+    url: https://blocks-cdn.lowdefy.com/v3.12.3/blocks-aggrid/meta/AgGridInputAlpine.json
+pages:
+  - id: dashboard
+    type: PageHeaderMenu
+    events:
+      onInit:
+        - id: new
+          type: SetState
+          params:
+            table:
+              - a: zero
+                b: 000
+                c: AA
+              - a: one
+                b: 111
+                c: BB
+              - a: two
+                b: 222
+                c: CC
+    blocks:
+      - id: table
+        type: AgGridInputAlpine
+        properties:
+          columnDefs:
+            - field: 'a'
+              rowDrag: true
+            - field: 'b'
+            - field: 'c'
+            - field: 'd'
+          defaultColDef:
+            width: 170
+            sortable: true
+            filter: true
+```
+
+### AgGridInputAlpine editable cells Example
+
+```yaml
+name: my-app
+lowdefy: 3.12.3
+types:
+  AgGridInputAlpine:
+    url: https://blocks-cdn.lowdefy.com/v3.12.3/blocks-aggrid/meta/AgGridInputAlpine.json
+pages:
+  - id: dashboard
+    type: PageHeaderMenu
+    events:
+      onInit:
+        - id: new
+          type: SetState
+          params:
+            table:
+              - a: zero
+                b: 000
+                c: AA
+              - a: one
+                b: 111
+                c: BB
+              - a: two
+                b: 222
+                c: CC
+    blocks:
+      - id: table
+        type: AgGridInputAlpine
+        properties:
+          columnDefs:
+            - field: 'a'
+            - field: 'b'
+            - field: 'c'
+              cellEditor: 'agSelectCellEditor'
+              cellEditorParams:
+                values: ['AA', 'BB', 'CC', 'DD']
+          defaultColDef:
+            width: 170
+            sortable: true
+            filter: true
+            editable: true
+```
diff --git a/packages/plugins/blocks/blocks-aggrid/jest.config.js b/packages/plugins/blocks/blocks-aggrid/jest.config.js
new file mode 100644
index 0000000000..1d420db3be
--- /dev/null
+++ b/packages/plugins/blocks/blocks-aggrid/jest.config.js
@@ -0,0 +1,22 @@
+export default {
+  clearMocks: true,
+  collectCoverage: true,
+  collectCoverageFrom: ['src/**/*.js'],
+  coverageDirectory: 'coverage',
+  coveragePathIgnorePatterns: [
+    '<rootDir>/dist/',
+    '<rootDir>/src/test',
+    '<rootDir>/src/index.js',
+    '<rootDir>/src/blocks.js',
+    '<rootDir>/src/types.js',
+  ],
+  coverageReporters: [['lcov', { projectRoot: '../../../..' }], 'text', 'clover'],
+  errorOnDeprecated: true,
+  testEnvironment: 'jsdom',
+  testPathIgnorePatterns: ['<rootDir>/dist/', '<rootDir>/src/test'],
+  transform: {
+    '^.+\\.(t|j)sx?$': ['@swc/jest', { configFile: '../../../../.swcrc.test' }],
+    '\\.yaml$': '@lowdefy/jest-yaml-transform',
+  },
+  snapshotSerializers: ['@emotion/jest/serializer', 'jest-serializer-html'],
+};
diff --git a/packages/plugins/blocks/blocks-aggrid/package.json b/packages/plugins/blocks/blocks-aggrid/package.json
new file mode 100644
index 0000000000..eba8a0554d
--- /dev/null
+++ b/packages/plugins/blocks/blocks-aggrid/package.json
@@ -0,0 +1,79 @@
+{
+  "name": "@lowdefy/blocks-aggrid",
+  "version": "4.0.0-alpha.12",
+  "license": "Apache-2.0",
+  "description": "AgGrid Blocks for Lowdefy.",
+  "homepage": "https://lowdefy.com",
+  "keywords": [
+    "lowdefy",
+    "lowdefy blocks",
+    "aggrid",
+    "table",
+    "lowdefy plugin"
+  ],
+  "bugs": {
+    "url": "https://github.com/lowdefy/lowdefy/issues"
+  },
+  "contributors": [
+    {
+      "name": "Gerrie van Wyk",
+      "url": "https://github.com/Gervwyk"
+    },
+    {
+      "name": "Johann Möller",
+      "url": "https://github.com/JohannMoller"
+    },
+    {
+      "name": "Sam Tolmay",
+      "url": "https://github.com/SamTolmay"
+    }
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/lowdefy/lowdefy.git"
+  },
+  "type": "module",
+  "exports": {
+    "./*": "./dist/*",
+    "./blocks": "./dist/blocks.js",
+    "./types": "./dist/types.js"
+  },
+  "files": [
+    "dist/*"
+  ],
+  "scripts": {
+    "build": "yarn swc",
+    "clean": "rm -rf dist",
+    "copyfiles": "copyfiles -u 1 \"./src/**/*\" dist -e \"./src/**/*.js\" -e \"./src/**/*.yaml\" -e \"./src/**/*.snap\"",
+    "prepare": "yarn build",
+    "swc": "swc src --out-dir dist --config-file ../../../../.swcrc --delete-dir-on-start && yarn copyfiles",
+    "test:watch": "jest --coverage --watch",
+    "test": "jest --coverage"
+  },
+  "dependencies": {
+    "@ag-grid-community/all-modules": "27.3.0",
+    "@ag-grid-community/core": "27.3.0",
+    "@ag-grid-community/react": "27.3.0",
+    "@lowdefy/block-utils": "4.0.0-alpha.12",
+    "react": "18.1.0",
+    "react-dom": "18.1.0"
+  },
+  "devDependencies": {
+    "@emotion/jest": "11.9.1",
+    "@lowdefy/block-dev": "4.0.0-alpha.12",
+    "@lowdefy/jest-yaml-transform": "4.0.0-alpha.12",
+    "@swc/cli": "0.1.57",
+    "@swc/core": "1.2.194",
+    "@swc/jest": "0.2.21",
+    "@testing-library/dom": "8.13.0",
+    "@testing-library/react": "13.3.0",
+    "@testing-library/user-event": "14.2.0",
+    "copyfiles": "2.4.1",
+    "jest": "28.1.0",
+    "jest-environment-jsdom": "28.1.0",
+    "jest-serializer-html": "7.1.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}
diff --git a/packages/plugins/blocks/blocks-aggrid/src/AgGrid.js b/packages/plugins/blocks/blocks-aggrid/src/AgGrid.js
new file mode 100644
index 0000000000..b08bd44bb2
--- /dev/null
+++ b/packages/plugins/blocks/blocks-aggrid/src/AgGrid.js
@@ -0,0 +1,143 @@
+/*
+  Copyright 2021 Lowdefy, Inc
+
+  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.
+*/
+
+import React from 'react';
+
+import { AgGridReact } from '@ag-grid-community/react';
+import { AllCommunityModules } from '@ag-grid-community/all-modules';
+
+class AgGrid extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.onGridReady = this.onGridReady.bind(this);
+    this.onRowClick = this.onRowClick.bind(this);
+    this.onCellClicked = this.onCellClicked.bind(this);
+    this.onRowSelected = this.onRowSelected.bind(this);
+    this.onSelectionChanged = this.onSelectionChanged.bind(this);
+    this.onFilterChanged = this.onFilterChanged.bind(this);
+  }
+
+  // see https://stackoverflow.com/questions/55182118/ag-grid-resize-detail-height-when-data-changes
+  componentDidUpdate() {
+    if (this.gridApi) {
+      this.gridApi.resetRowHeights();
+    }
+  }
+
+  onGridReady(params) {
+    this.gridApi = params.api;
+    this.gridColumnApi = params.columnApi;
+    this.props.methods.registerMethod('exportDataAsCsv', (args) =>
+      this.gridApi.exportDataAsCsv(args)
+    );
+    this.props.methods.registerMethod('sizeColumnsToFit', () => this.gridApi.sizeColumnsToFit());
+    this.props.methods.registerMethod('setFilterModel', (model) =>
+      this.gridApi.setFilterModel(model)
+    );
+    this.props.methods.registerMethod('setQuickFilter', (value) =>
+      this.gridApi.setQuickFilter(value)
+    );
+    this.props.methods.registerMethod('autoSize', (args = {}) => {
+      const { skipHeader, colIds } = args;
+      const allColumnIds = colIds || [];
+      if (!colIds) {
+        this.gridColumnApi.getAllColumns().forEach((column) => {
+          allColumnIds.push(column.getId());
+        });
+      }
+      this.gridColumnApi.autoSizeColumns(allColumnIds, skipHeader);
+    });
+  }
+
+  onRowClick(event) {
+    if (this.props.events.onRowClick) {
+      this.props.methods.triggerEvent({
+        event: { row: event.data, selected: this.gridApi.getSelectedRows() },
+        index: parseInt(event.node.id),
+        name: 'onRowClick',
+        rowIndex: event.rowIndex,
+      });
+    }
+  }
+
+  onCellClicked(event) {
+    if (this.props.events.onCellClick) {
+      this.props.methods.triggerEvent({
+        name: 'onCellClick',
+        event: {
+          cell: { column: event.colDef.field, value: event.value },
+          colId: event.column.colId,
+          index: parseInt(event.node.id),
+          row: event.data,
+          rowIndex: event.rowIndex,
+          selected: this.gridApi.getSelectedRows(),
+        },
+      });
+    }
+  }
+
+  onRowSelected(event) {
+    if (!event.node.selected) return; // see https://stackoverflow.com/a/63265775/2453657
+    if (this.props.events.onRowSelected) {
+      this.props.methods.triggerEvent({
+        event: { row: event.data, selected: this.gridApi.getSelectedRows() },
+        index: parseInt(event.node.id),
+        name: 'onRowSelected',
+        rowIndex: event.rowIndex,
+      });
+    }
+  }
+
+  onSelectionChanged() {
+    if (this.props.events.onSelectionChanged) {
+      this.props.methods.triggerEvent({
+        name: 'onSelectionChanged',
+        event: { selected: this.gridApi.getSelectedRows() },
+      });
+    }
+  }
+
+  onFilterChanged(event) {
+    if (this.props.events.onFilterChanged) {
+      this.props.methods.triggerEvent({
+        name: 'onFilterChanged',
+        event: { rows: event.api.rowModel.rowsToDisplay.map((row) => row.data) },
+      });
+    }
+  }
+
+  render() {
+    const { quickFilterValue, ...someProperties } = this.props.properties;
+    if (quickFilterValue && quickFilterValue === '') {
+      this.gridApi.setQuickFilter(quickFilterValue); // check if empty string matches all
+    }
+    return (
+      <AgGridReact
+        onFilterChanged={this.onFilterChanged}
+        onSelectionChanged={this.onSelectionChanged}
+        onRowSelected={this.onRowSelected}
+        onRowClicked={this.onRowClick}
+        onCellClicked={this.onCellClicked}
+        onGridReady={this.onGridReady}
+        modules={AllCommunityModules}
+        {...someProperties}
+      />
+    );
+  }
+}
+
+export default AgGrid;
diff --git a/packages/plugins/blocks/blocks-aggrid/src/AgGridInput.js b/packages/plugins/blocks/blocks-aggrid/src/AgGridInput.js
new file mode 100644
index 0000000000..4a951cda54
--- /dev/null
+++ b/packages/plugins/blocks/blocks-aggrid/src/AgGridInput.js
@@ -0,0 +1,195 @@
+/*
+  Copyright 2021 Lowdefy, Inc
+
+  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.
+*/
+
+import React from 'react';
+
+import { AgGridReact } from '@ag-grid-community/react';
+import { AllCommunityModules } from '@ag-grid-community/all-modules';
+
+class AgGridInput extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.onGridReady = this.onGridReady.bind(this);
+    this.onRowClick = this.onRowClick.bind(this);
+    this.onCellClicked = this.onCellClicked.bind(this);
+    this.onRowSelected = this.onRowSelected.bind(this);
+    this.onSelectionChanged = this.onSelectionChanged.bind(this);
+    this.onRowDragEnd = this.onRowDragEnd.bind(this);
+    this.onCellValueChanged = this.onCellValueChanged.bind(this);
+    this.onFilterChanged = this.onFilterChanged.bind(this);
+  }
+
+  // see https://stackoverflow.com/questions/55182118/ag-grid-resize-detail-height-when-data-changes
+  componentDidUpdate() {
+    if (this.gridApi) {
+      this.gridApi.resetRowHeights();
+    }
+  }
+
+  onGridReady(params) {
+    this.gridApi = params.api;
+    this.gridColumnApi = params.columnApi;
+    this.props.methods.registerMethod('exportDataAsCsv', (args) =>
+      this.gridApi.exportDataAsCsv(args)
+    );
+    this.props.methods.registerMethod('sizeColumnsToFit', () => this.gridApi.sizeColumnsToFit());
+    this.props.methods.registerMethod('setFilterModel', (model) =>
+      this.gridApi.setFilterModel(model)
+    );
+    this.props.methods.registerMethod('setQuickFilter', (value) =>
+      this.gridApi.setQuickFilter(value)
+    );
+    this.props.methods.registerMethod('autoSize', (args = {}) => {
+      const { skipHeader, colIds } = args;
+      const allColumnIds = colIds || [];
+      if (!colIds) {
+        this.gridColumnApi.getAllColumns().forEach((column) => {
+          allColumnIds.push(column.getId());
+        });
+      }
+      this.gridColumnApi.autoSizeColumns(allColumnIds, skipHeader);
+    });
+  }
+
+  onRowClick(event) {
+    if (this.props.events.onRowClick) {
+      this.props.methods.triggerEvent({
+        name: 'onRowClick',
+        event: {
+          row: event.data,
+          selected: this.gridApi.getSelectedRows(),
+          rowIndex: event.rowIndex,
+          index: parseInt(event.node.id),
+        },
+      });
+    }
+  }
+
+  onCellClicked(event) {
+    if (this.props.events.onCellClick) {
+      this.props.methods.triggerEvent({
+        name: 'onCellClick',
+        event: {
+          cell: { column: event.colDef.field, value: event.value },
+          colId: event.column.colId,
+          index: parseInt(event.node.id),
+          row: event.data,
+          rowIndex: event.rowIndex,
+          selected: this.gridApi.getSelectedRows(),
+        },
+      });
+    }
+  }
+
+  onRowSelected(event) {
+    if (!event.node.selected) return; // see https://stackoverflow.com/a/63265775/2453657
+    if (this.props.events.onRowSelected) {
+      this.props.methods.triggerEvent({
+        event: { row: event.data, selected: this.gridApi.getSelectedRows() },
+        index: parseInt(event.node.id),
+        name: 'onRowSelected',
+        rowIndex: event.rowIndex,
+      });
+    }
+  }
+
+  onSelectionChanged() {
+    if (this.props.events.onSelectionChanged) {
+      this.props.methods.triggerEvent({
+        name: 'onSelectionChanged',
+        event: { selected: this.gridApi.getSelectedRows() },
+      });
+    }
+  }
+
+  onFilterChanged(event) {
+    if (this.props.events.onFilterChanged) {
+      this.props.methods.triggerEvent({
+        name: 'onFilterChanged',
+        event: { rows: event.api.rowModel.rowsToDisplay.map((row) => row.data) },
+      });
+    }
+  }
+
+  onRowDragEnd(event) {
+    if (event.overNode !== event.node) {
+      const fromData = event.node.data;
+      const toData = event.overNode.data;
+      const fromIndex = this.props.value.indexOf(fromData);
+      const toIndex = this.props.value.indexOf(toData);
+      const newRowData = this.props.value.slice();
+      const element = newRowData[fromIndex];
+      newRowData.splice(fromIndex, 1);
+      newRowData.splice(toIndex, 0, element);
+      this.props.methods.setValue(newRowData);
+      this.gridApi.setRowData(this.props.value);
+      this.gridApi.clearFocusedCell();
+      this.props.methods.triggerEvent({
+        name: 'onRowDragEnd',
+        event: {
+          fromData,
+          toData,
+          fromIndex,
+          toIndex,
+          newRowData,
+        },
+      });
+    }
+  }
+
+  onCellValueChanged(params) {
+    const newRowData = this.props.value;
+    newRowData[parseInt(params.node.id)][params.colDef.field] = params.newValue;
+    this.props.methods.setValue(newRowData);
+    this.props.methods.triggerEvent({
+      name: 'onCellValueChanged',
+      event: {
+        field: params.colDef.field,
+        index: parseInt(params.node.id),
+        newRowData,
+        newValue: params.newValue,
+        oldValue: params.oldValue,
+        rowData: params.data,
+        rowIndex: params.rowIndex,
+      },
+    });
+  }
+
+  render() {
+    const { quickFilterValue, ...someProperties } = this.props.properties;
+    if (quickFilterValue && quickFilterValue === '') {
+      this.gridApi.setQuickFilter(quickFilterValue); // check if empty string matches all
+    }
+    return (
+      <AgGridReact
+        onSelectionChanged={this.onSelectionChanged}
+        onRowSelected={this.onRowSelected}
+        onRowClicked={this.onRowClick}
+        onCellClicked={this.onCellClicked}
+        onGridReady={this.onGridReady}
+        onRowDragEnd={this.onRowDragEnd}
+        onCellValueChanged={this.onCellValueChanged}
+        postSort={this.postSort}
+        modules={AllCommunityModules}
+        {...someProperties}
+        rowData={this.props.value}
+      />
+    );
+  }
+}
+
+export default AgGridInput;
diff --git a/packages/plugins/blocks/blocks-aggrid/src/blocks.js b/packages/plugins/blocks/blocks-aggrid/src/blocks.js
new file mode 100644
index 0000000000..5d73f42ac9
--- /dev/null
+++ b/packages/plugins/blocks/blocks-aggrid/src/blocks.js
@@ -0,0 +1,22 @@
+/*
+  Copyright 2021 Lowdefy, Inc
+
+  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.
+*/
+
+export { default as AgGridAlpine } from './blocks/AgGridAlpine/AgGridAlpine.js';
+export { default as AgGridAlpineDark } from './blocks/AgGridAlpineDark/AgGridAlpineDark.js';
+export { default as AgGridBalham } from './blocks/AgGridBalham/AgGridBalham.js';
+export { default as AgGridBalhamDark } from './blocks/AgGridBalhamDark/AgGridBalhamDark.js';
+export { default as AgGridInputAlpine } from './blocks/AgGridInputAlpine/AgGridInputAlpine.js';
+export { default as AgGridMaterial } from './blocks/AgGridMaterial/AgGridMaterial.js';
diff --git a/packages/plugins/blocks/blocks-aggrid/src/blocks/AgGridAlpine/AgGridAlpine.js b/packages/plugins/blocks/blocks-aggrid/src/blocks/AgGridAlpine/AgGridAlpine.js
new file mode 100644
index 0000000000..bf9e2ce8c4
--- /dev/null
+++ b/packages/plugins/blocks/blocks-aggrid/src/blocks/AgGridAlpine/AgGridAlpine.js
@@ -0,0 +1,42 @@
+/*
+  Copyright 2021 Lowdefy, Inc
+
+  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.
+*/
+
+import React from 'react';
+import { blockDefaultProps } from '@lowdefy/block-utils';
+
+import AgGrid from '../../AgGrid.js';
+
+const AgGridAlpine = ({ blockId, events, methods, properties }) => (
+  <div
+    id={blockId}
+    className={`ag-theme-alpine ${methods.makeCssClass({
+      width: '100%',
+      height: properties.height || 500,
+      ...properties.style,
+    })}`}
+  >
+    <AgGrid events={events} properties={properties} methods={methods} />
+  </div>
+);
+
+AgGridAlpine.defaultProps = blockDefaultProps;
+AgGridAlpine.meta = {
+  category: 'display',
+  icons: [],
+  styles: ['blocks/AgGridAlpine/style.less'],
+};
+
+export default AgGridAlpine;
diff --git a/packages/plugins/blocks/blocks-aggrid/src/blocks/AgGridAlpine/AgGridAlpine.json b/packages/plugins/blocks/blocks-aggrid/src/blocks/AgGridAlpine/AgGridAlpine.json
new file mode 100644
index 0000000000..5703c6c8d2
--- /dev/null
+++ b/packages/plugins/blocks/blocks-aggrid/src/blocks/AgGridAlpine/AgGridAlpine.json
@@ -0,0 +1,8 @@
+{
+  "type": "object",
+  "properties": {
+    "properties": {
+      "type": "object"
+    }
+  }
+}
diff --git a/packages/plugins/blocks/blocks-aggrid/src/blocks/AgGridAlpine/style.less b/packages/plugins/blocks/blocks-aggrid/src/blocks/AgGridAlpine/style.less
new file mode 100644
index 0000000000..5f80433b33
--- /dev/null
+++ b/packages/plugins/blocks/blocks-aggrid/src/blocks/AgGridAlpine/style.less
@@ -0,0 +1,18 @@
+/*
+  Copyright 2020-2022 Lowdefy, Inc
+
+  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.
+*/
+
+@import (less) '@ag-grid-community/all-modules/dist/styles/ag-grid.css';
+@import (less) '@ag-grid-community/all-modules/dist/styles/ag-theme-alpine.css';
diff --git a/packages/plugins/blocks/blocks-aggrid/src/blocks/AgGridAlpineDark/AgGridAlpineDark.js b/packages/plugins/blocks/blocks-aggrid/src/blocks/AgGridAlpineDark/AgGridAlpineDark.js
new file mode 100644
index 0000000000..0491e9a1c4
--- /dev/null
+++ b/packages/plugins/blocks/blocks-aggrid/src/blocks/AgGridAlpineDark/AgGridAlpineDark.js
@@ -0,0 +1,42 @@
+/*
+  Copyright 2021 Lowdefy, Inc
+
+  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.
+*/
+
+import React from 'react';
+import { blockDefaultProps } from '@lowdefy/block-utils';
+
+import AgGrid from '../../AgGrid.js';
+
+const AgGridAlpineDark = ({ blockId, events, methods, properties }) => (
+  <div
+    id={blockId}
+    className={`ag-theme-alpine-dark ${methods.makeCssClass({
+      width: '100%',
+      height: properties.height || 500,
+      ...properties.style,
+    })}`}
+  >
+    <AgGrid events={events} properties={properties} methods={methods} />
+  </div>
+);
+
+AgGridAlpineDark.defaultProps = blockDefaultProps;
+AgGridAlpineDark.meta = {
+  category: 'display',
+  icons: [],
+  styles: ['blocks/AgGridAlpineDark/style.less'],
+};
+
+export default AgGridAlpineDark;
diff --git a/packages/plugins/blocks/blocks-aggrid/src/blocks/AgGridAlpineDark/AgGridAlpineDark.json b/packages/plugins/blocks/blocks-aggrid/src/blocks/AgGridAlpineDark/AgGridAlpineDark.json
new file mode 100644
index 0000000000..5703c6c8d2
--- /dev/null
+++ b/packages/plugins/blocks/blocks-aggrid/src/blocks/AgGridAlpineDark/AgGridAlpineDark.json
@@ -0,0 +1,8 @@
+{
+  "type": "object",
+  "properties": {
+    "properties": {
+      "type": "object"
+    }
+  }
+}
diff --git a/packages/plugins/blocks/blocks-aggrid/src/blocks/AgGridAlpineDark/style.less b/packages/plugins/blocks/blocks-aggrid/src/blocks/AgGridAlpineDark/style.less
new file mode 100644
index 0000000000..73373d4b39
--- /dev/null
+++ b/packages/plugins/blocks/blocks-aggrid/src/blocks/AgGridAlpineDark/style.less
@@ -0,0 +1,18 @@
+/*
+  Copyright 2020-2022 Lowdefy, Inc
+
+  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.
+*/
+
+@import (less) '@ag-grid-community/all-modules/dist/styles/ag-grid.css';
+@import (less) '@ag-grid-community/all-modules/dist/styles/ag-theme-alpine-dark.css';
diff --git a/packages/plugins/blocks/blocks-aggrid/src/blocks/AgGridBalham/AgGridBalham.js b/packages/plugins/blocks/blocks-aggrid/src/blocks/AgGridBalham/AgGridBalham.js
new file mode 100644
index 0000000000..897cea4052
--- /dev/null
+++ b/packages/plugins/blocks/blocks-aggrid/src/blocks/AgGridBalham/AgGridBalham.js
@@ -0,0 +1,42 @@
+/*
+  Copyright 2021 Lowdefy, Inc
+
+  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.
+*/
+
+import React from 'react';
+import { blockDefaultProps } from '@lowdefy/block-utils';
+
+import AgGrid from '../../AgGrid.js';
+
+const AgGridBalham = ({ blockId, events, methods, properties }) => (
+  <div
+    id={blockId}
+    className={`ag-theme-balham ${methods.makeCssClass({
+      width: '100%',
+      height: properties.height || 500,
+      ...properties.style,
+    })}`}
+  >
+    <AgGrid events={events} properties={properties} methods={methods} />
+  </div>
+);
+
+AgGridBalham.defaultProps = blockDefaultProps;
+AgGridBalham.meta = {
+  category: 'display',
+  icons: [],
+  styles: ['blocks/AgGridBalham/style.less'],
+};
+
+export default AgGridBalham;
diff --git a/packages/plugins/blocks/blocks-aggrid/src/blocks/AgGridBalham/AgGridBalham.json b/packages/plugins/blocks/blocks-aggrid/src/blocks/AgGridBalham/AgGridBalham.json
new file mode 100644
index 0000000000..5703c6c8d2
--- /dev/null
+++ b/packages/plugins/blocks/blocks-aggrid/src/blocks/AgGridBalham/AgGridBalham.json
@@ -0,0 +1,8 @@
+{
+  "type": "object",
+  "properties": {
+    "properties": {
+      "type": "object"
+    }
+  }
+}
diff --git a/packages/plugins/blocks/blocks-aggrid/src/blocks/AgGridBalham/style.less b/packages/plugins/blocks/blocks-aggrid/src/blocks/AgGridBalham/style.less
new file mode 100644
index 0000000000..e76d4288a5
--- /dev/null
+++ b/packages/plugins/blocks/blocks-aggrid/src/blocks/AgGridBalham/style.less
@@ -0,0 +1,18 @@
+/*
+  Copyright 2020-2022 Lowdefy, Inc
+
+  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.
+*/
+
+@import (less) '@ag-grid-community/all-modules/dist/styles/ag-grid.css';
+@import (less) '@ag-grid-community/all-modules/dist/styles/ag-theme-balham.css';
diff --git a/packages/plugins/blocks/blocks-aggrid/src/blocks/AgGridBalhamDark/AgGridBalhamDark.js b/packages/plugins/blocks/blocks-aggrid/src/blocks/AgGridBalhamDark/AgGridBalhamDark.js
new file mode 100644
index 0000000000..919e2dd4d0
--- /dev/null
+++ b/packages/plugins/blocks/blocks-aggrid/src/blocks/AgGridBalhamDark/AgGridBalhamDark.js
@@ -0,0 +1,42 @@
+/*
+  Copyright 2021 Lowdefy, Inc
+
+  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.
+*/
+
+import React from 'react';
+import { blockDefaultProps } from '@lowdefy/block-utils';
+
+import AgGrid from '../../AgGrid.js';
+
+const AgGridBalhamDark = ({ blockId, events, methods, properties }) => (
+  <div
+    id={blockId}
+    className={`ag-theme-balham-dark ${methods.makeCssClass({
+      width: '100%',
+      height: properties.height || 500,
+      ...properties.style,
+    })}`}
+  >
+    <AgGrid events={events} properties={properties} methods={methods} />
+  </div>
+);
+
+AgGridBalhamDark.defaultProps = blockDefaultProps;
+AgGridBalhamDark.meta = {
+  category: 'display',
+  icons: [],
+  styles: ['blocks/AgGridBalhamDark/style.less'],
+};
+
+export default AgGridBalhamDark;
diff --git a/packages/plugins/blocks/blocks-aggrid/src/blocks/AgGridBalhamDark/AgGridBalhamDark.json b/packages/plugins/blocks/blocks-aggrid/src/blocks/AgGridBalhamDark/AgGridBalhamDark.json
new file mode 100644
index 0000000000..5703c6c8d2
--- /dev/null
+++ b/packages/plugins/blocks/blocks-aggrid/src/blocks/AgGridBalhamDark/AgGridBalhamDark.json
@@ -0,0 +1,8 @@
+{
+  "type": "object",
+  "properties": {
+    "properties": {
+      "type": "object"
+    }
+  }
+}
diff --git a/packages/plugins/blocks/blocks-aggrid/src/blocks/AgGridBalhamDark/style.less b/packages/plugins/blocks/blocks-aggrid/src/blocks/AgGridBalhamDark/style.less
new file mode 100644
index 0000000000..4a6ef12b2e
--- /dev/null
+++ b/packages/plugins/blocks/blocks-aggrid/src/blocks/AgGridBalhamDark/style.less
@@ -0,0 +1,18 @@
+/*
+  Copyright 2020-2022 Lowdefy, Inc
+
+  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.
+*/
+
+@import (less) '@ag-grid-community/all-modules/dist/styles/ag-grid.css';
+@import (less) '@ag-grid-community/all-modules/dist/styles/ag-theme-balham-dark.css';
diff --git a/packages/plugins/blocks/blocks-aggrid/src/blocks/AgGridInputAlpine/AgGridInputAlpine.js b/packages/plugins/blocks/blocks-aggrid/src/blocks/AgGridInputAlpine/AgGridInputAlpine.js
new file mode 100644
index 0000000000..d3e5d53c10
--- /dev/null
+++ b/packages/plugins/blocks/blocks-aggrid/src/blocks/AgGridInputAlpine/AgGridInputAlpine.js
@@ -0,0 +1,60 @@
+/*
+  Copyright 2021 Lowdefy, Inc
+
+  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.
+*/
+
+import React from 'react';
+import { blockDefaultProps } from '@lowdefy/block-utils';
+
+import AgGridInput from '../../AgGridInput.js';
+
+const AgGridInputAlpine = ({
+  blockId,
+  events,
+  loading,
+  methods,
+  properties,
+  required,
+  validation,
+  value,
+}) => (
+  <div
+    id={blockId}
+    className={`ag-theme-alpine ${methods.makeCssClass({
+      width: '100%',
+      height: properties.height || 500,
+      ...properties.style,
+    })}`}
+  >
+    <AgGridInput
+      blockId={blockId}
+      events={events}
+      loading={loading}
+      methods={methods}
+      properties={properties}
+      required={required}
+      validation={validation}
+      value={value}
+    />
+  </div>
+);
+
+AgGridInputAlpine.defaultProps = blockDefaultProps;
+AgGridInputAlpine.meta = {
+  category: 'input',
+  icons: [],
+  styles: ['blocks/AgGridInputAlpine/style.less'],
+};
+
+export default AgGridInputAlpine;
diff --git a/packages/plugins/blocks/blocks-aggrid/src/blocks/AgGridInputAlpine/AgGridInputAlpine.json b/packages/plugins/blocks/blocks-aggrid/src/blocks/AgGridInputAlpine/AgGridInputAlpine.json
new file mode 100644
index 0000000000..5703c6c8d2
--- /dev/null
+++ b/packages/plugins/blocks/blocks-aggrid/src/blocks/AgGridInputAlpine/AgGridInputAlpine.json
@@ -0,0 +1,8 @@
+{
+  "type": "object",
+  "properties": {
+    "properties": {
+      "type": "object"
+    }
+  }
+}
diff --git a/packages/plugins/blocks/blocks-aggrid/src/blocks/AgGridInputAlpine/style.less b/packages/plugins/blocks/blocks-aggrid/src/blocks/AgGridInputAlpine/style.less
new file mode 100644
index 0000000000..5f80433b33
--- /dev/null
+++ b/packages/plugins/blocks/blocks-aggrid/src/blocks/AgGridInputAlpine/style.less
@@ -0,0 +1,18 @@
+/*
+  Copyright 2020-2022 Lowdefy, Inc
+
+  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.
+*/
+
+@import (less) '@ag-grid-community/all-modules/dist/styles/ag-grid.css';
+@import (less) '@ag-grid-community/all-modules/dist/styles/ag-theme-alpine.css';
diff --git a/packages/plugins/blocks/blocks-aggrid/src/blocks/AgGridInputAlpineDark/AgGridInputAlpineDark.js b/packages/plugins/blocks/blocks-aggrid/src/blocks/AgGridInputAlpineDark/AgGridInputAlpineDark.js
new file mode 100644
index 0000000000..3006e4422f
--- /dev/null
+++ b/packages/plugins/blocks/blocks-aggrid/src/blocks/AgGridInputAlpineDark/AgGridInputAlpineDark.js
@@ -0,0 +1,60 @@
+/*
+  Copyright 2021 Lowdefy, Inc
+
+  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.
+*/
+
+import React from 'react';
+import { blockDefaultProps } from '@lowdefy/block-utils';
+
+import AgGridInput from '../../AgGridInput.js';
+
+const AgGridInputAlpineDark = ({
+  blockId,
+  events,
+  loading,
+  methods,
+  properties,
+  required,
+  validation,
+  value,
+}) => (
+  <div
+    id={blockId}
+    className={`ag-theme-alpine-dark ${methods.makeCssClass({
+      width: '100%',
+      height: properties.height || 500,
+      ...properties.style,
+    })}`}
+  >
+    <AgGridInput
+      blockId={blockId}
+      events={events}
+      loading={loading}
+      methods={methods}
+      properties={properties}
+      required={required}
+      validation={validation}
+      value={value}
+    />
+  </div>
+);
+
+AgGridInputAlpineDark.defaultProps = blockDefaultProps;
+AgGridInputAlpineDark.meta = {
+  category: 'input',
+  icons: [],
+  styles: ['blocks/AgGridInputAlpineDark/style.less'],
+};
+
+export default AgGridInputAlpineDark;
diff --git a/packages/plugins/blocks/blocks-aggrid/src/blocks/AgGridInputAlpineDark/AgGridInputAlpineDark.json b/packages/plugins/blocks/blocks-aggrid/src/blocks/AgGridInputAlpineDark/AgGridInputAlpineDark.json
new file mode 100644
index 0000000000..5703c6c8d2
--- /dev/null
+++ b/packages/plugins/blocks/blocks-aggrid/src/blocks/AgGridInputAlpineDark/AgGridInputAlpineDark.json
@@ -0,0 +1,8 @@
+{
+  "type": "object",
+  "properties": {
+    "properties": {
+      "type": "object"
+    }
+  }
+}
diff --git a/packages/plugins/blocks/blocks-aggrid/src/blocks/AgGridInputAlpineDark/style.less b/packages/plugins/blocks/blocks-aggrid/src/blocks/AgGridInputAlpineDark/style.less
new file mode 100644
index 0000000000..73373d4b39
--- /dev/null
+++ b/packages/plugins/blocks/blocks-aggrid/src/blocks/AgGridInputAlpineDark/style.less
@@ -0,0 +1,18 @@
+/*
+  Copyright 2020-2022 Lowdefy, Inc
+
+  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.
+*/
+
+@import (less) '@ag-grid-community/all-modules/dist/styles/ag-grid.css';
+@import (less) '@ag-grid-community/all-modules/dist/styles/ag-theme-alpine-dark.css';
diff --git a/packages/plugins/blocks/blocks-aggrid/src/blocks/AgGridInputBalham/AgGridInputBalham.js b/packages/plugins/blocks/blocks-aggrid/src/blocks/AgGridInputBalham/AgGridInputBalham.js
new file mode 100644
index 0000000000..893234021f
--- /dev/null
+++ b/packages/plugins/blocks/blocks-aggrid/src/blocks/AgGridInputBalham/AgGridInputBalham.js
@@ -0,0 +1,60 @@
+/*
+  Copyright 2021 Lowdefy, Inc
+
+  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.
+*/
+
+import React from 'react';
+import { blockDefaultProps } from '@lowdefy/block-utils';
+
+import AgGridInput from '../../AgGridInput.js';
+
+const AgGridInputBalham = ({
+  blockId,
+  events,
+  loading,
+  methods,
+  properties,
+  required,
+  validation,
+  value,
+}) => (
+  <div
+    id={blockId}
+    className={`ag-theme-balham ${methods.makeCssClass({
+      width: '100%',
+      height: properties.height || 500,
+      ...properties.style,
+    })}`}
+  >
+    <AgGridInput
+      blockId={blockId}
+      events={events}
+      loading={loading}
+      methods={methods}
+      properties={properties}
+      required={required}
+      validation={validation}
+      value={value}
+    />
+  </div>
+);
+
+AgGridInputBalham.defaultProps = blockDefaultProps;
+AgGridInputBalham.meta = {
+  category: 'input',
+  icons: [],
+  styles: ['blocks/AgGridInputBalham/style.less'],
+};
+
+export default AgGridInputBalham;
diff --git a/packages/plugins/blocks/blocks-aggrid/src/blocks/AgGridInputBalham/AgGridInputBalham.json b/packages/plugins/blocks/blocks-aggrid/src/blocks/AgGridInputBalham/AgGridInputBalham.json
new file mode 100644
index 0000000000..5703c6c8d2
--- /dev/null
+++ b/packages/plugins/blocks/blocks-aggrid/src/blocks/AgGridInputBalham/AgGridInputBalham.json
@@ -0,0 +1,8 @@
+{
+  "type": "object",
+  "properties": {
+    "properties": {
+      "type": "object"
+    }
+  }
+}
diff --git a/packages/plugins/blocks/blocks-aggrid/src/blocks/AgGridInputBalham/style.less b/packages/plugins/blocks/blocks-aggrid/src/blocks/AgGridInputBalham/style.less
new file mode 100644
index 0000000000..e76d4288a5
--- /dev/null
+++ b/packages/plugins/blocks/blocks-aggrid/src/blocks/AgGridInputBalham/style.less
@@ -0,0 +1,18 @@
+/*
+  Copyright 2020-2022 Lowdefy, Inc
+
+  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.
+*/
+
+@import (less) '@ag-grid-community/all-modules/dist/styles/ag-grid.css';
+@import (less) '@ag-grid-community/all-modules/dist/styles/ag-theme-balham.css';
diff --git a/packages/plugins/blocks/blocks-aggrid/src/blocks/AgGridInputBalhamDark/AgGridInputBalhamDark.js b/packages/plugins/blocks/blocks-aggrid/src/blocks/AgGridInputBalhamDark/AgGridInputBalhamDark.js
new file mode 100644
index 0000000000..a1db51d0e0
--- /dev/null
+++ b/packages/plugins/blocks/blocks-aggrid/src/blocks/AgGridInputBalhamDark/AgGridInputBalhamDark.js
@@ -0,0 +1,60 @@
+/*
+  Copyright 2021 Lowdefy, Inc
+
+  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.
+*/
+
+import React from 'react';
+import { blockDefaultProps } from '@lowdefy/block-utils';
+
+import AgGridInput from '../../AgGridInput.js';
+
+const AgGridInputBalhamDark = ({
+  blockId,
+  events,
+  loading,
+  methods,
+  properties,
+  required,
+  validation,
+  value,
+}) => (
+  <div
+    id={blockId}
+    className={`ag-theme-balham-dark ${methods.makeCssClass({
+      width: '100%',
+      height: properties.height || 500,
+      ...properties.style,
+    })}`}
+  >
+    <AgGridInput
+      blockId={blockId}
+      events={events}
+      loading={loading}
+      methods={methods}
+      properties={properties}
+      required={required}
+      validation={validation}
+      value={value}
+    />
+  </div>
+);
+
+AgGridInputBalhamDark.defaultProps = blockDefaultProps;
+AgGridInputBalhamDark.meta = {
+  category: 'input',
+  icons: [],
+  styles: ['blocks/AgGridInputBalhamDark/style.less'],
+};
+
+export default AgGridInputBalhamDark;
diff --git a/packages/plugins/blocks/blocks-aggrid/src/blocks/AgGridInputBalhamDark/AgGridInputBalhamDark.json b/packages/plugins/blocks/blocks-aggrid/src/blocks/AgGridInputBalhamDark/AgGridInputBalhamDark.json
new file mode 100644
index 0000000000..5703c6c8d2
--- /dev/null
+++ b/packages/plugins/blocks/blocks-aggrid/src/blocks/AgGridInputBalhamDark/AgGridInputBalhamDark.json
@@ -0,0 +1,8 @@
+{
+  "type": "object",
+  "properties": {
+    "properties": {
+      "type": "object"
+    }
+  }
+}
diff --git a/packages/plugins/blocks/blocks-aggrid/src/blocks/AgGridInputBalhamDark/style.less b/packages/plugins/blocks/blocks-aggrid/src/blocks/AgGridInputBalhamDark/style.less
new file mode 100644
index 0000000000..4a6ef12b2e
--- /dev/null
+++ b/packages/plugins/blocks/blocks-aggrid/src/blocks/AgGridInputBalhamDark/style.less
@@ -0,0 +1,18 @@
+/*
+  Copyright 2020-2022 Lowdefy, Inc
+
+  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.
+*/
+
+@import (less) '@ag-grid-community/all-modules/dist/styles/ag-grid.css';
+@import (less) '@ag-grid-community/all-modules/dist/styles/ag-theme-balham-dark.css';
diff --git a/packages/plugins/blocks/blocks-aggrid/src/blocks/AgGridInputMaterial/AgGridInputMaterial.js b/packages/plugins/blocks/blocks-aggrid/src/blocks/AgGridInputMaterial/AgGridInputMaterial.js
new file mode 100644
index 0000000000..599c605942
--- /dev/null
+++ b/packages/plugins/blocks/blocks-aggrid/src/blocks/AgGridInputMaterial/AgGridInputMaterial.js
@@ -0,0 +1,60 @@
+/*
+  Copyright 2021 Lowdefy, Inc
+
+  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.
+*/
+
+import React from 'react';
+import { blockDefaultProps } from '@lowdefy/block-utils';
+
+import AgGridInput from '../../AgGridInput.js';
+
+const AgGridInputMaterial = ({
+  blockId,
+  events,
+  loading,
+  methods,
+  properties,
+  required,
+  validation,
+  value,
+}) => (
+  <div
+    id={blockId}
+    className={`ag-theme-material ${methods.makeCssClass({
+      width: '100%',
+      height: properties.height || 500,
+      ...properties.style,
+    })}`}
+  >
+    <AgGridInput
+      blockId={blockId}
+      events={events}
+      loading={loading}
+      methods={methods}
+      properties={properties}
+      required={required}
+      validation={validation}
+      value={value}
+    />
+  </div>
+);
+
+AgGridInputMaterial.defaultProps = blockDefaultProps;
+AgGridInputMaterial.meta = {
+  category: 'input',
+  icons: [],
+  styles: ['blocks/AgGridInputMaterial/style.less'],
+};
+
+export default AgGridInputMaterial;
diff --git a/packages/plugins/blocks/blocks-aggrid/src/blocks/AgGridInputMaterial/AgGridInputMaterial.json b/packages/plugins/blocks/blocks-aggrid/src/blocks/AgGridInputMaterial/AgGridInputMaterial.json
new file mode 100644
index 0000000000..5703c6c8d2
--- /dev/null
+++ b/packages/plugins/blocks/blocks-aggrid/src/blocks/AgGridInputMaterial/AgGridInputMaterial.json
@@ -0,0 +1,8 @@
+{
+  "type": "object",
+  "properties": {
+    "properties": {
+      "type": "object"
+    }
+  }
+}
diff --git a/packages/plugins/blocks/blocks-aggrid/src/blocks/AgGridInputMaterial/style.less b/packages/plugins/blocks/blocks-aggrid/src/blocks/AgGridInputMaterial/style.less
new file mode 100644
index 0000000000..cc95a14e33
--- /dev/null
+++ b/packages/plugins/blocks/blocks-aggrid/src/blocks/AgGridInputMaterial/style.less
@@ -0,0 +1,18 @@
+/*
+  Copyright 2020-2022 Lowdefy, Inc
+
+  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.
+*/
+
+@import (less) '@ag-grid-community/all-modules/dist/styles/ag-grid.css';
+@import (less) '@ag-grid-community/all-modules/dist/styles/ag-theme-material.css';
diff --git a/packages/plugins/blocks/blocks-aggrid/src/blocks/AgGridMaterial/AgGridMaterial.js b/packages/plugins/blocks/blocks-aggrid/src/blocks/AgGridMaterial/AgGridMaterial.js
new file mode 100644
index 0000000000..1ffd77b206
--- /dev/null
+++ b/packages/plugins/blocks/blocks-aggrid/src/blocks/AgGridMaterial/AgGridMaterial.js
@@ -0,0 +1,42 @@
+/*
+  Copyright 2021 Lowdefy, Inc
+
+  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.
+*/
+
+import React from 'react';
+import { blockDefaultProps } from '@lowdefy/block-utils';
+
+import AgGrid from '../../AgGrid.js';
+
+const AgGridMaterial = ({ blockId, events, methods, properties }) => (
+  <div
+    id={blockId}
+    className={`ag-theme-material ${methods.makeCssClass({
+      width: '100%',
+      height: properties.height || 500,
+      ...properties.style,
+    })}`}
+  >
+    <AgGrid events={events} properties={properties} methods={methods} />
+  </div>
+);
+
+AgGridMaterial.defaultProps = blockDefaultProps;
+AgGridMaterial.meta = {
+  category: 'display',
+  icons: [],
+  styles: ['blocks/AgGridMaterial/style.less'],
+};
+
+export default AgGridMaterial;
diff --git a/packages/plugins/blocks/blocks-aggrid/src/blocks/AgGridMaterial/AgGridMaterial.json b/packages/plugins/blocks/blocks-aggrid/src/blocks/AgGridMaterial/AgGridMaterial.json
new file mode 100644
index 0000000000..5703c6c8d2
--- /dev/null
+++ b/packages/plugins/blocks/blocks-aggrid/src/blocks/AgGridMaterial/AgGridMaterial.json
@@ -0,0 +1,8 @@
+{
+  "type": "object",
+  "properties": {
+    "properties": {
+      "type": "object"
+    }
+  }
+}
diff --git a/packages/plugins/blocks/blocks-aggrid/src/blocks/AgGridMaterial/style.less b/packages/plugins/blocks/blocks-aggrid/src/blocks/AgGridMaterial/style.less
new file mode 100644
index 0000000000..cc95a14e33
--- /dev/null
+++ b/packages/plugins/blocks/blocks-aggrid/src/blocks/AgGridMaterial/style.less
@@ -0,0 +1,18 @@
+/*
+  Copyright 2020-2022 Lowdefy, Inc
+
+  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.
+*/
+
+@import (less) '@ag-grid-community/all-modules/dist/styles/ag-grid.css';
+@import (less) '@ag-grid-community/all-modules/dist/styles/ag-theme-material.css';
diff --git a/packages/plugins/blocks/blocks-aggrid/src/types.js b/packages/plugins/blocks/blocks-aggrid/src/types.js
new file mode 100644
index 0000000000..efb52658be
--- /dev/null
+++ b/packages/plugins/blocks/blocks-aggrid/src/types.js
@@ -0,0 +1,30 @@
+/* eslint-disable import/namespace */
+/*
+  Copyright 2020-2022 Lowdefy, Inc
+
+  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.
+*/
+
+import * as blocks from './blocks.js';
+
+const icons = {};
+const styles = {};
+Object.keys(blocks).forEach((block) => {
+  icons[block] = blocks[block].meta.icons || [];
+  styles[block] = blocks[block].meta.styles || [];
+});
+export default {
+  blocks: Object.keys(blocks),
+  icons,
+  styles: { default: [], ...styles },
+};