A lightweight, bootstrap styled Angular data table component!

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 " , . . . ]

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.