npmpackage.info

Gathering detailed insights and metrics for @lowdefy/blocks-aggrid

Other packages similar to @lowdefy/blocks-aggrid

blocks-aggrid-filter

3.23.4

Lowdefy blocks for AgGrid.

@lowdefy/community-plugin-aggrid

1.0.0

Community plugin for AgGrid Blocks for Lowdefy.

@lowdefy/blocks-aggrid

The config web stack for business apps - build internal tools, client portals, web apps, admin panels, dashboards, web sites, and CRUD apps with YAML or JSON.

4.4.0

2,728

NOASSERTION

JavaScript

113.44 kB

21,408 5.5

Installations

npm install @lowdefy/blocks-aggrid

Developer Guide

BETA

Typescript

No

Module System

ESM

Node Version

20.18.1

NPM Version

10.8.2 Score

63.3

Supply Chain

87.9

Quality

87.4

Maintenance

Vulnerability

99.3

License

Pull Requests

Open

8

Total

1,236

Closed

65

Merged

1,163

Issues

Open

31

Total

280

Closed

249

Releases

190

v4.4.0

Published on 06 Dec 2024

v4.3.0

Published on 31 Jul 2024

v4.2.2

Published on 17 Jul 2024

v4.2.1

Published on 04 Jul 2024

v4.1.0

Published on 22 Apr 2024

v4.0.2

Published on 28 Feb 2024

View all 190 releases

Contributors

View all 23 contributors

Languages

JavaScript

HTML

Less

Nunjucks

TypeScript

Shell

Dockerfile

JavaScript (94.77%)

HTML (2.39%)

Less (2.01%)

Nunjucks (0.41%)

TypeScript (0.38%)

Shell (0.02%)

Dockerfile (0.02%)

Developer

lowdefy

Download Statistics

Total Downloads

21,408

Last Day

Last Week

Last Month

380

Last Year

7,425

GitHub Statistics

2,728 Stars

5,836 Commits

163 Forks

29 Watching

47 Branches

23 Contributors

Maintainers

Package Meta Information

Latest Version

4.4.0

Package Id

@lowdefy/blocks-aggrid@4.4.0

Unpacked Size

113.44 kB

Size

12.71 kB

File Count

NPM Version

10.8.2

Node Version

20.18.1

Publised On

06 Dec 2024

Total Downloads

Cumulative downloads

Total Downloads

21,408

Last day

-81.6%

Compared to previous day

Last week

-25.4%

Compared to previous week

Last month

-38.7%

380

Compared to previous month

Last year

-23.2%

7,425

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Versions

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

No vulnerabilities found.

10

Maintained

Determines if the project is "actively maintained".

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Security-Policy

Determines if the project has published a security policy.

10

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

9

License

Determines if the project has defined a license.

9

SAST

Determines if the project uses static code analysis.

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Signed-Releases

Determines if the project cryptographically signs release artifacts.

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

Reason

dependency not pinned by hash detected -- score normalized to 0

Details

Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yaml:16: update your workflow using https://app.stepsecurity.io/secureworkflow/lowdefy/lowdefy/release.yaml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/release.yaml:17: update your workflow using https://app.stepsecurity.io/secureworkflow/lowdefy/lowdefy/release.yaml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yaml:18: update your workflow using https://app.stepsecurity.io/secureworkflow/lowdefy/lowdefy/release.yaml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/release.yaml:34: update your workflow using https://app.stepsecurity.io/secureworkflow/lowdefy/lowdefy/release.yaml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/release.yaml:55: update your workflow using https://app.stepsecurity.io/secureworkflow/lowdefy/lowdefy/release.yaml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test-branches.yml:20: update your workflow using https://app.stepsecurity.io/secureworkflow/lowdefy/lowdefy/test-branches.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/test-branches.yml:21: update your workflow using https://app.stepsecurity.io/secureworkflow/lowdefy/lowdefy/test-branches.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test-branches.yml:22: update your workflow using https://app.stepsecurity.io/secureworkflow/lowdefy/lowdefy/test-branches.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/test-branches.yml:29: update your workflow using https://app.stepsecurity.io/secureworkflow/lowdefy/lowdefy/test-branches.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test-pulls.yml:18: update your workflow using https://app.stepsecurity.io/secureworkflow/lowdefy/lowdefy/test-pulls.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/test-pulls.yml:19: update your workflow using https://app.stepsecurity.io/secureworkflow/lowdefy/lowdefy/test-pulls.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test-pulls.yml:20: update your workflow using https://app.stepsecurity.io/secureworkflow/lowdefy/lowdefy/test-pulls.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/test-pulls.yml:27: update your workflow using https://app.stepsecurity.io/secureworkflow/lowdefy/lowdefy/test-pulls.yml/main?enable=pin
Warn: containerImage not pinned by hash: packages/cli/src/commands/init-docker/Dockerfile:1
Warn: containerImage not pinned by hash: packages/cli/src/commands/init-docker/Dockerfile:15
Info: 0 out of 6 GitHub-owned GitHubAction dependencies pinned
Info: 0 out of 7 third-party GitHubAction dependencies pinned
Info: 0 out of 2 containerImage dependencies pinned

0

Fuzzing

Determines if the project uses fuzzing.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

5.5

/10

Last Scanned on 2025-01-20

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to @lowdefy/blocks-aggrid

@lowdefy/blocks-aggrid

Installations

Developer Guide

No

ESM

20.18.1

10.8.2

Score

Pull Requests

8

1,236

65

1,163

Issues

31

280

249

Releases

Contributors

Languages

Developer

Download Statistics

GitHub Statistics

Maintainers

Package Meta Information

Total Downloads

21,408

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Dev Dependencies

Lowdefy Blocks for Ag-Grid

Blocks

Block types

Events

All Blocks

Input Blocks

Methods

AgGridAlpine Example

AgGridAlpine valueFormatter: _function Example

AgGridAlpine onRowClick Example

AgGridAlpine onCellClick Example

AgGridAlpine onRowSelected Example

AgGridAlpine onSelectionChanged Example

AgGridAlpine editable cells Example

AgGridInputAlpine onRowDragMove Example

AgGridInputAlpine editable cells Example

10

10

10

10

10

9

9

0

0

0

0

0

0

5.5

/10