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

Setup
Usage
Tool
Variable
Method
Input
Output
Demo

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>

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`		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.

NgTableColComponent

Name	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?
`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

omelsoft/es-ng6-bs4-table

ES Angular 6 Bootstrap 4 Table

ToDo List

Features

Table of contents

Setup

Usage

Basic Usage

Formatter and Text Template

Keep

Fetch Data From API

i18n

Tool

General Search

Advanced Search

Hide Column

Extend Tool

Variable

NgTableComponent & NgSdTableComponent

NgTableColComponent

Method

NgTableComponent & NgSdTableComponent

NgTableColComponent

Input

NgTableComponent & NgSdTableComponent

NgTableColComponent

Output

NgTableComponent & NgSdTableComponent

NgTableColComponent

Demo