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.