Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

lowdefy/blocks-aggrid

BranchesTags
Open more actions menu

Repository files navigation

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:

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

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

AgGridAlpine valueFormatter: _function Example

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'

AgGridAlpine onRowClick Example

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

AgGridAlpine onCellClick Example

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

AgGridAlpine onRowSelected Example

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

AgGridAlpine onSelectionChanged Example

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

AgGridAlpine editable cells Example

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'

AgGridInputAlpine onRowDragMove Example

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

AgGridInputAlpine editable cells Example

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

Other Lowdefy Blocks Packages

More Lowdefy resources

Licence

Apache-2.0

About

Lowdefy blocks for AgGrid.

lowdefy.com

Topics

ag-grid ag-grid-react lowdefy lowdefy-blocks

Resources

Readme

License

Apache-2.0 license
Activity
Custom properties

Stars

13 stars

Watchers

2 watching

Forks

5 forks
Report repository

Releases 7

v3.23.4 Latest
Apr 8, 2022
+ 6 releases

Contributors 3

  •  
  •  
  •  

Languages
Morty Proxy This is a proxified and sanitized view of the page, visit original site.