@lowdefy/blocks-aggrid
v4.1.0
Published
AgGrid Blocks for Lowdefy.
Downloads
869
Readme
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:
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 ofargs. -skipHeader: boolean: Do not consider header content width when auto-sizing columns. -columnIds: string[]: List ofcolIds 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
name: my-app
lowdefy: 3.12.3
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: numericColumnAgGridAlpine valueFormatter: _function Example
name: my-app
lowdefy: 3.12.3
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:
__intl.numberFormat:
on:
__args: 0.value
options:
style: 'currency'
currency: 'EUR'AgGridAlpine onRowClick Example
name: my-app
lowdefy: 3.12.3
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.yearAgGridAlpine onCellClick Example
name: my-app
lowdefy: 3.12.3
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
name: my-app
lowdefy: 4.0.0-rc.5
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_selectedAgGridAlpine onSelectionChanged Example
name: my-app
lowdefy: 4.0.0-rc.5
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_selectedAgGridAlpine editable cells Example
name: my-app
lowdefy: 4.0.0-rc.5
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
name: my-app
lowdefy: 4.0.0-rc.5
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: trueAgGridInputAlpine editable cells Example
name: my-app
lowdefy: 4.0.0-rc.5
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