ngx-deebodata-community 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 +25 -20
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -4,6 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
**In the .ts component you want to use the data grid in**
|
|
6
6
|
|
|
7
|
+
```
|
|
7
8
|
import { NgxDeebodataCommunity } from 'ngx-deebodata-community';
|
|
8
9
|
|
|
9
10
|
@Component({
|
|
@@ -12,24 +13,22 @@ import { NgxDeebodataCommunity } from 'ngx-deebodata-community';
|
|
|
12
13
|
templateUrl: './your-component.html',
|
|
13
14
|
styleUrl: './your-component.css'
|
|
14
15
|
})
|
|
15
|
-
|
|
16
|
+
```
|
|
16
17
|
|
|
17
18
|
**In the template of the component**
|
|
18
19
|
|
|
19
20
|
```
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
></ngx-deebodata-community>
|
|
32
|
-
}
|
|
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>
|
|
33
32
|
```
|
|
34
33
|
|
|
35
34
|
**Pass valid CSS or hex colors to color1, color2, & altRowColor**
|
|
@@ -40,21 +39,23 @@ import { NgxDeebodataCommunity } from 'ngx-deebodata-community';
|
|
|
40
39
|
|
|
41
40
|
- In the .ts component you want to use the data grid in
|
|
42
41
|
|
|
42
|
+
```
|
|
43
43
|
import { ColumnSymbol, NgxDeebodataCommunity } from 'ngx-deebodata-community';
|
|
44
|
+
```
|
|
44
45
|
|
|
45
46
|
- in the exported class
|
|
46
47
|
|
|
48
|
+
```
|
|
47
49
|
symbols: ColumnSymbol[] = [{ column: "salary", symbol: "$" }];
|
|
50
|
+
```
|
|
48
51
|
|
|
49
52
|
- In the template of the component
|
|
50
53
|
|
|
51
54
|
```
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
></ngx-deebodata-community>
|
|
57
|
-
}
|
|
55
|
+
<ngx-deebodata-community
|
|
56
|
+
[data]="signalArrayOfObjects()"
|
|
57
|
+
[myColumnSymbols]="symbols"
|
|
58
|
+
></ngx-deebodata-community>
|
|
58
59
|
```
|
|
59
60
|
|
|
60
61
|
|
|
@@ -62,10 +63,13 @@ symbols: ColumnSymbol[] = [{ column: "salary", symbol: "$" }];
|
|
|
62
63
|
|
|
63
64
|
- In the .ts component you want to use the data grid in
|
|
64
65
|
|
|
66
|
+
```
|
|
65
67
|
import { CellEdit, NgxDeebodataCommunity } from 'ngx-deebodata-community';
|
|
68
|
+
```
|
|
66
69
|
|
|
67
70
|
- in the exported class
|
|
68
71
|
|
|
72
|
+
```
|
|
69
73
|
handleCellEdit(event: CellEdit) {//executes on cell edit if editable isn't false
|
|
70
74
|
/*CellEdit interface -> { value: any; row: any; column: string; }
|
|
71
75
|
row will either be the index of the edited cell in the initial data set
|
|
@@ -73,6 +77,7 @@ handleCellEdit(event: CellEdit) {//executes on cell edit if editable isn't false
|
|
|
73
77
|
primaryKey for the edited row*/
|
|
74
78
|
// console.log(event)
|
|
75
79
|
}
|
|
80
|
+
```
|
|
76
81
|
|
|
77
82
|
- In the template of the component
|
|
78
83
|
|