@binary-builder/ng-datatable v0.1.2

@bhplugin/ng-datatable

Example

Document & Demos

Install

NPM

npm install @bhplugin/ng-datatable --save

Yarn

yarn add @bhplugin/ng-datatable

Bower

bower install @bhplugin/ng-datatable --save

Usage

app.module.ts

import { NgModule } from '@angular/core';
import { DataTableModule } from '@bhplugin/ng-datatable';

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

app.component.html

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

app.component.ts

import { Component } from '@angular/core';
import { colDef } from '@bhplugin/ng-datatable';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
})

export class AppComponent {
    cols: Array<colDef> = [];
    rows: Array<any> = [];

    constructor() {
        this.initData();
    }

    initData(){
        this.cols = [
            { field: "id", title: "ID", filter: false },
            { field: "name", title: "Name" },
            { field: "username", title: "Username" },
            { field: "email", title: "Email" },
            { field: "phone", title: "Phone" },
            { field: "date", title: "Date", type: "date" },
            { field: "active", title: "Active", type: "bool" },
            { field: "age", title: "Age", type: "number" },
            { field: "address.city", title: "Address" },
            { field: "company.name", title: "Company" },
        ];

        this.rows = [
            {
            id: 1,
            name: "Leanne Graham",
            username: "Bret",
            email: "Sincere@april.biz",
            address: {
                street: "Kulas Light",
                suite: "Apt. 556",
                city: "Gwenborough",
                zipcode: "92998-3874",
                geo: {
                    lat: "-37.3159",
                    lng: "81.1496",
                },
            },
            phone: "1-770-736-8031 x56442",
            website: "hildegard.org",
            company: {
                name: "Romaguera-Crona",
                catchPhrase: "Multi-layered client-server neural-net",
                bs: "harness real-time e-markets",
            },
            date: "Tue Sep 27 2022 22:19:57",
            age: 10,
            active: true,
            },
            .......
        ];
    }
}

Props

| 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

Events

Methods

License

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

Our other plugins

Vue3 Datatable - @bhplugin/vue3-datatable

Support