Lowdefy Blocks for Ag-Grid

This repository provides blocks for Ag-Grid, a feature rich javascript grid and table library.

The implementation of these blocks is a minimal wrapper for the @ag-grid-community/core package. This means you write normal Ag-Grid config to create tables.

See the Ag-Grid docs for the table settings API.

Blocks

Block types for supported Ag-Grid themes 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 colIds 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.

AgGridAlpine Example

1name: my-app
2lowdefy: 3.12.3
3types:
4  AgGridAlpine:
5    url: https://blocks-cdn.lowdefy.com/v3.12.3/blocks-aggrid/meta/AgGridAlpine.json
6pages:
7  - id: dashboard
8    type: PageHeaderMenu
9    blocks:
10      - id: my_table
11        type: AgGridAlpine
12        properties:
13          rowData:
14            - title: One
15              year: 2010
16              viewerReviews: 30
17            - title: Two
18              year: 2011
19              viewerReviews: 20
20          defaultColDef:
21            sortable: true
22            resizable: true
23            filter: true
24          columnDefs:
25            - headerName: Title
26              field: title
27              width: 350
28            - headerName: Year
29              field: year
30              width: 100
31            - headerName: Viewer Reviews
32              field: viewerReviews
33              width: 160
34              type: numericColumn

AgGridAlpine valueFormatter: _function Example

1name: my-app
2lowdefy: 3.12.3
3types:
4  AgGridAlpine:
5    url: https://blocks-cdn.lowdefy.com/v3.12.3/blocks-aggrid/meta/AgGridAlpine.json
6pages:
7  - id: dashboard
8    type: PageHeaderMenu
9    blocks:
10      - id: my_table
11        type: AgGridAlpine
12        properties:
13          rowData:
14            - title: One
15              year: 2010
16              total: 300.21
17            - title: Two
18              year: 2011
19              total: 1230.9495
20          defaultColDef:
21            sortable: true
22            resizable: true
23            filter: true
24          columnDefs:
25            - headerName: Title
26              field: title
27              width: 350
28            - headerName: Year
29              field: year
30              width: 100
31            - headerName: Total
32              field: total
33              width: 160
34              type: numericColumn
35              valueFormatter:
36                _function:
37                  __format.intlNumberFormat:
38                    on:
39                      __args: 0.value
40                    params:
41                      options:
42                        style: 'currency'
43                        currency: 'EUR'

AgGridAlpine onRowClick Example

1name: my-app
2lowdefy: 3.12.3
3types:
4  AgGridAlpine:
5    url: https://blocks-cdn.lowdefy.com/v3.12.3/blocks-aggrid/meta/AgGridAlpine.json
6pages:
7  - id: dashboard
8    type: PageHeaderMenu
9    blocks:
10      - id: my_table
11        type: AgGridAlpine
12        properties:
13          rowData:
14            - title: One
15              year: 2010
16              viewerReviews: 30
17            - title: Two
18              year: 2011
19              viewerReviews: 20
20          defaultColDef:
21            sortable: true
22            resizable: true
23            filter: true
24          columnDefs:
25            - headerName: Title
26              field: title
27              width: 350
28            - headerName: Year
29              field: year
30              width: 100
31            - headerName: Viewer Reviews
32              field: viewerReviews
33              width: 160
34              type: numericColumn
35        events:
36          onRowClick:
37            - id: set_selected
38              type: SetState
39              params:
40                selected_row: # Update 'selected' in state with the event data.
41                  _event: row
42      - id: selection
43        type: Title
44        properties:
45          level: 4
46          content:
47            _if: # Show the event data in a title, or call to action.
48              test:
49                _eq:
50                  - _state: selected_row
51                  - null
52              then: 'Click to select a row.'
53              else:
54                _string.concat:
55                  - 'Title: '
56                  - _state: selected_row.title
57                  - ', Year: '
58                  - _state: selected_row.year

AgGridAlpine onCellClick Example

1name: my-app
2lowdefy: 3.12.3
3types:
4  AgGridAlpine:
5    url: https://blocks-cdn.lowdefy.com/v3.12.3/blocks-aggrid/meta/AgGridAlpine.json
6pages:
7  - id: dashboard
8    type: PageHeaderMenu
9    blocks:
10      - id: my_table
11        type: AgGridAlpine
12        properties:
13          rowData:
14            - title: One
15              year: 2010
16              viewerReviews: 30
17            - title: Two
18              year: 2011
19              viewerReviews: 20
20          defaultColDef:
21            sortable: true
22            resizable: true
23            filter: true
24          columnDefs:
25            - headerName: Title
26              field: title
27              width: 350
28            - headerName: Year
29              field: year
30              width: 100
31            - headerName: Viewer Reviews
32              field: viewerReviews
33              width: 160
34              type: numericColumn
35        events:
36          onCellClick:
37            - id: set_selected
38              type: SetState
39              params:
40                selected_cell: # Update 'selected_cell' in state with the event cell data.
41                  _event: cell
42      - id: selection
43        type: Title
44        properties:
45          level: 4
46          content:
47            _if: # Show the event data in a title, or call to action.
48              test:
49                _eq:
50                  - _state: selected_cell.column
51                  - title
52              then:
53                _string.concat:
54                  - 'Title: '
55                  - _state: selected_cell.value
56              else: 'Select a movie title.'

AgGridAlpine onRowSelected Example

1name: my-app
2lowdefy: 3.12.3
3types:
4  AgGridAlpine:
5    url: https://blocks-cdn.lowdefy.com/v3.12.3/blocks-aggrid/meta/AgGridAlpine.json
6pages:
7  - id: dashboard
8    type: PageHeaderMenu
9    blocks:
10      - id: my_table
11        type: AgGridAlpine
12        properties:
13          rowData:
14            - title: One
15              year: 2010
16              viewerReviews: 30
17            - title: Two
18              year: 2011
19              viewerReviews: 20
20          defaultColDef:
21            sortable: true
22            resizable: true
23            filter: true
24          rowSelection: 'multiple'
25          columnDefs:
26            - headerName: Title
27              field: title
28              width: 350
29              checkboxSelection: true
30            - headerName: Year
31              field: year
32              width: 100
33            - headerName: Viewer Reviews
34              field: viewerReviews
35              width: 160
36              type: numericColumn
37        events:
38          onRowSelected:
39            - id: set_selected
40              type: SetState
41              params:
42                selected_row: # Update 'selected' in state with the event data.
43                  _event: row
44                all_selected:
45                  _event: selected
46      - id: selection
47        type: Title
48        properties:
49          level: 4
50          content:
51            _if: # Show the event data in a title, or call to action.
52              test:
53                _eq:
54                  - _state: selected_row
55                  - null
56              then: 'Click to select a row.'
57              else:
58                _string.concat:
59                  - 'Last Selected - Title: '
60                  - _state: selected_row.title
61                  - ', Year: '
62                  - _state: selected_row.year
63      - id: all_selected
64        type: Title
65        properties:
66          level: 4
67          content:
68            _if: # Show the event data in a title, or call to action.
69              test:
70                _eq:
71                  - _state: all_selected
72                  - null
73              then: 'Select rows.'
74              else:
75                _string.concat:
76                  - 'Total Selected: '
77                  - _array.length:
78                      _state: all_selected

AgGridAlpine onSelectionChanged Example

1name: my-app
2lowdefy: 3.12.3
3types:
4  AgGridAlpine:
5    url: https://blocks-cdn.lowdefy.com/v3.12.3/blocks-aggrid/meta/AgGridAlpine.json
6pages:
7  - id: dashboard
8    type: PageHeaderMenu
9    blocks:
10      - id: my_table
11        type: AgGridAlpine
12        properties:
13          rowData:
14            - title: One
15              year: 2010
16              viewerReviews: 30
17            - title: Two
18              year: 2011
19              viewerReviews: 20
20          defaultColDef:
21            sortable: true
22            resizable: true
23            filter: true
24          rowSelection: 'multiple'
25          columnDefs:
26            - headerName: Title
27              field: title
28              width: 350
29              checkboxSelection: true
30              headerCheckboxSelection: true
31            - headerName: Year
32              field: year
33              width: 100
34            - headerName: Viewer Reviews
35              field: viewerReviews
36              width: 160
37              type: numericColumn
38        events:
39          onSelectionChanged:
40            - id: set_selected
41              type: SetState
42              params:
43                all_selected:
44                  _event: selected
45      - id: all_selected
46        type: Title
47        properties:
48          level: 4
49          content:
50            _if: # Show the event data in a title, or call to action.
51              test:
52                _eq:
53                  - _state: all_selected
54                  - null
55              then: 'Select rows.'
56              else:
57                _string.concat:
58                  - 'Total Selected: '
59                  - _array.length:
60                      _state: all_selected

AgGridAlpine editable cells Example

1name: my-app
2lowdefy: 3.12.3
3types:
4  AgGridAlpine:
5    url: https://blocks-cdn.lowdefy.com/v3.12.3/blocks-aggrid/meta/AgGridAlpine.json
6pages:
7  - id: dashboard
8    type: PageHeaderMenu
9    blocks:
10      - id: Download
11        type: Button
12        events:
13          onClick:
14            - id: download
15              type: CallMethod
16              params:
17                blockId: table
18                method: exportDataAsCsv
19      - id: table
20        type: AgGridAlpine
21        properties:
22          rowData:
23            - a: zero
24              b: 000
25              c: AA
26            - a: one
27              b: 111
28              c: BB
29            - a: two
30              b: 222
31              c: CC
32          columnDefs:
33            - field: 'a'
34            - field: 'b'
35            - field: 'c'

AgGridInputAlpine onRowDragMove Example

1name: my-app
2lowdefy: 3.12.3
3types:
4  AgGridInputAlpine:
5    url: https://blocks-cdn.lowdefy.com/v3.12.3/blocks-aggrid/meta/AgGridInputAlpine.json
6pages:
7  - id: dashboard
8    type: PageHeaderMenu
9    events:
10      onInit:
11        - id: new
12          type: SetState
13          params:
14            table:
15              - a: zero
16                b: 000
17                c: AA
18              - a: one
19                b: 111
20                c: BB
21              - a: two
22                b: 222
23                c: CC
24    blocks:
25      - id: table
26        type: AgGridInputAlpine
27        properties:
28          columnDefs:
29            - field: 'a'
30              rowDrag: true
31            - field: 'b'
32            - field: 'c'
33            - field: 'd'
34          defaultColDef:
35            width: 170
36            sortable: true
37            filter: true

AgGridInputAlpine editable cells Example

1name: my-app
2lowdefy: 3.12.3
3types:
4  AgGridInputAlpine:
5    url: https://blocks-cdn.lowdefy.com/v3.12.3/blocks-aggrid/meta/AgGridInputAlpine.json
6pages:
7  - id: dashboard
8    type: PageHeaderMenu
9    events:
10      onInit:
11        - id: new
12          type: SetState
13          params:
14            table:
15              - a: zero
16                b: 000
17                c: AA
18              - a: one
19                b: 111
20                c: BB
21              - a: two
22                b: 222
23                c: CC
24    blocks:
25      - id: table
26        type: AgGridInputAlpine
27        properties:
28          columnDefs:
29            - field: 'a'
30            - field: 'b'
31            - field: 'c'
32              cellEditor: 'agSelectCellEditor'
33              cellEditorParams:
34                values: ['AA', 'BB', 'CC', 'DD']
35          defaultColDef:
36            width: 170
37            sortable: true
38            filter: true
39            editable: true

Other Lowdefy Blocks Packages

• @lowdefy/blocks-template: Lowdefy template for creating blocks.
• @lowdefy/blocks-basic: Official Lowdefy blocks some basic Html elements.
• @lowdefy/blocks-antd: Official Lowdefy blocks for Antd design.
• @lowdefy/blocks-color-selectors: Official Lowdefy blocks for react-color.
• @lowdefy/blocks-markdown: Official Lowdefy blocks to render Markdown.
• @lowdefy/blocks-amcharts: Lowdefy blocks to render AmCharts v4.

More Lowdefy resources

• Getting started with Lowdefy - https://docs.lowdefy.com/tutorial-start
• Lowdefy docs - https://docs.lowdefy.com
• Lowdefy website - https://lowdefy.com
• Community forum - https://github.com/lowdefy/lowdefy/discussions
• Bug reports and feature requests - https://github.com/lowdefy/lowdefy/issues

Licence

Apache-2.0