import { Component, OnInit } from '@angular/core';

import { TableData } from './table-data';

// webpack html imports

let template = require('./[Link]');

@Component({
selector: 'table-demo',
template
})
export class TableDemoComponent implements OnInit {
public rows:Array<any> = [];
public columns:Array<any> = [
{title: 'Name', name: 'name', filtering: {filterString: '',
placeholder: 'Filter by name'}},
{
title: 'Position',
name: 'position',
sort: false,
filtering: {filterString: '', placeholder: 'Filter by position'}
},
{title: 'Office', className: ['office-header', 'text-success'],
name: 'office', sort: 'asc'},
{title: 'Extn.', name: 'ext', sort: '', filtering: {filterString:
'', placeholder: 'Filter by extn.'}},
{title: 'Start date', className: 'text-warning', name:
'startDate'},
{title: 'Salary ($)', name: 'salary'}
];
public page:number = 1;
public itemsPerPage:number = 10;
public maxSize:number = 5;
public numPages:number = 1;
public length:number = 0;

public config:any = {
paging: true,
sorting: {columns: [Link]},
filtering: {filterString: ''},
className: ['table-striped', 'table-bordered']
};

private data:Array<any> = TableData;

public constructor() {
[Link] = [Link];
}

public ngOnInit():void {
[Link]([Link]);
}

public changePage(page:any, data:Array<any> = [Link]):Array<any>

{
let start = ([Link] - 1) * [Link];
let end = [Link] > -1 ? (start + [Link]) :
[Link];
return [Link](start, end);
}

public changeSort(data:any, config:any):any {

 if (![Link]) {
return data;
}

let columns = [Link] || [];

let columnName:string = void 0;
let sort:string = void 0;

for (let i = 0; i < [Link]; i++) {

if (columns[i].sort !== '' && columns[i].sort !== false) {
columnName = columns[i].name;
sort = columns[i].sort;
}
}

if (!columnName) {
return data;
}

// simple sorting
return [Link]((previous:any, current:any) => {
if (previous[columnName] > current[columnName]) {
return sort === 'desc' ? -1 : 1;
} else if (previous[columnName] < current[columnName]) {
return sort === 'asc' ? -1 : 1;
}
return 0;
});
}

public changeFilter(data:any, config:any):any {

let filteredData:Array<any> = data;
[Link]((column:any) => {
if ([Link]) {
filteredData = [Link]((item:any) => {
return
item[[Link]].match([Link]);
});
}
});

if (![Link]) {
return filteredData;
}

if ([Link]) {
return [Link]((item:any) =>

item[[Link]].match([Link]
ring));
}

let tempArray:Array<any> = [];

[Link]((item:any) => {
let flag = false;
[Link]((column:any) => {
if
(item[[Link]].toString().match([Link]
)) {
flag = true;
}
 });
if (flag) {
[Link](item);
}
});
filteredData = tempArray;

return filteredData;
}

public onChangeTable(config:any, page:any = {page: [Link],

itemsPerPage: [Link]}):any {
if ([Link]) {
[Link]([Link], [Link]);
}

if ([Link]) {
[Link]([Link], [Link]);
}

let filteredData = [Link]([Link], [Link]);

let sortedData = [Link](filteredData, [Link]);
[Link] = page && [Link] ? [Link](page,
sortedData) : sortedData;
[Link] = [Link];
}

public onCellClick(data: any): any {

[Link](data);
}
}
---------------------------------Html-----------------------------------------------

<div class="row">
<div class="col-md-4">
<input *ngIf="[Link]" placeholder="Filter all columns"
[ngTableFiltering]="[Link]"
class="form-control"
(tableChanged)="onChangeTable(config)"/>
</div>
</div>
<br>
<ng-table [config]="config"
(tableChanged)="onChangeTable(config)"
(cellClicked)="onCellClick($event)"
[rows]="rows" [columns]="columns">
</ng-table>
<pagination *ngIf="[Link]"
class="pagination-sm"
[(ngModel)]="page"
[totalItems]="length"
[itemsPerPage]="itemsPerPage"
[maxSize]="maxSize"
[boundaryLinks]="true"
[rotate]="false"
(pageChanged)="onChangeTable(config, $event)"
(numPages)="numPages = $event">
</pagination>
<pre *ngIf="[Link]" class="card card-block card-header">Page:
{{page}} / {{numPages}}</pre>

[Link]