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 types

The availible ag-gird block types are:

• AgGridAlpine
• AgGridAlpineDark
• AgGridBalham
• AgGridBalhamDark
• AgGridMaterial

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.
  • filter: object: An object of objects where each key is the row being filtered.
• 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 are changed and pass the following to _event:
  • selected: object[]: List of selected row objects.
• onSortChanged: Trigger event when the sort changes and pass the following to _event:
  • rows: object[]: List of row objects matched by the filter.
  • sort: object[]: List of rows which are being sorted.

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.
• 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

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

AgGridAlpine valueFormatter: _function Example

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

AgGridAlpine onRowClick Example

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

AgGridAlpine onCellClick Example

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

AgGridAlpine onRowSelected Example

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

AgGridAlpine onSelectionChanged Example

1name: my-app
2lowdefy: 4.0.0-rc.5
3pages:
4  - id: dashboard
5    type: PageHeaderMenu
6    blocks:
7      - id: my_table
8        type: AgGridAlpine
9        properties:
10          rowData:
11            - title: One
12              year: 2010
13              viewerReviews: 30
14            - title: Two
15              year: 2011
16              viewerReviews: 20
17          defaultColDef:
18            sortable: true
19            resizable: true
20            filter: true
21          rowSelection: 'multiple'
22          columnDefs:
23            - headerName: Title
24              field: title
25              width: 350
26              checkboxSelection: true
27              headerCheckboxSelection: true
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          onSelectionChanged:
37            - id: set_selected
38              type: SetState
39              params:
40                all_selected:
41                  _event: selected
42      - id: all_selected
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: all_selected
51                  - null
52              then: 'Select rows.'
53              else:
54                _string.concat:
55                  - 'Total Selected: '
56                  - _array.length:
57                      _state: all_selected

AgGridAlpine editable cells Example

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

AgGridInputAlpine onRowDragMove Example

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

AgGridInputAlpine editable cells Example

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