@aspire.software/aspire-datatable v1.0.2

aspire-datatable

aspire-datatable is an Angular component for creating data table for large and complex data with lots of configurable features.

It is developed using Angular CLI version 9.1.4.

Installations

npm install @aspire.software/aspire-datatable --save

There are some other dependencies required:

• bootstrap >=4.4.1 npm install bootstrap --save
• @ng-bootstrap/ng-bootstrap >=6.1.0 npm install ng-bootstrap/ng-bootstrap --save

Usage

Import aspire-datatable module as below: import { AspireDatatableModule } from 'aspire-datatable';

Inputs

Register AspireDatatableModule in your module.

Use markup as below:

<aspire-datatable [headers]="headers" [records]="records" [options]="options" [popup]="popup" (actionConfirm)="actionConfirm($event)">
</aspire-datatable>

Set details as below:

headers:

headers = [
    { field: 'name', type: 'string' },
    { field: 'status', type: 'boolean' },
    { field: 'date', type: 'date' },
    { field: 'age', type: 'number' },
    { field: 'customColumn', type: 'html' },
    { field: 'action', type: 'any' }
];

For actions column in datatable, field name must be action. In case our action column does not fulfil your criteria you can configure your custom action column your own way. You can set your html code with field type html in case you want your custom HTML tag in column.

records:

records = [
    {
        name: 'John',
        status: 'yes',
        date: '01/01/2020',
        age: 25,
        customColumn: '<span>Column</span>',
        action: {
            id: 1,
            classType: 'fa fa-cog',
            perform: [
                { perAction: 'edit', url: '1/edit' },
                { perAction: 'delete', url: null, popupConfirm: true }
            ]
        }
    }
];

options:

options = {
    tableStyle: 'table table-striped table-bordered',
    headerStyle: 'thead-light',
    recordsPerPageOptions: [5, 10, 20, 30, 50]
};

popup:

Popup = [
    { body: 'Do You want to delete this record?', header: 'Delete Action', perAction: 'delete' }
];

actionConfirm:

onActionConfirm(event) {
    if (event && event.action === 'delete') {
        performDelete(event.item);
    }
}

API

You can create datatable using below options:

Below is the example to set options and sub-options for datatable:

options = {
    tableStyle: 'table table-striped table-bordered',
    headerStyle: 'thead-light',
    recordsPerPageOptions: [5, 10, 20, 30, 50],
    paginationOptions: {
        ariaLabel: 'Default pagination',
        disable: false,
        paginationStyle: 'pagination justify-content-center',
        pageItemStyle: 'page-item',
        pageLinkStyle: 'page-link',
        firstPageText: '<<',
        prevPageText: '<',
        nextPageText: '>',
        lastPageText: '>>'
    },
    componentsClass: {
        topBlankComponentClassList: 'col-md-6 col-sm-12',
        bottomBlankComponentClassList: 'col-md-4 col-sm-12',
        pagination: {
            position: 'bottom-right',
            classList: 'col-md-8 col-sm-8 mt-2 mt-sm-0',
            alignmentClassList: 'justify-right justify-center-center'
        },
        recordsCount: {
            position: 'bottom-left',
            classList: 'col-md-4 col-sm-4 mt-2 mt-sm-0',
            alignmentClassList: 'justify-left justify-center-center'
        },
        search: {
            position: 'top-right',
            classList: 'col-md-6 col-sm-6 mb-2 mb-sm-0',
            alignmentClassList: 'justify-right'
        },
        recordsPerPage: {
            position: 'top-left',
            classList: 'col-md-6 col-sm-6',
            alignmentClassList: 'justify-left'
        }
    }
};

Example

You can find full source code of demo for aspire-datatable at aspire-datatable-demo.