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.
Block types for supported Ag-Grid themes are available for for dispay
and input
block categories.
The block types are hosted at:
AgGridAlpine
: https://blocks-cdn.lowdefy.com/v3.12.3/blocks-aggrid/meta/AgGridAlpine.jsonAgGridAlpineDark
: https://blocks-cdn.lowdefy.com/v3.12.3/blocks-aggrid/meta/AgGridAlpineDark.jsonAgGridBalham
: https://blocks-cdn.lowdefy.com/v3.12.3/blocks-aggrid/meta/AgGridBalham.jsonAgGridBalhamDark
: https://blocks-cdn.lowdefy.com/v3.12.3/blocks-aggrid/meta/AgGridBalhamDark.jsonAgGridMaterial
: https://blocks-cdn.lowdefy.com/v3.12.3/blocks-aggrid/meta/AgGridMaterial.jsonAgGridInputAlpine
: https://blocks-cdn.lowdefy.com/v3.12.3/blocks-aggrid/meta/AgGridInputAlpine.jsonAgGridInputAlpineDark
: https://blocks-cdn.lowdefy.com/v3.12.3/blocks-aggrid/meta/AgGridInputAlpineDark.jsonAgGridInputBalham
: https://blocks-cdn.lowdefy.com/v3.12.3/blocks-aggrid/meta/AgGridInputBalham.jsonAgGridInputBalhamDark
: https://blocks-cdn.lowdefy.com/v3.12.3/blocks-aggrid/meta/AgGridInputBalhamDark.jsonAgGridInputMaterial
: https://blocks-cdn.lowdefy.com/v3.12.3/blocks-aggrid/meta/AgGridInputMaterial.json
onCellClick
: Trigger event when a cell is clicked and pass the following to_event
:row: object
: Row data object.cell: object
: Cell data object.selected: object[]
: List of selected row objects.rowIndex: number
: List index of the clicked row.colId: string
: Column id of the clicked cell.
onRowClick
: Trigger event when a row is clicked and pass the following to_event
:row: object
: Row data object.selected: object[]
: List of selected row objects.rowIndex: number
: List index of the clicked row.
onRowSelected
: Trigger event when a row is selected and pass the following to_event
:row: object
: Row data object.selected: object[]
: List of selected row objects.rowIndex: number
: List index of the clicked row.
onSelectionChanged
: Triggered when the selected rows is changed and pass the following to_event
:selected: object[]
: List of selected row objects.
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.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
: Array index of the row for the changed cell.
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.
exportDataAsCsv
: When called, table data will be downloaded in csv format.
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
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'
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
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.'
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
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
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'
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
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
- @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.
- 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