ng-bootstrap-table (WIP)

A lightweight, bootstrap styled Angular data table component!

Prerequisites:

Make sure that you have already installed bootstrap! If you do not, you can add it by CDN. Just add a link tag into your index.html like the link below:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

Otherwise, you can add it via NPM simple by running the following command:

npm install --save bootstrap

Then you have to link the bootstrap.min.css into you styles in your angular.json file.

 "styles": [
              ...
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              ...
            ]

Installation:

Install the ng-bootstrap-table package via NPM using the command below:

npm i ng-bootstrap-table

Importing the BootstrapTableModule

import { BootstrapTableModule } from 'ng-bootstrap-table';

@NgModule({
  ...
   imports: [
      ...,
      BootstrapTableModule 
   ],
   ...
})
export class AppModule { }

Usage examples

Dynamic rows and columns

<b-table [columns]="columns" [value]="data" [striped]="true" [bordered]="true" [small]="true" (onRowUnselect)="selectedRow=$event">
    <ng-template bTemplate="header">
      <tr>
        <th *ngFor="let col of columns">{{col.header}}</th>
      </tr>
    </ng-template>
    <ng-template bTemplate="body" let-rowData>
      <tr [bSelectableRow]="rowData" [ngClass]="{'table-active':selectedRow?.selected && selectedRow?.data===rowData}">
        <td *ngFor="let col of columns">{{rowData[col.field]}}</td>
      </tr>
    </ng-template>
  </b-table>

Column definition

  columns:BTableColumn[]=[
    {header:'Name',field:'name'},
    {header:'Username',field:'username'},
    {header:'Email',field:'email'},
    {header:'Phone',field:'phone'},
    {header:'Website',field:'website'}
  ];

Paginator configuration

Alternatively, you can configure the paginator by providing a PaginatorConfig object in the paginatorConfig attribute of b-table. With this you will be abple to adjust to paginator sizing and alignment.

export class PaginatorConfig {
    sizing: Sizing;
    alignment: Alignment = Alignment.RIGHT;
}

For example:

    this.pConfig= new PaginatorConfig();
    this.pConfig.sizing = Sizing.SMALL;
    this.pConfig.alignment= Alignment.CENTER;

After that, you have to enable paginator into b-table component like below.

<b-table *ngIf="data" [columns]="columns" [value]="data" [striped]="true" [bordered]="true" [small]="true"
    [paginator]="true" [paginatorConfig]="pConfig" [rows]="rows" [totalRecords]="_data?.length" [hover]="true"
    (onRowSelect)="selectedRow=$event;onRowSelect($event)" (onRowUnselect)="selectedRow=$event;onRowUnselect($event)"
    (onPageChange)="onPageChange($event)">
    <ng-template bTemplate="header">
      <tr>
        <th *ngFor="let col of columns">{{col.header}}</th>
      </tr>
    </ng-template>
    <ng-template bTemplate="body" let-rowData>
      <tr [bSelectableRow]="rowData" [ngClass]="{'table-active':selectedRow?.selected && selectedRow?.data===rowData}">
        <td *ngFor="let col of columns">{{rowData[col.field]}}</td>
      </tr>
    </ng-template>
  </b-table>

Documentation

List of all supported properties which must/can be used with b-table.

Property | Type | Default | Short Description --- | --- | --- | --- columns | BTableColumn array | null | An array of objects to represent dynamic columns. value | array | null | An array of objects to display. paginator | boolean | false | Defines if the table should be have a paginator or not. paginatorConfig | PaginatorConfig | Alignment.RIGHT | Provides configuration for the paginator. rows | number | null | Defines the total number of rows per page in the table. totalRecords | number | null | The total number of value entries. striped | boolean | null | Makes table striped by adding the .table-striped class. bordered | boolean | null | Makes table bordered by adding the .table-bordered class. borderless | boolean | null | Makes table borderless by adding the .table-borderless class. small | boolean | null | Makes table small by adding the .table-sm class. dark | boolean | null | Makes table dark by adding the .table-dark class. hover | boolean | null | Makes table hoverable by adding the .table-hover class. headLight | boolean | null | Makes table head light by adding the .thead-light class. headDark | boolean | null | Makes table head dark by adding the .thead-dark class. responsive | boolean | false | Makes table responsive by adding the .table-responsive class.

List of events

Event | Parameters | Description --- | --- | --- onRowSelect | BRowEvent | Callback to be invoked when a row is selected. onRowUnselect | BRowEvent | Callback to be invoked when a row was unselected. onPageChange | PageEvent | Callback to be invoked when a page is changed.

PageEvent event format

onPageChange: Returns a PageEvent with the following stracture.

{
  nextPage: 3,
  activePage: 2,
  previousPage: 1,
  rowsPerPage: 4,
  totalRecords: 10
  totalPages: 3,
  limit: 4,
  offset: 4
}

BRowEvent event format

{
    originalEvent:any,
    data:any,
    selected:boolean
}

Contribution

Feel free to contribute and/or report a bug at the GitHub Repository.

License

ng-bootstrap-table is released under the Apache license.