@aspire.software/aspire-datatable
v1.0.2
Published
aspire-datatable is an Angular component for creating data table for large and complex data with lots of configurable features.
Downloads
17
Readme
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.