@aspire.software/aspire-datatable

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

Input	Type	Required	Description
headers	object	YES	array of headers that need to be shown in column header in the data table. Here type helps to perform actions on it like date to display it in given format.
records	object	YES	array of objects to be displayed in data table.
options	object	Optional	options refers to configure datatable as per need. Here we have different configuration of components along with configurable ui.
popup	object	Optional	array of popup component data like content, header, etc... that supports multiple popups for multiple use.
actionConfirm	function	Optional	actionConfirm is callback function for popups

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:

Option	Default	Description
tableStyle	'table table-striped table-bordered'	Set custom css class list to style your datatable
headerStyle	'thead-light'	It sets custom css class list to style table header
tableRowStyle	''	Set custom css class list to style table rows
tableDataStyle	''	Set custom css class list to style table data i.e. columns
page	1	It sets current/active page in datatable.
searchingStyle	''	Set custom css class list to style search component
noRecordFoundMessage	'No Data Found'	It sets custom message for no data
itemsPerPage	10	This option sets items per page in datatable. If page size selector and pagination is disabled i.e. paginationOptions.disable is true or showRecordsPerPageSelector and showPagination both set to false then it will display all records on single page.
resetPagination	true	To reset pagination any true or false value can be accepted
showSorting	true	To show/hide sorting on columns
showSearch	true	show/hide search component
showRecordsCount	true	show/hide records count component
showPagination	true	show/hide pagination component
showRecordsPerPageSelector	true	show/hide records per page select box component
recordsPerPageOptions	[5, 10, 20, 30, 50]	This option sets options of records per page selector. By default itemsPerPage value will be selected option.
dateFormat	'dd/MM/yyyy'	Sets date fields with given custom format in datatable
ariaLabel	'Default pagination'	Sets aria-label attribute value for pagination component. This option is sub-option of paginationOptions and can be set as paginationOptions: { ariaLabel:'Default Pagination' }
disable	false	disable pagination based on value set. This option is sub-option of paginationOptions and can be set as paginationOptions: { disable:false }
paginationStyle	'pagination justify-content-center'	Set custom css class list to style pagination component. This option is sub-option of paginationOptions and can be set as paginationOptions: { paginationStyle:'pagination' }
pageItemStyle	'page-item'	Set custom css class list to style items of pagination component. This option is sub-option of paginationOptions and can be set as paginationOptions: { pageItemStyle:'page-item' }
pageLinkStyle	'page-link'	Set custom css class list to style link of items in pagination component. This option is sub-option of paginationOptions and can be set as paginationOptions: { pageLinkStyle:'page-link' }
firstPageText	'<<'	Add custom text for button to navigate to first page. This option is sub-option of paginationOptions and can be set as paginationOptions: { firstPageText:'<<' }
prevPageText	'<'	Add custom text for button to navigate to previous page. This option is sub-option of paginationOptions and can be set as paginationOptions: { prevPageText:'<' }
nextPageText	'>'	Add custom text for button to navigate to next page. This option is sub-option of paginationOptions and can be set as paginationOptions: { nextPageText:'>' }
lastPageText	'>>'	Add custom text for button to navigate to last page. This option is sub-option of paginationOptions and can be set as paginationOptions: { lastPageText:'>>' }
topBlankComponentClassList	'col-md-6 col-sm-12'	This option sets empty block at top of the datatable with given css class. Suppose we have set showRecordsPerPageSelector to false and componentsClass.search.classList is col-md-4 and componentsClass.search.position is top-right then topBlankComponentClassList value set to col-md-8. This option is sub-option of componentsClass and can be set as componentsClass: { topBlankComponentClassList:'col-md-6' }
bottomBlankComponentClassList	'col-md-4 col-sm-12'	This option sets empty block at bottom of the datatable with given css class. Suppose we have set showRecordsCount to false and componentsClass.pagination.classList is col-md-8 and componentsClass.pagination.position is bottom-right then bottomBlankComponentClassList value set to col-md-4. This option is sub-option of componentsClass and can be set as componentsClass: { bottomBlankComponentClassList:'col-md-6' }
pagination.position	'bottom-right'	This option sets position of pagination component. top-left, top-center, top-right, bottom-left, bottom-center, bottom-right are the possible options for position values. This option is sub-option of componentsClass and can be set as componentsClass: { pagination: { position:'bottom-right' } }
pagination.classList	'col-md-8 col-sm-8 mt-2 mt-sm-0'	This option sets custom css class list to position pagination component. This option is sub-option of componentsClass and can be set as componentsClass: { pagination: { classList:'col-md-8' } }
pagination.alignmentClassList	'justify-right justify-center-center'	This option sets custom css class list for alignment of pagination component. This option is sub-option of componentsClass and can be set as componentsClass: { pagination: { alignmentClassList:'justify-right' } }
recordsCount.position	'bottom-left'	This option sets position of records count component. top-left, top-center, top-right, bottom-left, bottom-center, bottom-right are the possible options for position values. This option is sub-option of componentsClass and can be set as componentsClass: { recordsCount: { position:'bottom-left' } }
recordsCount.classList	'col-md-4 col-sm-4 mt-2 mt-sm-0'	This option sets custom css class list to position records count component. This option is sub-option of componentsClass and can be set as componentsClass: { recordsCount: { classList:'col-md-4' } }
recordsCount.alignmentClassList	'justify-left justify-center-center'	This option sets custom css class list for alignment of records count component. This option is sub-option of componentsClass and can be set as componentsClass: { recordsCount: { alignmentClassList:'justify-left' } }
search.position	'top-right'	This option sets position of search component. top-left, top-center, top-right, bottom-left, bottom-center, bottom-right are the possible options for position values. This option is sub-option of componentsClass and can be set as componentsClass: { search: {position:'top-right'} }
search.classList	'col-md-6 col-sm-6 mb-2 mb-sm-0'	This option sets custom css class list to position search component. This option is sub-option of componentsClass and can be set as componentsClass: { search: { classList:'col-md-6' } }
search.alignmentClassList	'justify-right'	This option sets custom css class list for alignment of search component. This option is sub-option of componentsClass and can be set as componentsClass: { search: { alignmentClassList:'justify-right' } }
recordsPerPage.position	'top-left'	This option sets position of records per page component. top-left, top-center, top-right, bottom-left, bottom-center, bottom-right are the possible options for position values. This option is sub-option of componentsClass and can be set as componentsClass: { recordsPerPage: { position:'top-left' } }
recordsPerPage.classList	'col-md-6 col-sm-6'	This option sets custom css class list to position records per page component. This option is sub-option of componentsClass and can be set as componentsClass: { recordsPerPage: { classList:'col-md-6' } }
recordsPerPage.alignmentClassList	'justify-left'	This option sets custom css class list for alignment of records per page component. This option is sub-option of componentsClass and can be set as componentsClass: { recordsPerPage: { alignmentClassList:'justify-left' } }

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.