Skip to content

Commit b5ce35c

Browse files
spike-rabbitspike-rabbit
committed
docs: use row related types in examples
1 parent 280d306 commit b5ce35c

File tree

59 files changed

+263
-192
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

59 files changed

+263
-192
lines changed

‎src/app/basic/basic-auto.component.ts

+4-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import { Component } from '@angular/core';
22
import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
3+
import { Employee } from "../data.model";
4+
import { TableColumn } from "@siemens/ngx-datatable";
35

46
@Component({
57
selector: 'basic-auto-demo',
@@ -32,11 +34,11 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
3234
`
3335
})
3436
export class BasicAutoComponent {
35-
rows = [];
37+
rows: Employee[] = [];
3638
loadingIndicator = true;
3739
reorderable = true;
3840

39-
columns = [{ prop: 'name' }, { name: 'Gender' }, { name: 'Company', sortable: false }];
41+
columns: TableColumn[] = [{ prop: 'name' }, { name: 'Gender' }, { name: 'Company', sortable: false }];
4042

4143
ColumnMode = ColumnMode;
4244

‎src/app/basic/basic-fixed.component.ts

+4-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import { Component } from '@angular/core';
22
import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
3+
import { Employee } from "../data.model";
4+
import { TableColumn } from "@siemens/ngx-datatable";
35

46
@Component({
57
selector: 'basic-fixed-demo',
@@ -30,8 +32,8 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
3032
`
3133
})
3234
export class BasicFixedComponent {
33-
rows = [];
34-
columns = [{ prop: 'name' }, { name: 'Company' }, { name: 'Gender' }];
35+
rows: Employee[] = [];
36+
columns: TableColumn[] = [{ prop: 'name' }, { name: 'Company' }, { name: 'Gender' }];
3537

3638
ColumnMode = ColumnMode;
3739

‎src/app/basic/bootstrap.component.ts

+4-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import { Component } from '@angular/core';
22
import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
3+
import { Employee } from "../data.model";
4+
import { TableColumn } from "@siemens/ngx-datatable";
35

46
@Component({
57
selector: 'basic-bootstrap-theme-demo',
@@ -35,11 +37,11 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
3537
`
3638
})
3739
export class BootstrapThemeComponent {
38-
rows = [];
40+
rows: Employee[] = [];
3941
loadingIndicator = true;
4042
reorderable = true;
4143

42-
columns = [
44+
columns: TableColumn[] = [
4345
{ prop: 'name', summaryFunc: () => null },
4446
{ name: 'Gender', summaryFunc: cells => this.summaryForGender(cells) },
4547
{ name: 'Company', summaryFunc: () => null }

‎src/app/basic/contextmenu.component.ts

+4-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import { Component } from '@angular/core';
22
import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
3+
import { Employee } from "../data.model";
4+
import { TableColumn } from "@siemens/ngx-datatable";
35

46
@Component({
57
selector: 'contextmenu-demo',
@@ -44,9 +46,9 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
4446
`
4547
})
4648
export class ContextMenuDemoComponent {
47-
rows = [];
49+
rows: Employee[] = [];
4850

49-
columns = [{ prop: 'name' }, { name: 'Gender' }, { name: 'Company' }];
51+
columns: TableColumn[] = [{ prop: 'name' }, { name: 'Gender' }, { name: 'Company' }];
5052

5153
rawEvent: any;
5254
contextmenuRow: any;

‎src/app/basic/css.component.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { Component } from '@angular/core';
22
import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
3+
import { FullEmployee } from "../data.model";
34

45
@Component({
56
selector: 'row-css-demo',
@@ -33,9 +34,8 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
3334
`
3435
})
3536
export class RowCssComponent {
36-
rows = [];
37+
rows: FullEmployee[] = [];
3738
expanded = {};
38-
timeout: any;
3939

4040
ColumnMode = ColumnMode;
4141

‎src/app/basic/dark-theme.component.ts

+4-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import { Component } from '@angular/core';
22
import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
3+
import { Employee } from "../data.model";
4+
import { TableColumn } from "@siemens/ngx-datatable";
35

46
@Component({
57
selector: 'basic-dark-theme-demo',
@@ -34,11 +36,11 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
3436
`
3537
})
3638
export class DarkThemeComponent {
37-
rows = [];
39+
rows: Employee[] = [];
3840
loadingIndicator = true;
3941
reorderable = true;
4042

41-
columns = [
43+
columns: TableColumn[] = [
4244
{ prop: 'name', summaryFunc: () => null },
4345
{ name: 'Gender', summaryFunc: cells => this.summaryForGender(cells) },
4446
{ name: 'Company', summaryFunc: () => null }

‎src/app/basic/disabled-rows.component.ts

+7-9
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import { Component } from '@angular/core';
22
import { ColumnMode, SelectionType } from 'projects/ngx-datatable/src/public-api';
3+
import { FullEmployee } from "../data.model";
4+
import { BehaviorSubject } from "rxjs";
35

46
@Component({
57
selector: 'disabled-rows-demo',
@@ -60,7 +62,7 @@ import { ColumnMode, SelectionType } from 'projects/ngx-datatable/src/public-api
6062
`
6163
})
6264
export class DisabledRowsComponent {
63-
rows = [];
65+
rows: (FullEmployee & {isDisabled?: boolean}) [] = [];
6466

6567
ColumnMode = ColumnMode;
6668
SelectionType = SelectionType;
@@ -82,21 +84,17 @@ export class DisabledRowsComponent {
8284
req.send();
8385
}
8486

85-
isRowDisabled(row: any) {
86-
if (!row.isDisabled && row.age < 40) {
87-
return false;
88-
} else {
89-
return true;
90-
}
87+
isRowDisabled(row: FullEmployee & {isDisabled: boolean}) {
88+
return !(!row.isDisabled && row.age < 40);
9189
}
9290

93-
disableRow(rowIndex, disableRow$) {
91+
disableRow(rowIndex: number, disableRow$: BehaviorSubject<boolean>) {
9492
this.rows[rowIndex].isDisabled = true;
9593
this.rows = [...this.rows];
9694
disableRow$.next(true);
9795
}
9896

99-
updateValue(event, cell, rowIndex, disableRow$) {
97+
updateValue(event, cell, rowIndex: number, disableRow$: BehaviorSubject<boolean>) {
10098
this.rows[rowIndex][cell] = event.target.value;
10199
this.rows = [...this.rows];
102100
if (disableRow$ && cell === 'age' && this.rows[rowIndex][cell] > 40) {

‎src/app/basic/dynamic-height.component.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { Component } from '@angular/core';
22
import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
3+
import { FullEmployee } from "../data.model";
34

45
@Component({
56
selector: 'dynamic-height-demo',
@@ -33,7 +34,7 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
3334
`
3435
})
3536
export class DynamicHeightComponent {
36-
rows = [];
37+
rows: FullEmployee[] = [];
3738
expanded = {};
3839
timeout: any;
3940

‎src/app/basic/empty.component.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { Component } from '@angular/core';
22
import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
3+
import { TableColumn } from "@siemens/ngx-datatable";
34

45
@Component({
56
selector: 'empty-demo',
@@ -30,6 +31,6 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
3031
`
3132
})
3233
export class BasicEmptyComponent {
33-
columns = [{ prop: 'name' }, { name: 'Gender' }, { name: 'Company', sortable: false }];
34+
columns: TableColumn[] = [{ prop: 'name' }, { name: 'Gender' }, { name: 'Company', sortable: false }];
3435
ColumnMode = ColumnMode;
3536
}

‎src/app/basic/filter.component.ts

+8-9
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import { Component, ViewChild } from '@angular/core';
22
import { DatatableComponent } from '../../../projects/ngx-datatable/src/lib/components/datatable.component';
33
import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
4+
import { Employee } from "../data.model";
5+
import { TableColumn } from "@siemens/ngx-datatable";
46

57
@Component({
68
selector: 'filter-demo',
@@ -39,12 +41,12 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
3941
`
4042
})
4143
export class FilterBarComponent {
42-
rows = [];
44+
rows: Employee[] = [];
4345

44-
temp = [];
46+
temp: Employee[] = [];
4547

46-
columns = [{ prop: 'name' }, { name: 'Company' }, { name: 'Gender' }];
47-
@ViewChild(DatatableComponent) table: DatatableComponent;
48+
columns: TableColumn[] = [{ prop: 'name' }, { name: 'Company' }, { name: 'Gender' }];
49+
@ViewChild(DatatableComponent) table: DatatableComponent<Employee>;
4850

4951
ColumnMode = ColumnMode;
5052

@@ -72,13 +74,10 @@ export class FilterBarComponent {
7274
updateFilter(event) {
7375
const val = event.target.value.toLowerCase();
7476

75-
// filter our data
76-
const temp = this.temp.filter(function(d) {
77+
// filter our data and update the rows
78+
this.rows = this.temp.filter(function (d) {
7779
return d.name.toLowerCase().indexOf(val) !== -1 || !val;
7880
});
79-
80-
// update the rows
81-
this.rows = temp;
8281
// Whenever the filter changes, always go back to the first page
8382
this.table.offset = 0;
8483
}

‎src/app/basic/footer.component.ts

+4-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import { Component } from '@angular/core';
22
import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
3+
import { Employee } from "../data.model";
4+
import { TableColumn } from "@siemens/ngx-datatable";
35

46
@Component({
57
selector: 'footer-demo',
@@ -46,9 +48,9 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
4648
`
4749
})
4850
export class FooterDemoComponent {
49-
rows = [];
51+
rows: Employee[] = [];
5052

51-
columns = [{ prop: 'name' }, { name: 'Gender' }, { name: 'Company' }];
53+
columns: TableColumn[] = [{ prop: 'name' }, { name: 'Gender' }, { name: 'Company' }];
5254

5355
ColumnMode = ColumnMode;
5456

‎src/app/basic/fullscreen.component.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { Component } from '@angular/core';
22
import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
3+
import { FullEmployee } from "../data.model";
34

45
@Component({
56
selector: 'full-screen-demo',
@@ -38,7 +39,7 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
3839
`
3940
})
4041
export class FullScreenComponent {
41-
rows = [];
42+
rows: FullEmployee[] = [];
4243

4344
ColumnMode = ColumnMode;
4445

‎src/app/basic/inline.component.ts

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { Component } from '@angular/core';
22
import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
3+
import { Employee } from "../data.model";
34

45
@Component({
56
selector: 'inline-edit-demo',
@@ -75,7 +76,7 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
7576
})
7677
export class InlineEditComponent {
7778
editing = {};
78-
rows = [];
79+
rows: Employee[] = [];
7980

8081
ColumnMode = ColumnMode;
8182

@@ -96,7 +97,7 @@ export class InlineEditComponent {
9697
req.send();
9798
}
9899

99-
updateValue(event, cell, rowIndex) {
100+
updateValue(event, cell, rowIndex: number) {
100101
console.log('inline editing rowIndex', rowIndex);
101102
this.editing[rowIndex + '-' + cell] = false;
102103
this.rows[rowIndex][cell] = event.target.value;

‎src/app/basic/live.component.ts

+6-4
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import { ChangeDetectorRef, Component, ViewChild } from '@angular/core';
22
import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
3+
import { Employee } from "../data.model";
4+
import { DatatableComponent } from "@siemens/ngx-datatable";
35

46
@Component({
57
selector: 'live-data-demo',
@@ -41,13 +43,13 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
4143
`
4244
})
4345
export class LiveDataComponent {
44-
@ViewChild('mydatatable') mydatatable: any;
46+
@ViewChild('mydatatable') mydatatable: DatatableComponent<Employee & {updated: string}>;
4547

4648
count = 50;
47-
rows: any[] = [];
49+
rows: (Employee & {updated: string})[] = [];
4850
active = true;
49-
temp: any[] = [];
50-
cols: any = ['name', 'gender', 'company'];
51+
temp: (Employee & {updated: string})[] = [];
52+
cols = ['name', 'gender', 'company'];
5153

5254
ColumnMode = ColumnMode;
5355

‎src/app/basic/multiple.component.ts

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { Component } from '@angular/core';
22
import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
3+
import { TableColumn } from "@siemens/ngx-datatable";
34

45
@Component({
56
selector: 'multiple-tables-demo',
@@ -40,9 +41,9 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
4041
`
4142
})
4243
export class MultipleTablesComponent {
43-
columns1 = [{ prop: 'name' }, { name: 'Gender' }, { name: 'Company' }];
44+
columns1: TableColumn[] = [{ prop: 'name' }, { name: 'Gender' }, { name: 'Company' }];
4445

45-
columns2 = [{ prop: 'name', name: 'Name' }, { name: 'Gender' }];
46+
columns2: TableColumn[] = [{ prop: 'name', name: 'Name' }, { name: 'Gender' }];
4647

4748
rows1 = [
4849
{ name: 'Larry', gender: 'Male', company: 'Cisco' },

‎src/app/basic/responsive.component.ts

+4-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import { Component, ViewChild, ViewEncapsulation } from '@angular/core';
22
import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
3+
import { FullEmployee } from "../data.model";
4+
import { DatatableComponent } from "@siemens/ngx-datatable";
35

46
@Component({
57
selector: 'responsive-demo',
@@ -115,9 +117,9 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
115117
encapsulation: ViewEncapsulation.None
116118
})
117119
export class ResponsiveComponent {
118-
@ViewChild('myTable') table: any;
120+
@ViewChild('myTable') table: DatatableComponent<FullEmployee>;
119121

120-
rows: any[] = [];
122+
rows: FullEmployee[] = [];
121123
expanded: any = {};
122124
timeout: any;
123125

‎src/app/basic/row-detail.component.ts

+4-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import { Component, ViewChild, ViewEncapsulation } from '@angular/core';
22
import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
3+
import { FullEmployee } from "../data.model";
4+
import { DatatableComponent } from "@siemens/ngx-datatable";
35

46
@Component({
57
selector: 'row-details-demo',
@@ -89,9 +91,9 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
8991
encapsulation: ViewEncapsulation.None
9092
})
9193
export class RowDetailsComponent {
92-
@ViewChild('myTable') table: any;
94+
@ViewChild('myTable') table: DatatableComponent<FullEmployee>;
9395

94-
rows: any[] = [];
96+
rows: FullEmployee[] = [];
9597
expanded: any = {};
9698
timeout: any;
9799

0 commit comments

Comments
 (0)