es-ng-bs-table

ES Angular bootstrap Table

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 search result on url
• easy to extend tool

Table of contents

• Setup
• Usage
  • Basic Usage
  • General Search
  • Formatter and Text Template
  • Keep
  • Fetch Data From API
• Variable
• Method
• Input
• Output

Setup

First you need to install the npm module

npm install es-ng-bs-table

Then import bootstrap 4 css in .angular-cli.json

{
  "apps": {
     "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-ng-bs-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>

General Search

html:

<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-col title="Name" field="name"></es-ng-table-col>
</es-ng-table>

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>

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?

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.

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?
formatter	Function		formatter cell. (value: any) => string

Output

NgTableComponent & NgSdTableComponent

Name	Type	Description
onRowClick	any	fired when row be clicked.

NgTableColComponent

Name	Type	Description
onCellClick	any	fired when cell be clicked.