@bhplugin/ng-datatable

Example

Document & Demos

Install

NPM

1npm install @bhplugin/ng-datatable --save

Yarn

1yarn add @bhplugin/ng-datatable

Bower

1bower install @bhplugin/ng-datatable --save

Usage

app.module.ts

1import { NgModule } from '@angular/core';
2import { DataTableModule } from '@bhplugin/ng-datatable';
3
4@NgModule({
5    imports: [
6        ...
7        DataTableModule
8    ],
9})
10export class AppModule {}

app.component.html

1<ng-datatable [rows]="rows" [columns]="cols"> </ng-datatable>

app.component.ts

1
2import { Component } from '@angular/core';
3import { colDef } from '@bhplugin/ng-datatable';
4
5@Component({
6    selector: 'app-root',
7    templateUrl: './app.component.html',
8})
9
10export class AppComponent {
11    cols: Array<colDef> = [];
12    rows: Array<any> = [];
13
14    constructor() {
15        this.initData();
16    }
17
18    initData(){
19        this.cols = [
20            { field: "id", title: "ID", filter: false },
21            { field: "name", title: "Name" },
22            { field: "username", title: "Username" },
23            { field: "email", title: "Email" },
24            { field: "phone", title: "Phone" },
25            { field: "date", title: "Date", type: "date" },
26            { field: "active", title: "Active", type: "bool" },
27            { field: "age", title: "Age", type: "number" },
28            { field: "address.city", title: "Address" },
29            { field: "company.name", title: "Company" },
30        ];
31
32        this.rows = [
33            {
34            id: 1,
35            name: "Leanne Graham",
36            username: "Bret",
37            email: "Sincere@april.biz",
38            address: {
39                street: "Kulas Light",
40                suite: "Apt. 556",
41                city: "Gwenborough",
42                zipcode: "92998-3874",
43                geo: {
44                    lat: "-37.3159",
45                    lng: "81.1496",
46                },
47            },
48            phone: "1-770-736-8031 x56442",
49            website: "hildegard.org",
50            company: {
51                name: "Romaguera-Crona",
52                catchPhrase: "Multi-layered client-server neural-net",
53                bs: "harness real-time e-markets",
54            },
55            date: "Tue Sep 27 2022 22:19:57",
56            age: 10,
57            active: true,
58            },
59            .......
60        ];
61    }
62}

Props

Props	Type	Default	Description
columns (required)	array	[]	table columns
rows (required)	array	[]	table rows
isServerMode	boolean	false	set true if you need server side pagination.
totalRows	number	0	total number of rows. totalRows required when isServerMode is true
skin	string	"bh-table-striped bh-table-hover"	custom class for skin ('bh-table-striped' - for stripe row, 'bh-table-hover' - for hover row, 'bh-table-bordered' - for bordered row, 'bh-table-compact' - for compact table)
loading	boolean	false	enable loader
hasCheckbox	boolean	false	enable checkbox

| hasNestedTemplate | boolean | false | enable nested template

| hasNestedTemplate | templateRef | TemplateRef | pass nested template whenever necessary

| search | string | "" | enable global search | | page | number | 1 | current page | | pageSize | number | 10 | number of rows per page | | pageSizeOptions | array | [10, 20, 30, 50, 100] | pagesize options | | showPageSize | boolean | true | enable pagesize options | | rowClass | array, function | "" | custom row class | | cellClass | array, function | "" | custom cell class | | sortable | boolean | true | enable sorting | | sortColumn | string | "id" | name of sort column | | sortDirection | string | "asc" | sort direction (asc or desc) | | columnFilter | boolean | false | enable individual column filter | | pagination | boolean | true | enable pagination | | showNumbers | boolean | true | enable numbers pagination | | showNumbersCount | number | 5 | show numbers of count in pagination | | showFirstPage | boolean | true | enable first page in pagination | | showLastPage | boolean | true | enable last page in pagination | | firstArrow | string | default arrow | custom first page arrow | | lastArrow | string | default arrow | custom last page arrow | | previousArrow | string | default arrow | custom previous page arrow | | nextArrow | string | default arrow | custom next page arrow | | paginationInfo | string | "Showing {0} to {1} of {2} entries" | custom pagination info | | noDataContent | string | No data available | custom no data message | | stickyHeader | boolean | false | enable fixed header | | height | string | 450px | only will be used when stickyHeader enabled | | stickyFirstColumn | boolean | false | enable fixed first column | | cloneHeaderInFooter | boolean | false | enable clone header in footer | | selectRowOnClick | boolean | false | enable to select row(checkbox) on row click |

Columns options

Props	Type	Default	Description
isUnique	boolean	false	db column is primary key or not
field	string	""	db column name
title	string	""	display column name
value	string	""	filter value if filter enabled
condition	string	"contain"	default condition for column filter if filter enabled
type	string	""	column type (string, date, number, bool)
width	string	""	custom width of column
minWidth	string	""	custom minimum width of column
maxWidth	string	""	custom maximum width of column
hide	boolean	false	show/hide column
filter	boolean	true	enable column filter
search	boolean	true	enabled global search
sort	boolean	true	enable sorting
cellRenderer	function, string		custom cell rendering
headerClass	string	""	custom header cell class
cellClass	string	""	custom cell class

Events

Name	Description
sortChange	will trigger when sorting changed
searchChange	will trigger when search changed
pageChange	will trigger when page changed
pageSizeChange	will trigger when pagesize changed
rowSelect	will trigger when row selected using checkbox
filterChange	will trigger when column filter changed
rowClick	will trigger when row clicked
rowDBClick	will trigger when row double clicked

Methods

Name	Description
reset	will reset all options like selected rows, filter, search, currennt page etc
getSelectedRows	will returns all selected rows
getColumnFilters	will return all column filters
clearSelectedRows	will unselect all selected rows
selectRow(index)	will select row with the given index (non-existent row will be ignored)
unselectRow(index)	will unselect row with the given index (non-existent row will be ignored)
isRowSelected(index)	will return true if the row with given index is selected

License

@bhplugin/ng-datatable is open-sourced software licensed under the MIT license.

Our other plugins

Vue3 Datatable - @bhplugin/vue3-datatable

Support