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

Demo of the library

Demo

Features added:

• Changed Data type in DatatableOptions to generic
• Changed search event name to filter
• Fixed undefined values bugs

Features will be added next version:

• Checkbox columns will be added
• Textbox columns will be added
• Loading style will be added
• Export as PDF will be added
• Export as CSV file will be added

You can contact with me and give me feedbacks.