installation - https://github.com/akveo/ng2-smart-table#installation documentation - https://akveo.github.io/ng2-smart-table/#/documentation example - https://akveo.github.io/ng2-smart-table
server side pagination
search
column formatter
Installation
go to angular root of project ( aka where package.json exists)
execute :
npm install –save rxjs-compat hxxps://github.com/akveo/ng2-smart-table/issues/270#issuecomment-445528965
1
2
3
4
npm install --save ng2-completer
npm install --save ng2-smart-table
this will download & import the library to root_project\node_modules
we going to VSCode to parent .module.ts of the needed component and paste :
1
2
3
4
5
6
7
8
9
10
11
import { HttpClientModule } from '@angular/common/http';
import { Ng2SmartTableModule } from 'ng2-smart-table';
@NgModule({
declarations: [AppComponent],
imports: [
HttpClientModule,
Ng2SmartTableModule
]
})
we going to the needed .component.html and paste the :
1
2
//test
<ng2-smart-table [settings]="settings" [="" source="" ]="source"></ng2-smart-table>
we going to the needed .component.ts and paste the :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
import { HttpClient } from '@angular/common/http';
import { ServerDataSource } from 'ng2-smart-table';
export class PipisCrewTestComponent {
settings = {
columns: {
id: {
title: 'ID',
},
albumId: {
title: 'App',
},
title: {
title: 'Developer',
},
url: {
title: 'Url',
},
},
};
source: ServerDataSource;
constructor(http: HttpClient) {
this.source = new ServerDataSource(http, { endPoint: 'https://jsonplaceholder.typicode.com/photos' });
}
Table parameters
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
settings = {
pager : {perPage:50}, //pagination – rows per page
hideSubHeader: true, //hide header searchboxes for search (filters)
actions:{add:false, edit:false, delete:false}, //hide first column having ADD DELETE anchors
attr:{class:"table table-hover table-striped"}, //use bootstrap zebra style
columns: {
id: {
title: 'ID',
},
albumId: {
title: 'App',
},
title: {
title: 'Developer',
},
url: {
title: 'Url',
},
},
};
example of valuePrepareFunction
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
settings = {
hideSubHeader: true,
actions:{add:false, edit:false, delete:false},
attr:{class:"table table-hover table-striped"},
columns: {
id: {
title: 'ID',
valuePrepareFunction: (value) => {
if (value == 1)
return 'pipiscrew';
else
return value;
}
},
albumId: {
title: 'App',
},
title: {
title: 'Developer',
},
url: {
title: 'Url',
},
},
};
accessing other row fields via valuePrepareFunction
1
2
3
4
5
6
7
8
//src - https://github.com/akveo/ng2-smart-table/issues/394
albumId: {
title: 'App',
valuePrepareFunction: (cell, row) => {
console.log(row.id);
}
},
when we like to render the value as HTML, we have to set the column type to html. reference
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
/* settings = {
hideSubHeader: true,
actions:{add:false, edit:false, delete:false},
attr:{class:"table table-hover table-striped"},
columns: {*/
id: {
title: 'ID',
type: "html",
valuePrepareFunction: (value) => {
if (value == 1)
return '<i class="fab fa-accessible-icon">*';
else
return value;
}
},
/* albumId: {
title: 'App',
},
title: {
title: 'Developer',
},
url: {
title: 'Url',
},
},
};*/
the renderComponent, is responsible for rendering the cell content while in view mode, basic example with routerLink
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
//src - https://stackblitz.com/edit/angular-bqsxidq-omgedw?file=src/app/users/userlist/userlist.component.ts or https://github.com/varmamkm/angular-route-resolver-ng2-smart-table
settings = {
actions: false,
columns: {
username: {
title: 'User Name',
type: 'custom',
renderComponent: UserlistRowRenderComponent
},
name: { title: 'Full Name' },
email: { title: 'Email' }
}
};
//userlistrowrender.component.ts
// src - https://stackblitz.com/edit/angular-bqsxidq-omgedw?file=src/app/users/userlist/userlistrowrender.component.ts
import { Input, Component, OnInit } from '@angular/core';
import { ViewCell } from 'ng2-smart-table';
@Component({
template: `[]()`,
})
export class UserlistRowRenderComponent implements ViewCell, OnInit {
public username: string;
public userId: number;
@Input()
public value: string;
@Input()
rowData: any;
ngOnInit() {
this.username = this.value;
this.userId= this.rowData.id;
}
}
line 21 - use of variables (35,36)
use of renderComponent with dropdown button and EventEmitter to raise event to parent component
1
2
3
4
5
/*
https://github.com/pipiscrew/angular2_small_prjs/tree/master/ng2-smart-table-renderer_EventEmitter
https://github.com/pipiscrew/angular2_small_prjs/tree/master/ng2-smart-table-renderer_MultipleActions
*/
Turn GET calls to POST
Create a new class extending ServerDataSource (ng2-smart-table\lib\lib\data-source\server\server.data-source.d.ts)
1
2
3
4
5
6
7
8
9
10
11
12
13
//greets to aefox - https://github.com/akveo/ng2-smart-table/issues/828
//postserverdatasource.ts
import { Observable } from 'rxjs/internal/Observable';
import { ServerDataSource } from 'ng2-smart-table';
export class PostServerDataSource extends ServerDataSource {
protected requestElements(): Observable<any> {
let httpParams = this.createRequesParams();
return this.http.post(this.conf.endPoint, httpParams, { observe: 'response' });
}
}
then to .component.ts use instead ServerDataSource :
1
2
3
4
5
6
constructor(http: HttpClient) {
//this.source = new ServerDataSource(http, { endPoint: 'https://jsonplaceholder.typicode.com/photos' });
this.source = new PostServerDataSource(http, { endPoint: 'http://localhost:8000' });
}
Change POST parameters key name
by default is with underscore :
the ng2-smart-table ServerDataSource class by default accepts server-source.conf parameters (data-source\server\server-source.conf.d.ts) on constructor, enable us to set the key names :
1
2
//before - this.source = new PostServerDataSource(http, { endPoint: this.conf.endPoint});
this.source = new PostServerDataSource(http, { endPoint: this.conf.endPoint, pagerPageKey: "page", pagerLimitKey: "limit", filterFieldKey : "#field#" });
ref - when client side - The filterFunction used by columns searchboxes for search “ How to search column after applying valuePrepareFunction()”
Filter field with select
1
2
3
4
5
6
7
8
9
10
11
12
13
14
Roles: {
title: 'Role',filter: {
type: 'list',
config: {
selectText: '-none-',
list: [
{value: '1', title:'admin'},
{value: '2', title:'restricted'},
{value: '3', title:'entry'},
{value: '4', title:'report'},
],
}
}
}
Disable filter field
1
2
3
4
car_type: {
title: 'TestField',
filter: false
},
templates/frameworks from akveo team : ngx-admin UI Kitten Eva Design System
–
wenzhixin.bootstrap-table - usage without any framework</any></i>
origin - https://www.pipiscrew.com/?p=15033 from-wenzhixin-bootstrap-table-to-angular-akveo-ng2-smart-table