From 348353a059d4b51dcd31946f79f72dfa85140023 Mon Sep 17 00:00:00 2001 From: Maximilian Koeller Date: Thu, 28 Mar 2024 14:23:23 +0100 Subject: [PATCH] docs: use row related types in examples --- src/app/basic/basic-auto.component.ts | 6 ++-- src/app/basic/basic-fixed.component.ts | 6 ++-- src/app/basic/bootstrap.component.ts | 6 ++-- src/app/basic/contextmenu.component.ts | 6 ++-- src/app/basic/css.component.ts | 4 +-- src/app/basic/dark-theme.component.ts | 6 ++-- src/app/basic/disabled-rows.component.ts | 16 +++++----- src/app/basic/dynamic-height.component.ts | 3 +- src/app/basic/empty.component.ts | 3 +- src/app/basic/filter.component.ts | 17 +++++------ src/app/basic/footer.component.ts | 6 ++-- src/app/basic/fullscreen.component.ts | 3 +- src/app/basic/inline.component.ts | 5 ++-- src/app/basic/live.component.ts | 10 ++++--- src/app/basic/multiple.component.ts | 5 ++-- src/app/basic/responsive.component.ts | 6 ++-- src/app/basic/row-detail.component.ts | 6 ++-- src/app/basic/row-grouping.component.ts | 24 ++++----------- src/app/basic/rx.component.ts | 6 ++-- .../basic/scrolling-dynamically.component.ts | 5 ++-- src/app/basic/scrolling.component.ts | 3 +- src/app/basic/tabs.component.ts | 3 +- src/app/basic/virtual.component.ts | 3 +- src/app/columns/column-flex.component.ts | 3 +- src/app/columns/column-force.component.ts | 3 +- src/app/columns/column-reorder.component.ts | 6 ++-- src/app/columns/column-standard.component.ts | 3 +- src/app/columns/column-toggle.component.ts | 12 ++++---- src/app/columns/pinning.component.ts | 3 +- src/app/data.model.ts | 30 +++++++++++++++++++ src/app/paging/mock-server-results-service.ts | 15 ++++------ src/app/paging/model/corporate-employee.ts | 16 ---------- src/app/paging/model/page.ts | 10 +++---- src/app/paging/model/paged-data.ts | 6 ++-- src/app/paging/paging-client.component.ts | 3 +- ...ng-scrolling-novirtualization.component.ts | 16 +++++----- src/app/paging/paging-server.component.ts | 16 +++++----- src/app/paging/paging-virtual.component.ts | 18 ++++++----- src/app/paging/scrolling-server.component.ts | 7 +++-- src/app/selection/selection-cell.component.ts | 8 +++-- .../selection-chkbox-template.component.ts | 5 ++-- .../selection/selection-chkbox.component.ts | 5 ++-- .../selection/selection-disabled.component.ts | 8 +++-- .../selection-multi-click-chkbox.component.ts | 5 ++-- .../selection-multi-click.component.ts | 8 +++-- .../selection/selection-multi.component.ts | 8 +++-- .../selection/selection-single.component.ts | 8 +++-- src/app/sorting/sorting-client.component.ts | 6 ++-- .../sorting/sorting-comparator.component.ts | 6 ++-- src/app/sorting/sorting-default.component.ts | 3 +- src/app/sorting/sorting-server.component.ts | 6 ++-- .../summary-row-custom-template.component.ts | 9 +++--- .../summary-row-inline-html.component.ts | 3 +- .../summary-row-server-paging.component.ts | 17 ++++++----- .../summary/summary-row-simple.component.ts | 8 +++-- src/app/templates/template-dom.component.ts | 3 +- src/app/templates/template-obj.component.ts | 6 ++-- src/app/tree/client-tree.component.ts | 4 ++- src/app/tree/fullscreen.component.ts | 4 ++- 59 files changed, 263 insertions(+), 192 deletions(-) create mode 100644 src/app/data.model.ts delete mode 100644 src/app/paging/model/corporate-employee.ts diff --git a/src/app/basic/basic-auto.component.ts b/src/app/basic/basic-auto.component.ts index ab793b4cb..f5954c5eb 100644 --- a/src/app/basic/basic-auto.component.ts +++ b/src/app/basic/basic-auto.component.ts @@ -1,5 +1,7 @@ import { Component } from '@angular/core'; import { ColumnMode } from 'projects/ngx-datatable/src/public-api'; +import { Employee } from "../data.model"; +import { TableColumn } from "projects/ngx-datatable/src/public-api"; @Component({ selector: 'basic-auto-demo', @@ -32,11 +34,11 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api'; ` }) export class BasicAutoComponent { - rows = []; + rows: Employee[] = []; loadingIndicator = true; reorderable = true; - columns = [{ prop: 'name' }, { name: 'Gender' }, { name: 'Company', sortable: false }]; + columns: TableColumn[] = [{ prop: 'name' }, { name: 'Gender' }, { name: 'Company', sortable: false }]; ColumnMode = ColumnMode; diff --git a/src/app/basic/basic-fixed.component.ts b/src/app/basic/basic-fixed.component.ts index 9f7f5ac3d..a926adb44 100644 --- a/src/app/basic/basic-fixed.component.ts +++ b/src/app/basic/basic-fixed.component.ts @@ -1,5 +1,7 @@ import { Component } from '@angular/core'; import { ColumnMode } from 'projects/ngx-datatable/src/public-api'; +import { Employee } from "../data.model"; +import { TableColumn } from "projects/ngx-datatable/src/public-api"; @Component({ selector: 'basic-fixed-demo', @@ -30,8 +32,8 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api'; ` }) export class BasicFixedComponent { - rows = []; - columns = [{ prop: 'name' }, { name: 'Company' }, { name: 'Gender' }]; + rows: Employee[] = []; + columns: TableColumn[] = [{ prop: 'name' }, { name: 'Company' }, { name: 'Gender' }]; ColumnMode = ColumnMode; diff --git a/src/app/basic/bootstrap.component.ts b/src/app/basic/bootstrap.component.ts index 6922bf7a7..13ab0dcbc 100644 --- a/src/app/basic/bootstrap.component.ts +++ b/src/app/basic/bootstrap.component.ts @@ -1,5 +1,7 @@ import { Component } from '@angular/core'; import { ColumnMode } from 'projects/ngx-datatable/src/public-api'; +import { Employee } from "../data.model"; +import { TableColumn } from "projects/ngx-datatable/src/public-api"; @Component({ selector: 'basic-bootstrap-theme-demo', @@ -35,11 +37,11 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api'; ` }) export class BootstrapThemeComponent { - rows = []; + rows: Employee[] = []; loadingIndicator = true; reorderable = true; - columns = [ + columns: TableColumn[] = [ { prop: 'name', summaryFunc: () => null }, { name: 'Gender', summaryFunc: cells => this.summaryForGender(cells) }, { name: 'Company', summaryFunc: () => null } diff --git a/src/app/basic/contextmenu.component.ts b/src/app/basic/contextmenu.component.ts index 9555810d0..ad70c412d 100644 --- a/src/app/basic/contextmenu.component.ts +++ b/src/app/basic/contextmenu.component.ts @@ -1,5 +1,7 @@ import { Component } from '@angular/core'; import { ColumnMode } from 'projects/ngx-datatable/src/public-api'; +import { Employee } from "../data.model"; +import { TableColumn } from "projects/ngx-datatable/src/public-api"; @Component({ selector: 'contextmenu-demo', @@ -44,9 +46,9 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api'; ` }) export class ContextMenuDemoComponent { - rows = []; + rows: Employee[] = []; - columns = [{ prop: 'name' }, { name: 'Gender' }, { name: 'Company' }]; + columns: TableColumn[] = [{ prop: 'name' }, { name: 'Gender' }, { name: 'Company' }]; rawEvent: any; contextmenuRow: any; diff --git a/src/app/basic/css.component.ts b/src/app/basic/css.component.ts index e7012bbdf..a36ecf7ec 100644 --- a/src/app/basic/css.component.ts +++ b/src/app/basic/css.component.ts @@ -1,5 +1,6 @@ import { Component } from '@angular/core'; import { ColumnMode } from 'projects/ngx-datatable/src/public-api'; +import { FullEmployee } from "../data.model"; @Component({ selector: 'row-css-demo', @@ -33,9 +34,8 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api'; ` }) export class RowCssComponent { - rows = []; + rows: FullEmployee[] = []; expanded = {}; - timeout: any; ColumnMode = ColumnMode; diff --git a/src/app/basic/dark-theme.component.ts b/src/app/basic/dark-theme.component.ts index 06b63bc58..0b6946593 100644 --- a/src/app/basic/dark-theme.component.ts +++ b/src/app/basic/dark-theme.component.ts @@ -1,5 +1,7 @@ import { Component } from '@angular/core'; import { ColumnMode } from 'projects/ngx-datatable/src/public-api'; +import { Employee } from "../data.model"; +import { TableColumn } from "projects/ngx-datatable/src/public-api"; @Component({ selector: 'basic-dark-theme-demo', @@ -34,11 +36,11 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api'; ` }) export class DarkThemeComponent { - rows = []; + rows: Employee[] = []; loadingIndicator = true; reorderable = true; - columns = [ + columns: TableColumn[] = [ { prop: 'name', summaryFunc: () => null }, { name: 'Gender', summaryFunc: cells => this.summaryForGender(cells) }, { name: 'Company', summaryFunc: () => null } diff --git a/src/app/basic/disabled-rows.component.ts b/src/app/basic/disabled-rows.component.ts index 43792930b..22e4e5f2c 100644 --- a/src/app/basic/disabled-rows.component.ts +++ b/src/app/basic/disabled-rows.component.ts @@ -1,5 +1,7 @@ import { Component } from '@angular/core'; import { ColumnMode, SelectionType } from 'projects/ngx-datatable/src/public-api'; +import { FullEmployee } from "../data.model"; +import { BehaviorSubject } from "rxjs"; @Component({ selector: 'disabled-rows-demo', @@ -60,7 +62,7 @@ import { ColumnMode, SelectionType } from 'projects/ngx-datatable/src/public-api ` }) export class DisabledRowsComponent { - rows = []; + rows: (FullEmployee & {isDisabled?: boolean}) [] = []; ColumnMode = ColumnMode; SelectionType = SelectionType; @@ -82,21 +84,17 @@ export class DisabledRowsComponent { req.send(); } - isRowDisabled(row: any) { - if (!row.isDisabled && row.age < 40) { - return false; - } else { - return true; - } + isRowDisabled(row: FullEmployee & {isDisabled: boolean}) { + return !(!row.isDisabled && row.age < 40); } - disableRow(rowIndex, disableRow$) { + disableRow(rowIndex: number, disableRow$: BehaviorSubject) { this.rows[rowIndex].isDisabled = true; this.rows = [...this.rows]; disableRow$.next(true); } - updateValue(event, cell, rowIndex, disableRow$) { + updateValue(event, cell, rowIndex: number, disableRow$: BehaviorSubject) { this.rows[rowIndex][cell] = event.target.value; this.rows = [...this.rows]; if (disableRow$ && cell === 'age' && this.rows[rowIndex][cell] > 40) { diff --git a/src/app/basic/dynamic-height.component.ts b/src/app/basic/dynamic-height.component.ts index d66a1cc85..cbba79050 100644 --- a/src/app/basic/dynamic-height.component.ts +++ b/src/app/basic/dynamic-height.component.ts @@ -1,5 +1,6 @@ import { Component } from '@angular/core'; import { ColumnMode } from 'projects/ngx-datatable/src/public-api'; +import { FullEmployee } from "../data.model"; @Component({ selector: 'dynamic-height-demo', @@ -33,7 +34,7 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api'; ` }) export class DynamicHeightComponent { - rows = []; + rows: FullEmployee[] = []; expanded = {}; timeout: any; diff --git a/src/app/basic/empty.component.ts b/src/app/basic/empty.component.ts index 82d423ffb..35bd400bf 100644 --- a/src/app/basic/empty.component.ts +++ b/src/app/basic/empty.component.ts @@ -1,5 +1,6 @@ import { Component } from '@angular/core'; import { ColumnMode } from 'projects/ngx-datatable/src/public-api'; +import { TableColumn } from "projects/ngx-datatable/src/public-api"; @Component({ selector: 'empty-demo', @@ -30,6 +31,6 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api'; ` }) export class BasicEmptyComponent { - columns = [{ prop: 'name' }, { name: 'Gender' }, { name: 'Company', sortable: false }]; + columns: TableColumn[] = [{ prop: 'name' }, { name: 'Gender' }, { name: 'Company', sortable: false }]; ColumnMode = ColumnMode; } diff --git a/src/app/basic/filter.component.ts b/src/app/basic/filter.component.ts index 3e2bc8700..b1dab3c81 100644 --- a/src/app/basic/filter.component.ts +++ b/src/app/basic/filter.component.ts @@ -1,6 +1,8 @@ import { Component, ViewChild } from '@angular/core'; import { DatatableComponent } from '../../../projects/ngx-datatable/src/lib/components/datatable.component'; import { ColumnMode } from 'projects/ngx-datatable/src/public-api'; +import { Employee } from "../data.model"; +import { TableColumn } from "projects/ngx-datatable/src/public-api"; @Component({ selector: 'filter-demo', @@ -39,12 +41,12 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api'; ` }) export class FilterBarComponent { - rows = []; + rows: Employee[] = []; - temp = []; + temp: Employee[] = []; - columns = [{ prop: 'name' }, { name: 'Company' }, { name: 'Gender' }]; - @ViewChild(DatatableComponent) table: DatatableComponent; + columns: TableColumn[] = [{ prop: 'name' }, { name: 'Company' }, { name: 'Gender' }]; + @ViewChild(DatatableComponent) table: DatatableComponent; ColumnMode = ColumnMode; @@ -72,13 +74,10 @@ export class FilterBarComponent { updateFilter(event) { const val = event.target.value.toLowerCase(); - // filter our data - const temp = this.temp.filter(function(d) { + // filter our data and update the rows + this.rows = this.temp.filter(function (d) { return d.name.toLowerCase().indexOf(val) !== -1 || !val; }); - - // update the rows - this.rows = temp; // Whenever the filter changes, always go back to the first page this.table.offset = 0; } diff --git a/src/app/basic/footer.component.ts b/src/app/basic/footer.component.ts index b075b759a..a808611e9 100644 --- a/src/app/basic/footer.component.ts +++ b/src/app/basic/footer.component.ts @@ -1,5 +1,7 @@ import { Component } from '@angular/core'; import { ColumnMode } from 'projects/ngx-datatable/src/public-api'; +import { Employee } from "../data.model"; +import { TableColumn } from "projects/ngx-datatable/src/public-api"; @Component({ selector: 'footer-demo', @@ -46,9 +48,9 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api'; ` }) export class FooterDemoComponent { - rows = []; + rows: Employee[] = []; - columns = [{ prop: 'name' }, { name: 'Gender' }, { name: 'Company' }]; + columns: TableColumn[] = [{ prop: 'name' }, { name: 'Gender' }, { name: 'Company' }]; ColumnMode = ColumnMode; diff --git a/src/app/basic/fullscreen.component.ts b/src/app/basic/fullscreen.component.ts index d6b3b608c..6ec840dee 100644 --- a/src/app/basic/fullscreen.component.ts +++ b/src/app/basic/fullscreen.component.ts @@ -1,5 +1,6 @@ import { Component } from '@angular/core'; import { ColumnMode } from 'projects/ngx-datatable/src/public-api'; +import { FullEmployee } from "../data.model"; @Component({ selector: 'full-screen-demo', @@ -38,7 +39,7 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api'; ` }) export class FullScreenComponent { - rows = []; + rows: FullEmployee[] = []; ColumnMode = ColumnMode; diff --git a/src/app/basic/inline.component.ts b/src/app/basic/inline.component.ts index 8329d588d..08061af6d 100644 --- a/src/app/basic/inline.component.ts +++ b/src/app/basic/inline.component.ts @@ -1,5 +1,6 @@ import { Component } from '@angular/core'; import { ColumnMode } from 'projects/ngx-datatable/src/public-api'; +import { Employee } from "../data.model"; @Component({ selector: 'inline-edit-demo', @@ -75,7 +76,7 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api'; }) export class InlineEditComponent { editing = {}; - rows = []; + rows: Employee[] = []; ColumnMode = ColumnMode; @@ -96,7 +97,7 @@ export class InlineEditComponent { req.send(); } - updateValue(event, cell, rowIndex) { + updateValue(event, cell, rowIndex: number) { console.log('inline editing rowIndex', rowIndex); this.editing[rowIndex + '-' + cell] = false; this.rows[rowIndex][cell] = event.target.value; diff --git a/src/app/basic/live.component.ts b/src/app/basic/live.component.ts index 179993621..79feeedef 100644 --- a/src/app/basic/live.component.ts +++ b/src/app/basic/live.component.ts @@ -1,5 +1,7 @@ import { ChangeDetectorRef, Component, ViewChild } from '@angular/core'; import { ColumnMode } from 'projects/ngx-datatable/src/public-api'; +import { Employee } from "../data.model"; +import { DatatableComponent } from "projects/ngx-datatable/src/public-api"; @Component({ selector: 'live-data-demo', @@ -41,13 +43,13 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api'; ` }) export class LiveDataComponent { - @ViewChild('mydatatable') mydatatable: any; + @ViewChild('mydatatable') mydatatable: DatatableComponent; count = 50; - rows: any[] = []; + rows: (Employee & {updated: string})[] = []; active = true; - temp: any[] = []; - cols: any = ['name', 'gender', 'company']; + temp: (Employee & {updated: string})[] = []; + cols = ['name', 'gender', 'company']; ColumnMode = ColumnMode; diff --git a/src/app/basic/multiple.component.ts b/src/app/basic/multiple.component.ts index 21926e932..5a2f8a700 100644 --- a/src/app/basic/multiple.component.ts +++ b/src/app/basic/multiple.component.ts @@ -1,5 +1,6 @@ import { Component } from '@angular/core'; import { ColumnMode } from 'projects/ngx-datatable/src/public-api'; +import { TableColumn } from "projects/ngx-datatable/src/public-api"; @Component({ selector: 'multiple-tables-demo', @@ -40,9 +41,9 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api'; ` }) export class MultipleTablesComponent { - columns1 = [{ prop: 'name' }, { name: 'Gender' }, { name: 'Company' }]; + columns1: TableColumn[] = [{ prop: 'name' }, { name: 'Gender' }, { name: 'Company' }]; - columns2 = [{ prop: 'name', name: 'Name' }, { name: 'Gender' }]; + columns2: TableColumn[] = [{ prop: 'name', name: 'Name' }, { name: 'Gender' }]; rows1 = [ { name: 'Larry', gender: 'Male', company: 'Cisco' }, diff --git a/src/app/basic/responsive.component.ts b/src/app/basic/responsive.component.ts index 36631bf2d..22e640263 100644 --- a/src/app/basic/responsive.component.ts +++ b/src/app/basic/responsive.component.ts @@ -1,5 +1,7 @@ import { Component, ViewChild, ViewEncapsulation } from '@angular/core'; import { ColumnMode } from 'projects/ngx-datatable/src/public-api'; +import { FullEmployee } from "../data.model"; +import { DatatableComponent } from "projects/ngx-datatable/src/public-api"; @Component({ selector: 'responsive-demo', @@ -115,9 +117,9 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api'; encapsulation: ViewEncapsulation.None }) export class ResponsiveComponent { - @ViewChild('myTable') table: any; + @ViewChild('myTable') table: DatatableComponent; - rows: any[] = []; + rows: FullEmployee[] = []; expanded: any = {}; timeout: any; diff --git a/src/app/basic/row-detail.component.ts b/src/app/basic/row-detail.component.ts index 8a8d6a85b..ef017eb69 100644 --- a/src/app/basic/row-detail.component.ts +++ b/src/app/basic/row-detail.component.ts @@ -1,5 +1,7 @@ import { Component, ViewChild, ViewEncapsulation } from '@angular/core'; import { ColumnMode } from 'projects/ngx-datatable/src/public-api'; +import { FullEmployee } from "../data.model"; +import { DatatableComponent } from "projects/ngx-datatable/src/public-api"; @Component({ selector: 'row-details-demo', @@ -89,9 +91,9 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api'; encapsulation: ViewEncapsulation.None }) export class RowDetailsComponent { - @ViewChild('myTable') table: any; + @ViewChild('myTable') table: DatatableComponent; - rows: any[] = []; + rows: FullEmployee[] = []; expanded: any = {}; timeout: any; diff --git a/src/app/basic/row-grouping.component.ts b/src/app/basic/row-grouping.component.ts index c7ef22549..5b5fc543e 100644 --- a/src/app/basic/row-grouping.component.ts +++ b/src/app/basic/row-grouping.component.ts @@ -1,6 +1,8 @@ import { Component, ViewChild, ViewEncapsulation } from '@angular/core'; import { NgStyle } from '@angular/common'; import { ColumnMode } from 'projects/ngx-datatable/src/public-api'; +import { GroupedEmployee } from "../data.model"; +import { DatatableComponent } from "projects/ngx-datatable/src/public-api"; @Component({ selector: 'row-grouping-demo', @@ -119,15 +121,10 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api'; ` }) export class RowGroupingComponent { - @ViewChild('myTable') table: any; + @ViewChild('myTable') table: DatatableComponent; - funder = []; - calculated = []; - pending = []; - groups = []; - - editing = {}; - rows = []; + editing: Record = {}; + rows: GroupedEmployee[] = []; ColumnMode = ColumnMode; @@ -148,17 +145,6 @@ export class RowGroupingComponent { req.send(); } - getGroupRowHeight(group, rowHeight) { - let style = {}; - - style = { - height: group.length * 40 + 'px', - width: '100%' - }; - - return style; - } - checkGroup(event, row, rowIndex, group) { let groupStatus = 'Pending'; let expectedPaymentDealtWith = true; diff --git a/src/app/basic/rx.component.ts b/src/app/basic/rx.component.ts index 9fdccfe5d..7c9a30856 100644 --- a/src/app/basic/rx.component.ts +++ b/src/app/basic/rx.component.ts @@ -1,6 +1,8 @@ import { Component } from '@angular/core'; import { Observable } from 'rxjs'; import { ColumnMode } from 'projects/ngx-datatable/src/public-api'; +import { Employee } from "../data.model"; +import { TableColumn } from "projects/ngx-datatable/src/public-api"; @Component({ selector: 'rx-demo', @@ -28,9 +30,9 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api'; ` }) export class RxDemoComponent { - rows: Observable; + rows: Observable; - columns = [{ name: 'Name' }, { name: 'Gender' }, { name: 'Company' }]; + columns: TableColumn[] = [{ name: 'Name' }, { name: 'Gender' }, { name: 'Company' }]; ColumnMode = ColumnMode; diff --git a/src/app/basic/scrolling-dynamically.component.ts b/src/app/basic/scrolling-dynamically.component.ts index 367709ea0..99b011f60 100644 --- a/src/app/basic/scrolling-dynamically.component.ts +++ b/src/app/basic/scrolling-dynamically.component.ts @@ -1,5 +1,6 @@ import { Component } from '@angular/core'; import { ColumnMode } from 'projects/ngx-datatable/src/public-api'; +import { Employee } from "../data.model"; @Component({ selector: 'scrolling-dynamically-demo', @@ -77,8 +78,8 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api'; ` }) export class ScollingDynamicallyComponent { - editing = {}; - rows = []; + editing: Record = {}; + rows: Employee[] = []; ColumnMode = ColumnMode; diff --git a/src/app/basic/scrolling.component.ts b/src/app/basic/scrolling.component.ts index 0a70dbe08..af726694e 100644 --- a/src/app/basic/scrolling.component.ts +++ b/src/app/basic/scrolling.component.ts @@ -1,4 +1,5 @@ import { Component } from '@angular/core'; +import { FullEmployee } from "../data.model"; @Component({ selector: 'horz-vert-scrolling-demo', @@ -35,7 +36,7 @@ import { Component } from '@angular/core'; ` }) export class HorzVertScrollingComponent { - rows = []; + rows: FullEmployee[] = []; constructor() { this.fetch(data => { diff --git a/src/app/basic/tabs.component.ts b/src/app/basic/tabs.component.ts index 92be7f227..1edd2c899 100644 --- a/src/app/basic/tabs.component.ts +++ b/src/app/basic/tabs.component.ts @@ -1,5 +1,6 @@ import { Component } from '@angular/core'; import { ColumnMode } from 'projects/ngx-datatable/src/public-api'; +import { FullEmployee } from "../data.model"; @Component({ selector: 'tabs-demo', @@ -66,7 +67,7 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api'; ` }) export class TabsDemoComponent { - rows = []; + rows: FullEmployee[] = []; tab1 = true; tab2 = false; diff --git a/src/app/basic/virtual.component.ts b/src/app/basic/virtual.component.ts index ef6f57d3b..882206e58 100644 --- a/src/app/basic/virtual.component.ts +++ b/src/app/basic/virtual.component.ts @@ -1,5 +1,6 @@ import { Component } from '@angular/core'; import { ColumnMode } from 'projects/ngx-datatable/src/public-api'; +import { FullEmployee } from "../data.model"; @Component({ selector: 'virtual-scroll-demo', @@ -42,7 +43,7 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api'; ` }) export class VirtualScrollComponent { - rows; + rows: FullEmployee[]; expanded = {}; timeout: any; diff --git a/src/app/columns/column-flex.component.ts b/src/app/columns/column-flex.component.ts index 153060293..378f4968d 100644 --- a/src/app/columns/column-flex.component.ts +++ b/src/app/columns/column-flex.component.ts @@ -1,5 +1,6 @@ import { Component } from '@angular/core'; import { ColumnMode } from 'projects/ngx-datatable/src/public-api'; +import { Employee } from "../data.model"; @Component({ selector: 'column-flex-demo', @@ -44,7 +45,7 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api'; ` }) export class ColumnFlexComponent { - rows = []; + rows: Employee[] = []; ColumnMode = ColumnMode; diff --git a/src/app/columns/column-force.component.ts b/src/app/columns/column-force.component.ts index e6a49e40c..42b59e588 100644 --- a/src/app/columns/column-force.component.ts +++ b/src/app/columns/column-force.component.ts @@ -1,5 +1,6 @@ import { Component } from '@angular/core'; import { ColumnMode } from 'projects/ngx-datatable/src/public-api'; +import { Employee } from "../data.model"; @Component({ selector: 'column-force-demo', @@ -44,7 +45,7 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api'; ` }) export class ColumnForceComponent { - rows = []; + rows: Employee[] = []; ColumnMode = ColumnMode; diff --git a/src/app/columns/column-reorder.component.ts b/src/app/columns/column-reorder.component.ts index c2289d99b..4a4bc6f66 100644 --- a/src/app/columns/column-reorder.component.ts +++ b/src/app/columns/column-reorder.component.ts @@ -1,5 +1,7 @@ import { Component } from '@angular/core'; import { ColumnMode } from 'projects/ngx-datatable/src/public-api'; +import { Employee } from "../data.model"; +import { TableColumn } from "projects/ngx-datatable/src/public-api"; @Component({ selector: 'column-reorder-demo', @@ -56,12 +58,12 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api'; ` }) export class ColumnReorderComponent { - rows = []; + rows: Employee[] = []; loadingIndicator = true; reorderable = true; swapColumns = false; - columns = [{ prop: 'name' }, { name: 'Gender' }, { name: 'Company', sortable: false }]; + columns: TableColumn[] = [{ prop: 'name' }, { name: 'Gender' }, { name: 'Company', sortable: false }]; ColumnMode = ColumnMode; diff --git a/src/app/columns/column-standard.component.ts b/src/app/columns/column-standard.component.ts index cc49fee5a..d11599657 100644 --- a/src/app/columns/column-standard.component.ts +++ b/src/app/columns/column-standard.component.ts @@ -1,5 +1,6 @@ import { Component } from '@angular/core'; import { ColumnMode } from 'projects/ngx-datatable/src/public-api'; +import { Employee } from "../data.model"; @Component({ selector: 'column-standard-demo', @@ -44,7 +45,7 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api'; ` }) export class ColumnStandardComponent { - rows = []; + rows: Employee[] = []; ColumnMode = ColumnMode; diff --git a/src/app/columns/column-toggle.component.ts b/src/app/columns/column-toggle.component.ts index 9298d553e..9d9832993 100644 --- a/src/app/columns/column-toggle.component.ts +++ b/src/app/columns/column-toggle.component.ts @@ -1,5 +1,7 @@ import { Component } from '@angular/core'; import { ColumnMode } from 'projects/ngx-datatable/src/public-api'; +import { Employee } from "../data.model"; +import { TableColumn } from "projects/ngx-datatable/src/public-api"; @Component({ selector: 'column-toggle-demo', @@ -41,7 +43,7 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api'; ` }) export class ColumnToggleComponent { - rows = [ + rows: Employee[] = [ { name: 'Claudine Neal', gender: 'female', @@ -54,13 +56,13 @@ export class ColumnToggleComponent { } ]; - columns = [{ name: 'Name' }, { name: 'Gender' }, { name: 'Company' }]; + columns: TableColumn[] = [{ name: 'Name' }, { name: 'Gender' }, { name: 'Company' }]; - allColumns = [{ name: 'Name' }, { name: 'Gender' }, { name: 'Company' }]; + allColumns: TableColumn[] = [{ name: 'Name' }, { name: 'Gender' }, { name: 'Company' }]; ColumnMode = ColumnMode; - toggle(col) { + toggle(col: TableColumn) { const isChecked = this.isChecked(col); if (isChecked) { @@ -70,7 +72,7 @@ export class ColumnToggleComponent { } } - isChecked(col) { + isChecked(col: TableColumn) { return ( this.columns.find(c => c.name === col.name) !== undefined ); diff --git a/src/app/columns/pinning.component.ts b/src/app/columns/pinning.component.ts index e6a0f1c07..4cf2ee658 100644 --- a/src/app/columns/pinning.component.ts +++ b/src/app/columns/pinning.component.ts @@ -1,5 +1,6 @@ import { Component } from '@angular/core'; import { ColumnMode } from 'projects/ngx-datatable/src/public-api'; +import { FullEmployee } from "../data.model"; @Component({ selector: 'column-pinning-demo', @@ -37,7 +38,7 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api'; ` }) export class ColumnPinningComponent { - rows = []; + rows: FullEmployee[] = []; ColumnMode = ColumnMode; diff --git a/src/app/data.model.ts b/src/app/data.model.ts new file mode 100644 index 000000000..ddd130197 --- /dev/null +++ b/src/app/data.model.ts @@ -0,0 +1,30 @@ +export interface Employee { + name: string; + gender: string; + company: string; + age?: number; +} + +export interface FullEmployee { + id: number; + name: string; + gender: string; + age: number; + address: { + state: string; + city: string; + } +} + +export interface GroupedEmployee { + exppayyes?: number; + exppayno?: number; + exppaypending?: number; + source?: string; + name: string; + gender: string; + company: string; + age: number; + comment?: string; + groupcomment?: string; +} diff --git a/src/app/paging/mock-server-results-service.ts b/src/app/paging/mock-server-results-service.ts index d80920e70..5365eb158 100644 --- a/src/app/paging/mock-server-results-service.ts +++ b/src/app/paging/mock-server-results-service.ts @@ -2,10 +2,10 @@ import { Injectable } from '@angular/core'; import { Observable, of } from 'rxjs'; import { delay, map } from 'rxjs/operators'; import { PagedData } from './model/paged-data'; -import { CorporateEmployee } from './model/corporate-employee'; import { Page } from './model/page'; import companyData from 'src/assets/data/company.json'; +import { Employee } from "../data.model"; /** * A server used to mock a paged data result from a server @@ -17,7 +17,7 @@ export class MockServerResultsService { * @param page The selected page * @returns An observable containing the employee data */ - public getResults(page: Page): Observable> { + public getResults(page: Page): Observable> { return of(companyData) .pipe(map(d => this.getPagedData(page))) .pipe(delay(1000 * Math.random())); @@ -28,18 +28,15 @@ export class MockServerResultsService { * @param page The page data used to get the selected data from companyData * @returns An array of the selected data and page */ - private getPagedData(page: Page): PagedData { - const pagedData = new PagedData(); + private getPagedData(page: Page): PagedData { + const data: Employee[] = [] page.totalElements = companyData.length; page.totalPages = page.totalElements / page.size; const start = page.pageNumber * page.size; const end = Math.min(start + page.size, page.totalElements); for (let i = start; i < end; i++) { - const jsonObj = companyData[i]; - const employee = new CorporateEmployee(jsonObj.name, jsonObj.gender, jsonObj.company, jsonObj.age); - pagedData.data.push(employee); + data.push(companyData[i]); } - pagedData.page = page; - return pagedData; + return { page, data }; } } diff --git a/src/app/paging/model/corporate-employee.ts b/src/app/paging/model/corporate-employee.ts deleted file mode 100644 index 692640184..000000000 --- a/src/app/paging/model/corporate-employee.ts +++ /dev/null @@ -1,16 +0,0 @@ -/** - * A model for an individual corporate employee - */ -export class CorporateEmployee { - name: string; - gender: string; - company: string; - age: number; - - constructor(name: string, gender: string, company: string, age: number) { - this.name = name; - this.gender = gender; - this.company = company; - this.age = age; - } -} diff --git a/src/app/paging/model/page.ts b/src/app/paging/model/page.ts index 84421da31..98fb35aff 100644 --- a/src/app/paging/model/page.ts +++ b/src/app/paging/model/page.ts @@ -1,13 +1,13 @@ /** * An object used to get page information from the server */ -export class Page { +export interface Page { // The number of elements in the page - size = 0; + size: number; // The total number of elements - totalElements = 0; + totalElements: number; // The total number of pages - totalPages = 0; + totalPages: number; // The current page number - pageNumber = 0; + pageNumber: number; } diff --git a/src/app/paging/model/paged-data.ts b/src/app/paging/model/paged-data.ts index 7121734d1..886cde0f8 100644 --- a/src/app/paging/model/paged-data.ts +++ b/src/app/paging/model/paged-data.ts @@ -3,7 +3,7 @@ import { Page } from './page'; /** * An array of data with an associated page object used for paging */ -export class PagedData { - data = new Array(); - page = new Page(); +export interface PagedData { + data: T[] + page: Page; } diff --git a/src/app/paging/paging-client.component.ts b/src/app/paging/paging-client.component.ts index 5f01d116e..d7e99bb28 100644 --- a/src/app/paging/paging-client.component.ts +++ b/src/app/paging/paging-client.component.ts @@ -1,5 +1,6 @@ import { Component } from '@angular/core'; import { ColumnMode } from 'projects/ngx-datatable/src/public-api'; +import { Employee } from "../data.model"; @Component({ selector: 'client-paging-demo', @@ -31,7 +32,7 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api'; ` }) export class ClientPagingComponent { - rows = []; + rows: Employee[] = []; ColumnMode = ColumnMode; diff --git a/src/app/paging/paging-scrolling-novirtualization.component.ts b/src/app/paging/paging-scrolling-novirtualization.component.ts index f13a0cfb9..763d8ea64 100644 --- a/src/app/paging/paging-scrolling-novirtualization.component.ts +++ b/src/app/paging/paging-scrolling-novirtualization.component.ts @@ -1,8 +1,8 @@ import { Component, OnInit } from '@angular/core'; import { MockServerResultsService } from './mock-server-results-service'; -import { CorporateEmployee } from './model/corporate-employee'; import { Page } from './model/page'; import { ColumnMode } from 'projects/ngx-datatable/src/public-api'; +import { Employee } from "../data.model"; @Component({ selector: 'paging-scrolling-novirtualization-demo', @@ -41,15 +41,17 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api'; ` }) export class PagingScrollingNoVirtualizationComponent implements OnInit{ - page = new Page(); - rows = new Array(); + page: Page = { + pageNumber: 0, + size: 20, + totalElements: 0, + totalPages: 0 + } + rows: Employee[] = []; ColumnMode = ColumnMode; - constructor(private serverResultsService: MockServerResultsService) { - this.page.pageNumber = 0; - this.page.size = 20; - } + constructor(private serverResultsService: MockServerResultsService) {} ngOnInit() { this.setPage({ offset: 0 }); diff --git a/src/app/paging/paging-server.component.ts b/src/app/paging/paging-server.component.ts index 89ace654d..47a830a90 100644 --- a/src/app/paging/paging-server.component.ts +++ b/src/app/paging/paging-server.component.ts @@ -1,8 +1,8 @@ import { Component, OnInit } from '@angular/core'; import { MockServerResultsService } from './mock-server-results-service'; -import { CorporateEmployee } from './model/corporate-employee'; import { Page } from './model/page'; import { ColumnMode } from 'projects/ngx-datatable/src/public-api'; +import { Employee } from "../data.model"; @Component({ selector: 'server-paging-demo', @@ -39,15 +39,17 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api'; ` }) export class ServerPagingComponent implements OnInit{ - page = new Page(); - rows = new Array(); + page: Page = { + pageNumber: 0, + size: 20, + totalElements: 0, + totalPages: 0 + } + rows: Employee[] = [] ColumnMode = ColumnMode; - constructor(private serverResultsService: MockServerResultsService) { - this.page.pageNumber = 0; - this.page.size = 20; - } + constructor(private serverResultsService: MockServerResultsService) {} ngOnInit() { this.setPage({ offset: 0 }); diff --git a/src/app/paging/paging-virtual.component.ts b/src/app/paging/paging-virtual.component.ts index 91fa16a06..fd492ea94 100644 --- a/src/app/paging/paging-virtual.component.ts +++ b/src/app/paging/paging-virtual.component.ts @@ -1,9 +1,8 @@ import { Component } from '@angular/core'; import { MockServerResultsService } from './mock-server-results-service'; -import { CorporateEmployee } from './model/corporate-employee'; import { Page } from './model/page'; import { ColumnMode } from 'projects/ngx-datatable/src/public-api'; -import { delay } from 'rxjs/operators'; +import { Employee } from "../data.model"; interface PageInfo { offset: number; @@ -58,8 +57,8 @@ interface PageInfo { export class VirtualPagingComponent { totalElements: number; pageNumber: number; - rows: CorporateEmployee[]; - cache: any = {}; + rows: Employee[]; + cache: Record = {}; cachePageSize = 0; ColumnMode = ColumnMode; @@ -81,9 +80,12 @@ export class VirtualPagingComponent { // This is the scroll position in rows const rowOffset = pageInfo.offset * pageInfo.pageSize; - const page = new Page(); - page.size = pageInfo.pageSize; - page.pageNumber = Math.floor(rowOffset / page.size); + const page: Page = { + pageNumber: Math.floor(rowOffset / pageInfo.pageSize), + size: pageInfo.pageSize, + totalElements: 0, + totalPages: 0 + } // We keep a index of server loaded pages so we don't load same data twice // This is based on the server page not the UI @@ -104,7 +106,7 @@ export class VirtualPagingComponent { // Create array to store data if missing // The array should have the correct number of with "holes" for missing data if (!this.rows) { - this.rows = new Array(this.totalElements || 0); + this.rows = new Array(this.totalElements || 0); } // Calc starting row offset diff --git a/src/app/paging/scrolling-server.component.ts b/src/app/paging/scrolling-server.component.ts index 643e0a6a1..5a0d27fc3 100644 --- a/src/app/paging/scrolling-server.component.ts +++ b/src/app/paging/scrolling-server.component.ts @@ -1,10 +1,11 @@ import { Component, ElementRef, Injectable, OnInit } from '@angular/core'; import { Observable, of } from 'rxjs'; import { delay, map } from 'rxjs/operators'; -import { CorporateEmployee } from './model/corporate-employee'; import data from 'src/assets/data/company.json'; import { ColumnMode } from 'projects/ngx-datatable/src/public-api'; +import { Employee } from "../data.model"; + const companyData = data as any[]; class PagedData { @@ -16,7 +17,7 @@ class PagedData { */ @Injectable() export class MockServerResultsService { - public getResults(offset: number, limit: number): Observable> { + public getResults(offset: number, limit: number): Observable> { return of(companyData.slice(offset, offset + limit)).pipe( delay(new Date(Date.now() + 500)), map(d => ({ data: d })) @@ -61,7 +62,7 @@ export class ServerScrollingComponent implements OnInit { readonly rowHeight = 50; readonly pageLimit = 10; - rows: CorporateEmployee[] = []; + rows: Employee[] = []; isLoading: boolean; ColumnMode = ColumnMode; diff --git a/src/app/selection/selection-cell.component.ts b/src/app/selection/selection-cell.component.ts index c007135ab..af184dea3 100644 --- a/src/app/selection/selection-cell.component.ts +++ b/src/app/selection/selection-cell.component.ts @@ -1,5 +1,7 @@ import { Component } from '@angular/core'; import { ColumnMode, SelectionType } from 'projects/ngx-datatable/src/public-api'; +import { Employee } from "../data.model"; +import { TableColumn } from "projects/ngx-datatable/src/public-api"; @Component({ selector: 'cell-selection-demo', @@ -34,9 +36,9 @@ import { ColumnMode, SelectionType } from 'projects/ngx-datatable/src/public-api ` }) export class CellSelectionComponent { - rows: any[] = []; - selected: any[] = []; - columns: any[] = [{ prop: 'name' }, { name: 'Company' }, { name: 'Gender' }]; + rows: Employee[] = []; + selected: Employee[] = []; + columns: TableColumn[] = [{ prop: 'name' }, { name: 'Company' }, { name: 'Gender' }]; ColumnMode = ColumnMode; SelectionType = SelectionType; diff --git a/src/app/selection/selection-chkbox-template.component.ts b/src/app/selection/selection-chkbox-template.component.ts index 85a238e72..d9b58e47d 100644 --- a/src/app/selection/selection-chkbox-template.component.ts +++ b/src/app/selection/selection-chkbox-template.component.ts @@ -1,5 +1,6 @@ import { Component } from '@angular/core'; import { ColumnMode, SelectionType } from 'projects/ngx-datatable/src/public-api'; +import { Employee } from "../data.model"; @Component({ selector: 'chkbox-selection-template-demo', @@ -81,8 +82,8 @@ import { ColumnMode, SelectionType } from 'projects/ngx-datatable/src/public-api ` }) export class CustomCheckboxSelectionComponent { - rows = []; - selected = []; + rows: Employee[] = []; + selected: Employee[] = []; ColumnMode = ColumnMode; SelectionType = SelectionType; diff --git a/src/app/selection/selection-chkbox.component.ts b/src/app/selection/selection-chkbox.component.ts index 85af0a4b7..c98cab606 100644 --- a/src/app/selection/selection-chkbox.component.ts +++ b/src/app/selection/selection-chkbox.component.ts @@ -1,5 +1,6 @@ import { Component } from '@angular/core'; import { ColumnMode, SelectionType } from 'projects/ngx-datatable/src/public-api'; +import { Employee } from "../data.model"; @Component({ selector: 'chkbox-selection-demo', @@ -69,8 +70,8 @@ import { ColumnMode, SelectionType } from 'projects/ngx-datatable/src/public-api ` }) export class CheckboxSelectionComponent { - rows = []; - selected = []; + rows: Employee[] = []; + selected: Employee[] = []; ColumnMode = ColumnMode; SelectionType = SelectionType; diff --git a/src/app/selection/selection-disabled.component.ts b/src/app/selection/selection-disabled.component.ts index cf0c4b86d..e547cf11b 100644 --- a/src/app/selection/selection-disabled.component.ts +++ b/src/app/selection/selection-disabled.component.ts @@ -1,5 +1,7 @@ import { Component } from '@angular/core'; import { ColumnMode, SelectionType } from 'projects/ngx-datatable/src/public-api'; +import { Employee } from "../data.model"; +import { TableColumn } from "projects/ngx-datatable/src/public-api"; @Component({ selector: 'multidisable-selection-demo', @@ -48,11 +50,11 @@ import { ColumnMode, SelectionType } from 'projects/ngx-datatable/src/public-api ` }) export class MultiDisableSelectionComponent { - rows = []; + rows: Employee[] = []; - selected = []; + selected: Employee[] = []; - columns: any[] = [{ prop: 'name' }, { name: 'Company' }, { name: 'Gender' }]; + columns: TableColumn[] = [{ prop: 'name' }, { name: 'Company' }, { name: 'Gender' }]; ColumnMode = ColumnMode; SelectionType = SelectionType; diff --git a/src/app/selection/selection-multi-click-chkbox.component.ts b/src/app/selection/selection-multi-click-chkbox.component.ts index f47d774d2..9588db733 100644 --- a/src/app/selection/selection-multi-click-chkbox.component.ts +++ b/src/app/selection/selection-multi-click-chkbox.component.ts @@ -1,5 +1,6 @@ import { Component } from '@angular/core'; import { ColumnMode, SelectionType } from 'projects/ngx-datatable/src/public-api'; +import { Employee } from "../data.model"; @Component({ selector: 'multi-click-chkbox-selection-demo', @@ -70,8 +71,8 @@ import { ColumnMode, SelectionType } from 'projects/ngx-datatable/src/public-api ` }) export class MultiClickCheckboxSelectionComponent { - rows = []; - selected = []; + rows: Employee[] = []; + selected: Employee[] = []; ColumnMode = ColumnMode; SelectionType = SelectionType; diff --git a/src/app/selection/selection-multi-click.component.ts b/src/app/selection/selection-multi-click.component.ts index 34e0a422e..3e855a6de 100644 --- a/src/app/selection/selection-multi-click.component.ts +++ b/src/app/selection/selection-multi-click.component.ts @@ -1,5 +1,7 @@ import { Component } from '@angular/core'; import { ColumnMode, SelectionType } from 'projects/ngx-datatable/src/public-api'; +import { Employee } from "../data.model"; +import { TableColumn } from "projects/ngx-datatable/src/public-api"; @Component({ selector: 'multi-click-selection-demo', @@ -51,11 +53,11 @@ import { ColumnMode, SelectionType } from 'projects/ngx-datatable/src/public-api ` }) export class MultiClickSelectionComponent { - rows = []; + rows: Employee[] = []; - selected = []; + selected: Employee[] = []; - columns: any[] = [{ prop: 'name' }, { name: 'Company' }, { name: 'Gender' }]; + columns: TableColumn[] = [{ prop: 'name' }, { name: 'Company' }, { name: 'Gender' }]; ColumnMode = ColumnMode; SelectionType = SelectionType; diff --git a/src/app/selection/selection-multi.component.ts b/src/app/selection/selection-multi.component.ts index db107a0c3..9395b2aca 100644 --- a/src/app/selection/selection-multi.component.ts +++ b/src/app/selection/selection-multi.component.ts @@ -1,5 +1,7 @@ import { Component } from '@angular/core'; import { ColumnMode, SelectionType } from 'projects/ngx-datatable/src/public-api'; +import { Employee } from "../data.model"; +import { TableColumn } from "projects/ngx-datatable/src/public-api"; @Component({ selector: 'multi-selection-demo', @@ -51,11 +53,11 @@ import { ColumnMode, SelectionType } from 'projects/ngx-datatable/src/public-api ` }) export class MultiSelectionComponent { - rows = []; + rows: Employee[] = []; - selected = []; + selected: Employee[] = []; - columns: any[] = [{ prop: 'name' }, { name: 'Company' }, { name: 'Gender' }]; + columns: TableColumn[] = [{ prop: 'name' }, { name: 'Company' }, { name: 'Gender' }]; ColumnMode = ColumnMode; SelectionType = SelectionType; diff --git a/src/app/selection/selection-single.component.ts b/src/app/selection/selection-single.component.ts index cf73aded3..cf57b3fa6 100644 --- a/src/app/selection/selection-single.component.ts +++ b/src/app/selection/selection-single.component.ts @@ -1,5 +1,7 @@ import { Component } from '@angular/core'; import { ColumnMode, SelectionType } from 'projects/ngx-datatable/src/public-api'; +import { Employee } from "../data.model"; +import { TableColumn } from "projects/ngx-datatable/src/public-api"; @Component({ selector: 'single-selection-demo', @@ -51,11 +53,11 @@ import { ColumnMode, SelectionType } from 'projects/ngx-datatable/src/public-api ` }) export class SingleSelectionComponent { - rows = []; + rows: Employee[] = []; - selected = []; + selected: Employee[] = []; - columns: any[] = [{ prop: 'name' }, { name: 'Company' }, { name: 'Gender' }]; + columns: TableColumn[] = [{ prop: 'name' }, { name: 'Company' }, { name: 'Gender' }]; ColumnMode = ColumnMode; SelectionType = SelectionType; diff --git a/src/app/sorting/sorting-client.component.ts b/src/app/sorting/sorting-client.component.ts index 24733827a..3e1ceca53 100644 --- a/src/app/sorting/sorting-client.component.ts +++ b/src/app/sorting/sorting-client.component.ts @@ -1,5 +1,7 @@ import { Component } from '@angular/core'; import { ColumnMode, SortType } from 'projects/ngx-datatable/src/public-api'; +import { Employee } from "../data.model"; +import { TableColumn } from "projects/ngx-datatable/src/public-api"; @Component({ selector: 'client-sorting-demo', @@ -32,9 +34,9 @@ import { ColumnMode, SortType } from 'projects/ngx-datatable/src/public-api'; ` }) export class ClientSortingComponent { - rows = []; + rows: Employee[] = []; - columns = [{ name: 'Company' }, { name: 'Name' }, { name: 'Gender' }]; + columns: TableColumn[] = [{ name: 'Company' }, { name: 'Name' }, { name: 'Gender' }]; ColumnMode = ColumnMode; SortType = SortType; diff --git a/src/app/sorting/sorting-comparator.component.ts b/src/app/sorting/sorting-comparator.component.ts index 1392b2108..b12b0da65 100644 --- a/src/app/sorting/sorting-comparator.component.ts +++ b/src/app/sorting/sorting-comparator.component.ts @@ -1,5 +1,7 @@ import { Component } from '@angular/core'; import { ColumnMode } from 'projects/ngx-datatable/src/public-api'; +import { Employee } from "../data.model"; +import { TableColumn } from "projects/ngx-datatable/src/public-api"; @Component({ selector: 'comparator-sorting-demo', @@ -30,9 +32,9 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api'; ` }) export class SortingComparatorComponent { - rows = []; + rows: Employee[] = []; - columns = [ + columns: TableColumn[] = [ { name: 'Company', comparator: this.companyComparator.bind(this) }, { name: 'Name', sortable: false }, { name: 'Gender', sortable: false } diff --git a/src/app/sorting/sorting-default.component.ts b/src/app/sorting/sorting-default.component.ts index be64d7114..b3e4fd597 100644 --- a/src/app/sorting/sorting-default.component.ts +++ b/src/app/sorting/sorting-default.component.ts @@ -1,5 +1,6 @@ import { Component, OnInit } from '@angular/core'; import { ColumnMode } from 'projects/ngx-datatable/src/public-api'; +import { Employee } from "../data.model"; @Component({ selector: 'default-sorting-demo', @@ -44,7 +45,7 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api'; ` }) export class DefaultSortingComponent implements OnInit { - rows = []; + rows: Employee[] = []; ColumnMode = ColumnMode; diff --git a/src/app/sorting/sorting-server.component.ts b/src/app/sorting/sorting-server.component.ts index d63dfdc09..c72275038 100644 --- a/src/app/sorting/sorting-server.component.ts +++ b/src/app/sorting/sorting-server.component.ts @@ -1,5 +1,7 @@ import { Component } from '@angular/core'; import { ColumnMode } from 'projects/ngx-datatable/src/public-api'; +import { Employee } from "../data.model"; +import { TableColumn } from "projects/ngx-datatable/src/public-api"; @Component({ selector: 'server-sorting-demo', @@ -35,9 +37,9 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api'; export class ServerSortingComponent { loading = false; - rows = []; + rows: Employee[] = []; - columns = [ + columns: TableColumn[] = [ { name: 'Company', sortable: true }, { name: 'Name', sortable: true }, { name: 'Gender', sortable: true } diff --git a/src/app/summary/summary-row-custom-template.component.ts b/src/app/summary/summary-row-custom-template.component.ts index 1bab0d8af..dfa577c5d 100644 --- a/src/app/summary/summary-row-custom-template.component.ts +++ b/src/app/summary/summary-row-custom-template.component.ts @@ -1,5 +1,7 @@ import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core'; import { ColumnMode } from 'projects/ngx-datatable/src/public-api'; +import { Employee } from "../data.model"; +import { TableColumn } from "projects/ngx-datatable/src/public-api"; @Component({ selector: 'summary-row-custom-template-demo', @@ -38,12 +40,11 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api'; styleUrls: ['./summary-row-custom-template.component.scss'] }) export class SummaryRowCustomTemplateComponent implements OnInit { - rows = []; + rows: Employee[] = []; - @ViewChild('nameSummaryCell') - nameSummaryCell: TemplateRef; + @ViewChild('nameSummaryCell') nameSummaryCell: TemplateRef; - columns = []; + columns: TableColumn[] = []; ColumnMode = ColumnMode; diff --git a/src/app/summary/summary-row-inline-html.component.ts b/src/app/summary/summary-row-inline-html.component.ts index e0729a7ca..7e7554ce6 100644 --- a/src/app/summary/summary-row-inline-html.component.ts +++ b/src/app/summary/summary-row-inline-html.component.ts @@ -1,5 +1,6 @@ import { Component } from '@angular/core'; import { ColumnMode } from 'projects/ngx-datatable/src/public-api'; +import { Employee } from "../data.model"; @Component({ selector: 'summary-row-inline-html', @@ -40,7 +41,7 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api'; ` }) export class SummaryRowInlineHtmlComponent { - rows = []; + rows: Employee[] = []; enableSummary = true; summaryPosition = 'top'; diff --git a/src/app/summary/summary-row-server-paging.component.ts b/src/app/summary/summary-row-server-paging.component.ts index 735cdfdca..456a99d54 100644 --- a/src/app/summary/summary-row-server-paging.component.ts +++ b/src/app/summary/summary-row-server-paging.component.ts @@ -1,9 +1,8 @@ import { Component, OnInit } from '@angular/core'; import { MockServerResultsService } from '../paging/mock-server-results-service'; -import { PagedData } from '../paging/model/paged-data'; -import { CorporateEmployee } from '../paging/model/corporate-employee'; import { Page } from '../paging/model/page'; import { ColumnMode } from 'projects/ngx-datatable/src/public-api'; +import { Employee } from "../data.model"; @Component({ selector: 'summary-row-server-paging-demo', @@ -41,8 +40,13 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api'; ` }) export class SummaryRowServerPagingComponent implements OnInit { - page = new Page(); - rows = new Array(); + page: Page = { + pageNumber: 0, + size: 20, + totalPages: 0, + totalElements: 0 + } + rows: Employee[] = []; columns = [ // NOTE: cells for current page only ! @@ -53,10 +57,7 @@ export class SummaryRowServerPagingComponent implements OnInit { ColumnMode = ColumnMode; - constructor(private serverResultsService: MockServerResultsService) { - this.page.pageNumber = 0; - this.page.size = 20; - } + constructor(private serverResultsService: MockServerResultsService) {} ngOnInit() { this.setPage({ offset: 0 }); diff --git a/src/app/summary/summary-row-simple.component.ts b/src/app/summary/summary-row-simple.component.ts index 2440d57ab..663557aed 100644 --- a/src/app/summary/summary-row-simple.component.ts +++ b/src/app/summary/summary-row-simple.component.ts @@ -1,5 +1,7 @@ import { Component } from '@angular/core'; import { ColumnMode } from 'projects/ngx-datatable/src/public-api'; +import { Employee } from "../data.model"; +import { TableColumn } from "projects/ngx-datatable/src/public-api"; @Component({ selector: 'summary-row-simple-demo', @@ -50,9 +52,9 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api'; styleUrls: ['./summary-row-simple.component.scss'] }) export class SummaryRowSimpleComponent { - rows = []; + rows: Employee[] = []; - columns = [ + columns: TableColumn[] = [ { prop: 'name', summaryFunc: null }, { name: 'Gender', summaryFunc: cells => this.summaryForGender(cells) }, { prop: 'age', summaryFunc: cells => this.avgAge(cells) } @@ -69,7 +71,7 @@ export class SummaryRowSimpleComponent { }); } - fetch(cb: (data: [unknown]) => void) { + fetch(cb: (data: [Employee]) => void) { const req = new XMLHttpRequest(); req.open('GET', `assets/data/company.json`); diff --git a/src/app/templates/template-dom.component.ts b/src/app/templates/template-dom.component.ts index ccb13fd3e..b2eae5e41 100644 --- a/src/app/templates/template-dom.component.ts +++ b/src/app/templates/template-dom.component.ts @@ -1,5 +1,6 @@ import { Component } from '@angular/core'; import { ColumnMode } from 'projects/ngx-datatable/src/public-api'; +import { Employee } from "../data.model"; @Component({ selector: 'inline-templates-demo', @@ -51,7 +52,7 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api'; ` }) export class InlineTemplatesComponent { - rows = []; + rows: Employee[] = []; joke = 'knock knock'; ColumnMode = ColumnMode; diff --git a/src/app/templates/template-obj.component.ts b/src/app/templates/template-obj.component.ts index 9822d9f3d..0433053b5 100644 --- a/src/app/templates/template-obj.component.ts +++ b/src/app/templates/template-obj.component.ts @@ -1,5 +1,7 @@ import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core'; import { ColumnMode } from 'projects/ngx-datatable/src/public-api'; +import { Employee } from "../data.model"; +import { TableColumn } from "projects/ngx-datatable/src/public-api"; @Component({ selector: 'template-ref-demo', @@ -40,8 +42,8 @@ export class TemplateRefTemplatesComponent implements OnInit { @ViewChild('editTmpl', { static: true }) editTmpl: TemplateRef; @ViewChild('hdrTpl', { static: true }) hdrTpl: TemplateRef; - rows = []; - columns = []; + rows: Employee[] = []; + columns: TableColumn[] = []; ColumnMode = ColumnMode; diff --git a/src/app/tree/client-tree.component.ts b/src/app/tree/client-tree.component.ts index 0ec654032..d48515df4 100644 --- a/src/app/tree/client-tree.component.ts +++ b/src/app/tree/client-tree.component.ts @@ -1,5 +1,7 @@ import { Component } from '@angular/core'; import { ColumnMode } from 'projects/ngx-datatable/src/public-api'; +import { Employee } from "../data.model"; +import { TreeStatus } from "projects/ngx-datatable/src/public-api"; @Component({ selector: 'client-side-tree-demo', @@ -48,7 +50,7 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api'; styles: ['.icon {height: 10px; width: 10px; }', '.disabled {opacity: 0.5; }'] }) export class ClientTreeComponent { - rows = []; + rows: (Employee & {treeStatus: TreeStatus})[] = []; ColumnMode = ColumnMode; diff --git a/src/app/tree/fullscreen.component.ts b/src/app/tree/fullscreen.component.ts index 1bd61743c..b66b63190 100644 --- a/src/app/tree/fullscreen.component.ts +++ b/src/app/tree/fullscreen.component.ts @@ -1,5 +1,7 @@ import { ChangeDetectorRef, Component } from '@angular/core'; import { ColumnMode } from 'projects/ngx-datatable/src/public-api'; +import { Employee } from "../data.model"; +import { TreeStatus } from "projects/ngx-datatable/src/public-api"; @Component({ selector: 'full-screen-tree-demo', @@ -59,7 +61,7 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api'; styles: ['.icon {height: 10px; width: 10px; }', '.disabled {opacity: 0.5; }'] }) export class FullScreenTreeComponent { - rows = []; + rows: (Employee & {treeStatus: TreeStatus})[] = []; lastIndex = 15; ColumnMode = ColumnMode;