# @aspire.software/aspire-datatable > aspire-datatable is an Angular component for creating data table for large and complex data with lots of configurable features. Latest version **1.0.2** (published 2020-07-28) · MIT license · 0 weekly downloads ## Install ```sh npm install @aspire.software/aspire-datatable pnpm add @aspire.software/aspire-datatable yarn add @aspire.software/aspire-datatable bun add @aspire.software/aspire-datatable ``` ## Health **Score 30/100 (F)** — status: abandoned. Positive: has types; esm support; no vulnerabilities; high quality score. Warnings: low downloads. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.0.2 | | Published | 2020-07-28 | | First published | 2020-07-27 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 0 | | Unpacked size | 725.2 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 0 | | Author | Aspire Software Solutions | | Maintainers | ajay_aspire, aspiresoftware, dipesh.softserv, gandhipurav, pratik.aspire, shivani.patel | | Keywords | datatable, aspire, angular, library, bootstrap, bootstrap-datatable, angular-datatable | ## Links - npm: https://www.npmjs.com/package/@aspire.software/aspire-datatable - Repository: https://github.com/aspire-software/aspire-datatable - Homepage: https://github.com/aspire-software/aspire-datatable#readme - Issues: https://github.com/aspire-software/aspire-datatable/issues - npm.io page: https://npm.io/package/@aspire.software/aspire-datatable ## Alternatives - [@sveltejs/kit](https://npm.io/package/@sveltejs/kit.md) — 2.2M weekly downloads - [@atlaskit/theme](https://npm.io/package/@atlaskit/theme.md) — 402.0K weekly downloads - [@tangle-network/brand](https://npm.io/package/@tangle-network/brand.md) — 10.0K weekly downloads - [seneca](https://npm.io/package/seneca.md) — 7.4K weekly downloads - [@bsb/base](https://npm.io/package/@bsb/base.md) — 7.2K weekly downloads ## Recent versions - 1.0.2 (latest) — 2020-07-28 - 1.0.0 — 2020-07-27 ## 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: ```typescript ``` Set details as below: **headers:
** ```typescript 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:
** ```typescript records = [ { name: 'John', status: 'yes', date: '01/01/2020', age: 25, customColumn: 'Column', action: { id: 1, classType: 'fa fa-cog', perform: [ { perAction: 'edit', url: '1/edit' }, { perAction: 'delete', url: null, popupConfirm: true } ] } } ]; ``` **options:
** ```typescript options = { tableStyle: 'table table-striped table-bordered', headerStyle: 'thead-light', recordsPerPageOptions: [5, 10, 20, 30, 50] }; ``` **popup:
** ```typescript Popup = [ { body: 'Do You want to delete this record?', header: 'Delete Action', perAction: 'delete' } ]; ``` **actionConfirm:
** ```typescript 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: ```typescript 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](https://github.com/aspire-software/aspire-datatable-demo). --- _Source: https://npm.io/package/@aspire.software/aspire-datatable · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._