Nga-datatable NPM

NgaDatable: The library is created for generating datatable

NgaDatable is a Fast and light datatable generator in Angular

Installation

Use the package manager npm to install NgaDatable.

npm install nga-datatable

Usage

First import NgaDatatableModule module in your module like below

import { NgaDatatableModule } from 'nga-datatable';
...
@NgModule({
    ...
    imports: [NgaDatatableModule]
})

Then define a property to give some options to

import { DatatableOptions } from 'nga-datatable';
...
dtOptions: DatatableOptions = {
    columns: {
        name: string,
        label?: string,
        type?: 'button'|'number'| 'menu' | 'html',
        containerClassName?: string,
        sortable?: boolean,
        buttons?: Array<{
            html?:string,
            click?: (item:any) => {
            },
            className?: string,
        }>,
        menuItems?: Array<{
            html?:string,
            click?: (item:any) => {
            },
            className?: string,
        }>,
        formattedData: (item: any, rowData: any) => {
            return 'Customized HTML Or Text';
        }
    }
}

The specification and type of columns should be clear whether it is a button or a normal text you must specify the name of the column and other options are optional.

label: Text of the column for displaying.
type: It specifies type of the column for example it is button or number and 'menu' for displaying menu or 'html' for displaying html or text. It's default is undefined.
containerClassName: You can set CSS class of column record container class
sortable: It enable or disable column sorting, It's default is true. (It's not workind in this version, I'll add in next version)
buttons: List of buttons that you can add in the Datatable.
- html: Content of the button, you can add any HTML element to html
- click: You can add any Typescript code inside it and item returns current row data
- className: You can pass CSS class of the button
menuItems: Menu list is similar to button list
formattedData: You can display customized text in the Datatable

this.dtOptions = {
    ...this.dtOptions,
    data: [
        {
            [name of the culumn]: [it's value],
            ...[rest columns] 
        }
    ]
};

Tip:

The name of the column and data key must be the same

this.dtOptions = {
    ...this.dtOptions,
    language: {
        search: string,
        search_in: string,
        record: string,
        row: string,
        of: string,
        to: string,
        show: string,
        zeroData: string,
        next: string,
        prev: string,
        rows: string,
        selected: string
    }
}

You can translate all texts of the Datatable into any language

this.dtOptions = {
    ...this.dtOptions,
    options: {
        rowVisible?: boolean,
        sizes?: Array<number>,
        searchBoxVisible?: boolean,
        multiSelect?:boolean,
        singleSelect?: boolean,
        paginationStyle?: {
            className?: string
        },
        next?: {
            html?: string,
            className?: string
        },
            prev?: {
            html?: string,
            className?: string
        }
    }
}

rowVisible: Indicates row number is displayed or not, default is false
sizes: You can change size list of the Datatable.
searchBoxVisible: You can hide or show the search box default is true.
multiSelect: If you want to select multiple rows, set it to true, default is false.
singleSelect: If you want to select single row, set it to true, default is false.
paginationStyle: You can change style of pagination.
next, prev: You can change style of next and prev button inside pagination.
- html: Content of next or prev button, you can add any HTML element to html
- className: customize CSS class for next and prev button.

this.dtOptions = {
    ...this.dtOptions,
    beforeTable: [
        {
            type: 'button',
            html: string,
            click: (item:any)=> {

            },
            className: string,
            argument?: 'all_rows' | 'selected_rows',
            operation?: 'select_all' | 'unselect_all'
        }
    ], 
    beforeSizeButton: (Similar to beforTable),
    beforePagination: (Similar to beforTable),
    afterPagination: (Similar to beforTable),
}

beforeTable: You can add some fields before table
beforeSizeButton: You can add some fields before size button
beforePagination: You can add some fields before pagination
afterPagination: You can add some fields after pagination
- type: In the current version you can add only button
- html: The content of button
- click: You must add any Typescript function, item returns all_rows or selected_rows
- className: You must set Customized CSS class for the button
- argument: all_rows returns all data of the Datatable | selected_rows returns just selected rows, default is all_rows
- operation: You can some default actions to the button, select_all indicates when you click on the button all rows will be selected, unselect_all indicates when you click on the button all rows will be unselected

How to use in HTML side

<nga-datatable [dtOptions]="dtOptions"></nga-datatable>

If you want to fetch the data section by section, you can use the following:

<nga-datatable 
    [dtOptions]="dtOptions"
    [isChunk]='true'
    (filter)="yourFilterFunction($event)"
    [totalRecord]="totalRecorsNumber"
></nga-datatable>

isChunk: It indicates to retrieve data section by section, default is false
filter: This event returns the current state of the Datatable
totalRecord: It takes total number of records to create pagination