@lowdefy/blocks-aggrid
Advanced tools
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 availible ag-gird block types are:
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.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.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.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
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'
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.year
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.'
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_selected
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_selected
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'
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: true
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
FAQs
AgGrid Blocks for Lowdefy.
The npm package @lowdefy/blocks-aggrid receives a total of 117 weekly downloads. As such, @lowdefy/blocks-aggrid popularity was classified as not popular.
We found that @lowdefy/blocks-aggrid demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Create React App is officially deprecated due to React 19 issues and lack of maintenance—developers should switch to Vite or other modern alternatives.
Security News
Oracle seeks to dismiss fraud claims in the JavaScript trademark dispute, delaying the case and avoiding questions about its right to the name.
Security News
The Linux Foundation is warning open source developers that compliance with global sanctions is mandatory, highlighting legal risks and restrictions on contributions.