ngx-deebodata-community 0.0.1
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
ADDED
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
# NgxDeebodataCommunity
|
|
2
|
+
|
|
3
|
+
## Usage
|
|
4
|
+
|
|
5
|
+
**In the .ts component you want to use the data grid in**
|
|
6
|
+
|
|
7
|
+
import { NgxDeebodataCommunity } from 'ngx-deebodata-community';
|
|
8
|
+
|
|
9
|
+
@Component({
|
|
10
|
+
selector: 'app-your-component',
|
|
11
|
+
imports: [ NgxDeebodataCommunity ],
|
|
12
|
+
templateUrl: './your-component.html',
|
|
13
|
+
styleUrl: './your-component.css'
|
|
14
|
+
})
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
**In the template of the component**
|
|
18
|
+
|
|
19
|
+
```
|
|
20
|
+
@if(signalArrayOfObjects().length){<!--set signalArrayOfObjects ONCE per app lifecycle-->
|
|
21
|
+
<ngx-deebodata-community
|
|
22
|
+
[editable]="true"
|
|
23
|
+
[rowNumbers]="true"
|
|
24
|
+
[data]="signalArrayOfObjects()"
|
|
25
|
+
[color1]="'navy'"
|
|
26
|
+
[color2]="'lightblue'"
|
|
27
|
+
[primaryKey]="'employee_id'"
|
|
28
|
+
[defRowHgt]="'50px'"
|
|
29
|
+
[defGridHgt]="500"
|
|
30
|
+
[altRowColor]="'#ececec'"
|
|
31
|
+
></ngx-deebodata-community>
|
|
32
|
+
}
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
**Pass valid CSS or hex colors to color1, color2, & altRowColor**
|
|
36
|
+
**Always pass a px value to defRowHgt like '50px'.**
|
|
37
|
+
|
|
38
|
+
|
|
39
|
+
**To pass Column Symbols (Numeric columns only)**
|
|
40
|
+
|
|
41
|
+
- In the .ts component you want to use the data grid in
|
|
42
|
+
|
|
43
|
+
import { ColumnSymbol, NgxDeebodataCommunity } from 'ngx-deebodata-community';
|
|
44
|
+
|
|
45
|
+
- in the exported class
|
|
46
|
+
|
|
47
|
+
symbols: ColumnSymbol[] = [{ column: "salary", symbol: "$" }];
|
|
48
|
+
|
|
49
|
+
- In the template of the component
|
|
50
|
+
|
|
51
|
+
```
|
|
52
|
+
@if(signalArrayOfObjects().length){<!--set signalArrayOfObjects ONCE per app lifecycle-->
|
|
53
|
+
<ngx-deebodata-community
|
|
54
|
+
[data]="signalArrayOfObjects()"
|
|
55
|
+
[myColumnSymbols]="symbols"
|
|
56
|
+
></ngx-deebodata-community>
|
|
57
|
+
}
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
|
|
61
|
+
**To Hook Cell Edits**
|
|
62
|
+
|
|
63
|
+
- In the .ts component you want to use the data grid in
|
|
64
|
+
|
|
65
|
+
import { CellEdit, NgxDeebodataCommunity } from 'ngx-deebodata-community';
|
|
66
|
+
|
|
67
|
+
- in the exported class
|
|
68
|
+
|
|
69
|
+
handleCellEdit(event: CellEdit) {//executes on cell edit if editable isn't false
|
|
70
|
+
/*CellEdit interface -> { value: any; row: any; column: string; }
|
|
71
|
+
row will either be the index of the edited cell in the initial data set
|
|
72
|
+
or, if a primaryKey is passed or detected, it will be the value of that
|
|
73
|
+
primaryKey for the edited row*/
|
|
74
|
+
// console.log(event)
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
- In the template of the component
|
|
78
|
+
|
|
79
|
+
```
|
|
80
|
+
@if(signalArrayOfObjects().length){<!--set signalArrayOfObjects ONCE per app lifecycle-->
|
|
81
|
+
<ngx-deebodata-community
|
|
82
|
+
[data]="signalArrayOfObjects()"
|
|
83
|
+
(cellEdit)="handleCellEdit($event)"
|
|
84
|
+
></ngx-deebodata-community>
|
|
85
|
+
}
|
|
86
|
+
```
|