Skip to content

Commit 80568eb

Browse files
spike-rabbittimowolf
spike-rabbit
authored and
timowolf
committed
docs: use row related types in examples
1 parent 719ad57 commit 80568eb

File tree

59 files changed

+264
-223
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

+264
-223
lines changed

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

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

45
@Component({
56
selector: 'basic-auto-demo',
@@ -32,11 +33,11 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
3233
`
3334
})
3435
export class BasicAutoComponent {
35-
rows = [];
36+
rows: Employee[] = [];
3637
loadingIndicator = true;
3738
reorderable = true;
3839

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

4142
ColumnMode = ColumnMode;
4243

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

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

45
@Component({
56
selector: 'basic-fixed-demo',
@@ -30,8 +31,8 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
3031
`
3132
})
3233
export class BasicFixedComponent {
33-
rows = [];
34-
columns = [{ prop: 'name' }, { name: 'Company' }, { name: 'Gender' }];
34+
rows: Employee[] = [];
35+
columns: TableColumn[] = [{ prop: 'name' }, { name: 'Company' }, { name: 'Gender' }];
3536

3637
ColumnMode = ColumnMode;
3738

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

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

45
@Component({
56
selector: 'basic-bootstrap-theme-demo',
@@ -35,11 +36,11 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
3536
`
3637
})
3738
export class BootstrapThemeComponent {
38-
rows = [];
39+
rows: Employee[] = [];
3940
loadingIndicator = true;
4041
reorderable = true;
4142

42-
columns = [
43+
columns: TableColumn[] = [
4344
{ prop: 'name', summaryFunc: () => null },
4445
{ name: 'Gender', summaryFunc: cells => this.summaryForGender(cells) },
4546
{ name: 'Company', summaryFunc: () => null }

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

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

45
@Component({
56
selector: 'contextmenu-demo',
@@ -44,9 +45,9 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
4445
`
4546
})
4647
export class ContextMenuDemoComponent {
47-
rows = [];
48+
rows: Employee[] = [];
4849

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

5152
rawEvent: any;
5253
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-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { Component } from '@angular/core';
2-
import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
2+
import { ColumnMode, TableColumn } from 'projects/ngx-datatable/src/public-api';
3+
import { Employee } from "../data.model";
34

45
@Component({
56
selector: 'basic-dark-theme-demo',
@@ -34,11 +35,11 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
3435
`
3536
})
3637
export class DarkThemeComponent {
37-
rows = [];
38+
rows: Employee[] = [];
3839
loadingIndicator = true;
3940
reorderable = true;
4041

41-
columns = [
42+
columns: TableColumn[] = [
4243
{ prop: 'name', summaryFunc: () => null },
4344
{ name: 'Gender', summaryFunc: cells => this.summaryForGender(cells) },
4445
{ 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-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Component } from '@angular/core';
2-
import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
2+
import { ColumnMode, TableColumn } from 'projects/ngx-datatable/src/public-api';
33

44
@Component({
55
selector: 'empty-demo',
@@ -30,6 +30,6 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
3030
`
3131
})
3232
export class BasicEmptyComponent {
33-
columns = [{ prop: 'name' }, { name: 'Gender' }, { name: 'Company', sortable: false }];
33+
columns: TableColumn[] = [{ prop: 'name' }, { name: 'Gender' }, { name: 'Company', sortable: false }];
3434
ColumnMode = ColumnMode;
3535
}

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

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

56
@Component({
67
selector: 'filter-demo',
@@ -39,12 +40,12 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
3940
`
4041
})
4142
export class FilterBarComponent {
42-
rows = [];
43+
rows: Employee[] = [];
4344

44-
temp = [];
45+
temp: Employee[] = [];
4546

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

4950
ColumnMode = ColumnMode;
5051

@@ -72,13 +73,10 @@ export class FilterBarComponent {
7273
updateFilter(event) {
7374
const val = event.target.value.toLowerCase();
7475

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

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

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

45
@Component({
56
selector: 'footer-demo',
@@ -46,9 +47,9 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
4647
`
4748
})
4849
export class FooterDemoComponent {
49-
rows = [];
50+
rows: Employee[] = [];
5051

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

5354
ColumnMode = ColumnMode;
5455

‎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-5
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { ChangeDetectorRef, Component, ViewChild } from '@angular/core';
2-
import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
2+
import { ColumnMode, DatatableComponent } from 'projects/ngx-datatable/src/public-api';
3+
import { Employee } from "../data.model";
34

45
@Component({
56
selector: 'live-data-demo',
@@ -41,13 +42,13 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
4142
`
4243
})
4344
export class LiveDataComponent {
44-
@ViewChild('mydatatable') mydatatable: any;
45+
@ViewChild('mydatatable') mydatatable: DatatableComponent<Employee & {updated: string}>;
4546

4647
count = 50;
47-
rows: any[] = [];
48+
rows: (Employee & {updated: string})[] = [];
4849
active = true;
49-
temp: any[] = [];
50-
cols: any = ['name', 'gender', 'company'];
50+
temp: (Employee & {updated: string})[] = [];
51+
cols = ['name', 'gender', 'company'];
5152

5253
ColumnMode = ColumnMode;
5354

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

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

44
@Component({
55
selector: 'multiple-tables-demo',
@@ -40,9 +40,9 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
4040
`
4141
})
4242
export class MultipleTablesComponent {
43-
columns1 = [{ prop: 'name' }, { name: 'Gender' }, { name: 'Company' }];
43+
columns1: TableColumn[] = [{ prop: 'name' }, { name: 'Gender' }, { name: 'Company' }];
4444

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

4747
rows1 = [
4848
{ name: 'Larry', gender: 'Male', company: 'Cisco' },

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

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

45
@Component({
56
selector: 'responsive-demo',
@@ -115,9 +116,9 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
115116
encapsulation: ViewEncapsulation.None
116117
})
117118
export class ResponsiveComponent {
118-
@ViewChild('myTable') table: any;
119+
@ViewChild('myTable') table: DatatableComponent<FullEmployee>;
119120

120-
rows: any[] = [];
121+
rows: FullEmployee[] = [];
121122
expanded: any = {};
122123
timeout: any;
123124

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

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

45
@Component({
56
selector: 'row-details-demo',
@@ -89,9 +90,9 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
8990
encapsulation: ViewEncapsulation.None
9091
})
9192
export class RowDetailsComponent {
92-
@ViewChild('myTable') table: any;
93+
@ViewChild('myTable') table: DatatableComponent<FullEmployee>;
9394

94-
rows: any[] = [];
95+
rows: FullEmployee[] = [];
9596
expanded: any = {};
9697
timeout: any;
9798

0 commit comments

Comments
 (0)