@gridnexa/angular 0.0.1 → 0.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +64 -5
- package/package.json +44 -11
package/README.md
CHANGED
|
@@ -1,10 +1,33 @@
|
|
|
1
1
|
# @gridnexa/angular
|
|
2
2
|
|
|
3
|
-
Angular
|
|
3
|
+
Enterprise Angular data grid for modern UI products that need spreadsheet-grade power without giving up product polish.
|
|
4
|
+
|
|
5
|
+
GridNexa is built for React, Angular, Vue, and JavaScript teams. The Angular package gives you a native Angular grid with typed columns, row selection, row numbers, sorting, filtering, advanced filters, formulas, inline editing, grouped headers, grouping, pivoting, tree data, master/detail, CSV export, Excel export, and theme-ready UI.
|
|
6
|
+
|
|
7
|
+
## Install
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
npm install @gridnexa/angular
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
```bash
|
|
14
|
+
pnpm add @gridnexa/angular
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
## Usage
|
|
4
18
|
|
|
5
19
|
```ts
|
|
6
20
|
import { Component } from "@angular/core";
|
|
7
|
-
import { GridNexaAngularComponent } from "@gridnexa/angular";
|
|
21
|
+
import { GridNexaAngularComponent, type Column } from "@gridnexa/angular";
|
|
22
|
+
|
|
23
|
+
interface Employee {
|
|
24
|
+
id: number;
|
|
25
|
+
name: string;
|
|
26
|
+
department: string;
|
|
27
|
+
city: string;
|
|
28
|
+
score: number;
|
|
29
|
+
adjustedScore: string;
|
|
30
|
+
}
|
|
8
31
|
|
|
9
32
|
@Component({
|
|
10
33
|
selector: "app-root",
|
|
@@ -16,16 +39,52 @@ import { GridNexaAngularComponent } from "@gridnexa/angular";
|
|
|
16
39
|
[rows]="rows"
|
|
17
40
|
[rowNumbers]="true"
|
|
18
41
|
[checkboxSelection]="true"
|
|
42
|
+
[enableFillHandle]="true"
|
|
43
|
+
[enableUndoRedo]="true"
|
|
44
|
+
[pageSize]="20"
|
|
45
|
+
[getRowId]="getRowId"
|
|
19
46
|
(rowSelectionChange)="onSelection($event)"
|
|
47
|
+
(cellValueChange)="onCellValueChange($event)"
|
|
20
48
|
/>
|
|
21
49
|
`,
|
|
22
50
|
})
|
|
23
51
|
export class AppComponent {
|
|
24
|
-
columns =
|
|
25
|
-
|
|
52
|
+
columns: Column<Employee>[] = [
|
|
53
|
+
{ id: "name", field: "name", headerName: "Name", sortable: true, filter: "text", editable: true },
|
|
54
|
+
{ id: "department", field: "department", headerName: "Department", filter: "set" },
|
|
55
|
+
{ id: "score", field: "score", headerName: "Score", filter: "number", editable: true },
|
|
56
|
+
{ id: "adjustedScore", field: "adjustedScore", headerName: "Adjusted" },
|
|
57
|
+
];
|
|
26
58
|
|
|
27
|
-
|
|
59
|
+
rows: Employee[] = [
|
|
60
|
+
{ id: 1, name: "John Carter", department: "Operations", city: "London", score: 92, adjustedScore: "=score * 1.05" },
|
|
61
|
+
{ id: 2, name: "Alice Moreau", department: "Product", city: "Paris", score: 87, adjustedScore: "=score * 1.05" },
|
|
62
|
+
];
|
|
63
|
+
|
|
64
|
+
getRowId = (row: Employee) => row.id;
|
|
65
|
+
|
|
66
|
+
onSelection(rows: Employee[]) {
|
|
28
67
|
console.log(rows);
|
|
29
68
|
}
|
|
69
|
+
|
|
70
|
+
onCellValueChange(event: unknown) {
|
|
71
|
+
console.log(event);
|
|
72
|
+
}
|
|
30
73
|
}
|
|
31
74
|
```
|
|
75
|
+
|
|
76
|
+
## Features
|
|
77
|
+
|
|
78
|
+
- Native Angular data grid with TypeScript column models
|
|
79
|
+
- Excel-style features: formulas, fill, copy/paste, undo/redo, find, CSV export, and Excel export
|
|
80
|
+
- Filtering: column filters, quick filter, external filter, and advanced filter model
|
|
81
|
+
- Data modeling: grouping, pivoting, tree data indentation, master/detail, and transactions
|
|
82
|
+
- Grid UX: row selection, row numbers, pagination, status output, and tools panel
|
|
83
|
+
- Columns: merged headers, column visibility tools, column reorder, and row reorder
|
|
84
|
+
- Events: row selection, cell value changes, pivot model changes, advanced filter changes, and server-side operation events
|
|
85
|
+
|
|
86
|
+
## Links
|
|
87
|
+
|
|
88
|
+
- Website: https://www.gridnexa.in/
|
|
89
|
+
- Help: https://www.gridnexa.in/help
|
|
90
|
+
- Repository: https://github.com/mhalungekar9/SmartGrid
|
package/package.json
CHANGED
|
@@ -1,37 +1,70 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gridnexa/angular",
|
|
3
|
-
"version": "0.0.
|
|
4
|
-
"description": "Angular
|
|
3
|
+
"version": "0.0.2",
|
|
4
|
+
"description": "Enterprise Angular data grid for modern UI apps with Excel-like filtering, editing, formulas, grouping, pivoting, export, and native Angular UX.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.js",
|
|
7
7
|
"module": "./dist/index.js",
|
|
8
8
|
"types": "./dist/index.d.ts",
|
|
9
|
+
"exports": {
|
|
10
|
+
".": {
|
|
11
|
+
"types": "./dist/index.d.ts",
|
|
12
|
+
"import": "./dist/index.js",
|
|
13
|
+
"require": "./dist/index.cjs"
|
|
14
|
+
}
|
|
15
|
+
},
|
|
9
16
|
"files": [
|
|
10
|
-
"dist"
|
|
17
|
+
"dist",
|
|
18
|
+
"README.md"
|
|
11
19
|
],
|
|
12
|
-
"scripts": {
|
|
13
|
-
"build": "tsup src/index.ts --format esm,cjs --dts --external @angular/core",
|
|
14
|
-
"dev": "tsup src/index.ts --watch --external @angular/core",
|
|
15
|
-
"clean": "rimraf dist"
|
|
16
|
-
},
|
|
17
20
|
"keywords": [
|
|
18
21
|
"gridnexa",
|
|
22
|
+
"angular-grid",
|
|
23
|
+
"angular-data-grid",
|
|
19
24
|
"angular",
|
|
20
25
|
"data-grid",
|
|
26
|
+
"datagrid",
|
|
27
|
+
"enterprise-grid",
|
|
28
|
+
"excel-grid",
|
|
29
|
+
"spreadsheet",
|
|
21
30
|
"table",
|
|
22
|
-
"
|
|
31
|
+
"pivot-table",
|
|
32
|
+
"tree-grid",
|
|
33
|
+
"filtering",
|
|
34
|
+
"sorting",
|
|
35
|
+
"editable-grid",
|
|
36
|
+
"csv-export",
|
|
37
|
+
"excel-export",
|
|
38
|
+
"typescript"
|
|
23
39
|
],
|
|
40
|
+
"homepage": "https://www.gridnexa.in/",
|
|
41
|
+
"bugs": {
|
|
42
|
+
"url": "https://www.gridnexa.in/help"
|
|
43
|
+
},
|
|
44
|
+
"repository": {
|
|
45
|
+
"type": "git",
|
|
46
|
+
"url": "git+https://github.com/mhalungekar9/SmartGrid.git",
|
|
47
|
+
"directory": "packages/angular"
|
|
48
|
+
},
|
|
24
49
|
"author": "Sachin M",
|
|
25
50
|
"license": "MIT",
|
|
51
|
+
"publishConfig": {
|
|
52
|
+
"access": "public"
|
|
53
|
+
},
|
|
26
54
|
"peerDependencies": {
|
|
27
55
|
"@angular/core": ">=16"
|
|
28
56
|
},
|
|
29
57
|
"dependencies": {
|
|
30
|
-
"@gridnexa/core": "
|
|
58
|
+
"@gridnexa/core": "^0.0.2"
|
|
31
59
|
},
|
|
32
60
|
"devDependencies": {
|
|
33
61
|
"rimraf": "^6.1.3",
|
|
34
62
|
"tsup": "^8.5.1",
|
|
35
63
|
"typescript": "^5.9.3"
|
|
64
|
+
},
|
|
65
|
+
"scripts": {
|
|
66
|
+
"build": "tsup src/index.ts --format esm,cjs --dts --external @angular/core",
|
|
67
|
+
"dev": "tsup src/index.ts --watch --external @angular/core",
|
|
68
|
+
"clean": "rimraf dist"
|
|
36
69
|
}
|
|
37
|
-
}
|
|
70
|
+
}
|