es-ng6-bs4-table v1.7.1
ES Angular 6 Bootstrap 4 Table
ToDo List
- editable
- more method
- more events
- more handler
Features
- create for bootstrap 4
- card view in mobile
- get json data from server
- flexible header and cell template
- support client and server pagination
- keep params on url
- easy to extend tool
- i18n
Table of contents
Setup
First you need to install the npm module
npm install es-ng6-bs4-table
Then import bootstrap 4 css in angular.json
{
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.css",
"../node_modules/open-iconic/font/css/open-iconic-bootstrap.css"
]
}
Last import the 'HttpClientModule' and 'BsTableModule' to module
import {NgModule} from "@angular/core"
import {HttpClientModule} from "@angular/common/http";
import {BsTableModule} from "es-ng6-bs4-table";
@NgModule{
imports: [
HttpClientModule,
BsTableModule,
//if you want to keep search result
//RouterModule
],
/* if you want to add some http interceptors
providers: [
{provide: HTTP_INTERCEPTORS ...}
]
*/
}
export class AppModule{}
Usage
Client side pagination
<es-ng-table></es-ng-table>
Client side pagination structure
Array<any>
Server side pagination
<es-ng-sd-table></es-ng-sd-table>
Server side pagination structure
{
rows: Array<any>;
total: number;
}
Server side params
{
limit: number;
offset: number;
sort: string;
order: string;
search: string;
query: string; //json
}
Basic Usage
ts:
export class AppComponent {
data = [
{id: 1, name: "Sean Johnston", score: 99, description: "d1"},
{id: 2, name: "Morgan Davies", score: 80, description: "d2"},
{id: 3, name: "Morgan John", score: 80, description: "d3"},
{id: 4, name: "Tommy Walker", score: 80, description: "d4"},
{id: 5, name: "William Lee", score: 80, description: "d5"},
{id: 6, name: "Russell Brady", score: 80, description: "d6"},
{id: 7, name: "Isaiah Ferguson", score: 80, description: "d7"},
{id: 8, name: "Dominic Lynch", score: 80, description: "d8"},
{id: 9, name: "Alberto Walls", score: 80, description: "d9"},
{id: 10, name: "Jerry Pate", score: 80, description: "d10"},
{id: 11, name: "Spencer Gordon", score: 79, description: "d11"},
]
}
html:
<div class="container-fluid">
<h1>Basic Use</h1>
<es-ng-table [data]="data">
<es-ng-table-col field="state" [checkbox]="true"></es-ng-table-col>
<es-ng-table-col title="ID" field="id"></es-ng-table-col>
<es-ng-table-col title="Name" field="name"></es-ng-table-col>
<es-ng-table-col title="Score" field="score"></es-ng-table-col>
<es-ng-table-col title="Description" field="description"></es-ng-table-col>
</es-ng-table>
</div>
Formatter and Text Template
ts:
export class AppComponent {
formatter = (value: any) => {
return value + ' postfix'
}
}
html:
<es-ng-table [data]="data">
<es-ng-table-col title="Name" field="name"></es-ng-table-col>
<es-ng-table-col title="Score" field="score">
<ng-template #textTemplate let-row="row" let-value="value" let-index="index" let-formatter="formatter">
<button>{{value}}</button>
</ng-template>
</es-ng-table-col>
<es-ng-table-col title="Description" field="description" [formatter]="formatter"></es-ng-table-col>
</es-ng-table>
Keep
IMPORTANT: NEED IMPORT "RouterModule". ONLY ONE KEEP IN ONE PAGE.
You will see url change after any params changes(like: page, size, search...)
html:
<es-ng-table [data]="data" [keep]="true"></es-ng-table>
Fetch Data From API
html:
<es-ng-table url="http://domain/path">
<es-ng-table-col field="state" [checkbox]="true"></es-ng-table-col>
<es-ng-table-col title="ID" field="id"></es-ng-table-col>
<es-ng-table-col title="Name" field="name"></es-ng-table-col>
</es-ng-table>
i18n
The default locale is en-us. Just provide "NG_TABLE_I18N" to change locale.
@NgModule{
imports: [BsTableModule],
providers: [
{provide: NG_TABLE_I18N, useClass: NgTableZhTwService}
]
}
Current locale support: 'zh-tw', 'en-us'
Tool
add tool in html:
<es-ng-table>
<es-ng-table-tool-bar>
<div class="row">
<!--add tool here-->
</div>
</es-ng-table-tool-bar>
</es-ng-table>
General Search
html:
<es-ng-table [data]="data">
<es-ng-table-tool-bar>
<div class="row">
<es-ng-table-general-search></es-ng-table-general-search>
</div>
</es-ng-table-tool-bar>
<es-ng-table-col title="ID" field="id"></es-ng-table-col>
<es-ng-table-col title="Name" field="name"></es-ng-table-col>
</es-ng-table>
Advanced Search
You can user <ng-template #editTemplate let-col="col" let-obj="obj"> to customize form control
html:
<es-ng-table [data]="data">
<es-ng-table-tool-bar>
<div class="row">
<es-ng-table-advanced-search></es-ng-table-advanced-search>
</div>
</es-ng-table-tool-bar>
<es-ng-table-col title="ID" field="id"></es-ng-table-col>
<es-ng-table-col title="Name" field="name">
<ng-template #editTemplate let-col="col" let-obj="obj">
<select class="form-control" name="{{col.field}}" [(ngModel)]="obj[col.field]">
<option *ngFor="let row of data" [ngValue]="row.name">{{row.name}}</option>
</select>
</ng-template>
</es-ng-table-col>
</es-ng-table>
Hide Column
html:
<es-ng-table [data]="data">
<es-ng-table-tool-bar>
<div class="row col-md-12">
<es-ng-table-hide-col></es-ng-table-hide-col>
</div>
</es-ng-table-tool-bar>
<es-ng-table-col field="state" [checkbox]="true"></es-ng-table-col>
<es-ng-table-col title="ID" field="id"></es-ng-table-col>
<es-ng-table-col title="Name" field="name"></es-ng-table-col>
</es-ng-table>
Extend Tool
create tool component with inject NG_TABLE_TOKEN
export class NgTableGeneralSearchComponent implements OnInit {
searchTerm: string = "";
constructor(
@Inject(NG_TABLE_TOKEN) private table: NgTable
) { }
ngOnInit() {
this.table.search$
.pipe(take(1))
.subscribe((term) =>this.searchTerm = term);
}
search(searchTerm: string){
this.table.generalSearch(searchTerm);
}
}
then, put this component in
<es-ng-table [data]="data">
<es-ng-table-tool-bar>
<es-ng-table-general-search></es-ng-table-general-search>
</es-ng-table-tool-bar>
</es-ng-table>
Directive
esSearchCaseSensitive
The default search is case sensitive. Just add this change it.
<es-ng-table [esSearchCaseSensitive]="false"></es-ng-table>
esAdvancedSearchCaseSensitive
The default advanced search is case sensitive. Just add this to change it.
<es-ng-table [esAdvancedSearchCaseSensitive]="false"></es-ng-table>
Variable
NgTableComponent & NgSdTableComponent
Name | Type | Default | Description |
---|---|---|---|
data | Array | data of rows. | |
rows | Array | [] | current data of rows. |
total | number | size of total data. | |
page | number | 1 | current page. |
size | number | 10 | size in a page. |
search | string | search text, used in general search. | |
query | string | query json, user in advanced search. | |
sort | string | sort by field. | |
order | 'asc' 'desc' | 'asc' | order. |
url | string | get json from url. | |
keep | boolean | false | keep search result. |
NgTableColComponent
Name | Type | Default | Description |
---|---|---|---|
title | string | th text. | |
field | string | field name in row. | |
checkbox | boolean | false | is checkbox cell? |
radio | boolean | false | is radio cell? |
hidden | boolean | false | is column hidden? |
Method
NgTableComponent & NgSdTableComponent
Name | Param | Return | Description |
---|---|---|---|
refresh | void | refresh rows. | |
generalSearch | (term: string) | void | general search. |
advancedSearch | (query: any) | void | advance search. |
getSelections | (field: string) | Array | get selected rows. |
hideColumn | (col: NgTableColComponent) | void | hide column. |
showColumn | (col: NgTableColComponent) | void | show column. |
toggleColumn | (col: NgTableColComponent) | void | toggle column. |
hideColumnByIndex | (index: number) | void | hide column by index. |
showColumnByIndex | (index: number) | void | show column by index. |
toggleColumnByIndex | (index: number) | void | toggle column by index. |
hideColumnByField | (field: string) | void | hide column by field. |
showColumnByField | (field: string) | void | show column by field. |
toggleColumnByField | (field: string) | void | toggle column by field. |
NgTableColComponent
Name | Param | Return | Description |
---|---|---|---|
hide | void | hide column. | |
show | void | show column. | |
toggle | void | toggle column. |
Input
NgTableComponent & NgSdTableComponent
Name | Type | Default | Description |
---|---|---|---|
data | Array | data of rows. | |
url | string | get json from url. | |
sort | string | sort by field. | |
order | 'asc' 'desc' | 'asc' | order. |
keep | boolean | false | keep search result. |
queryFun | Function | (client pagination) advanced search. (row: any, index: number, query: any) => Array | |
responseHandler | Function | handler after get data from url. (data: any) => any |
NgTableColComponent
Name | Type | Default | Description |
---|---|---|---|
title | string | th text. | |
field | string | field name in row. | |
checkbox | boolean | false | is checkbox cell? |
radio | boolean | false | is radio cell? |
hidden | boolean | false | is column hidden? |
classArray | Array | [] | class of th and td. |
formatter | Function | formatter cell. (value: any) => string |
Output
NgTableComponent & NgSdTableComponent
Name | Type | Description |
---|---|---|
onRowClick | any | fired when row be clicked. |
onInitKeepParams | any | fired when init keep params |
NgTableColComponent
Name | Type | Description |
---|---|---|
onCellClick | any | fired when cell be clicked. |
Demo
git clone https://github.com/endsound0211/es-ng6-bs4-table.git
npm install
ng serve
5 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago