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
• Usage
  • Basic Usage
  • Search
  • Formatter and Text Template
  • Keep
  • Fetch Data From API
  • i18n
• Tool
  • General Search
  • Advanced Search
  • Hide Column
  • Extend Tool
• Directive
  • esSearchCaseSensitive
  • esAdvancedSearchCaseSensitive
• 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>

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