# ngx-elastic-datatable
> [](https://www.npmjs.org/package/ngx-elastic-datatable)
Latest version **0.1.7** (published 2017-10-12) · MIT license · 0 weekly downloads
## Install
```sh
npm install ngx-elastic-datatable
pnpm add ngx-elastic-datatable
yarn add ngx-elastic-datatable
bun add ngx-elastic-datatable
```
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support; pre 1.0.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 0.1.7 |
| Published | 2017-10-12 |
| First published | 2017-05-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 11 |
| Known vulnerabilities | 0 (+21 in 3 direct dependencies) |
| Install scripts | no |
| Author | Albert Nadal Garriga |
| Maintainers | anadalg |
| Keywords | angular, datatable, elastic, ngx, angular2, sass, scss |
## Links
- npm: https://www.npmjs.com/package/ngx-elastic-datatable
- Repository: https://github.com/albertnadal/ngx-elastic-datatable
- Homepage: https://github.com/albertnadal/ngx-elastic-datatable#readme
- Issues: https://github.com/albertnadal/ngx-elastic-datatable/issues
- npm.io page: https://npm.io/package/ngx-elastic-datatable
## Dependencies (11)
- [rxjs](https://npm.io/package/rxjs.md) ^5.1.0
- [core-js](https://npm.io/package/core-js.md) ^2.4.1
- [zone.js](https://npm.io/package/zone.js.md) ^0.8.4
- [@angular/core](https://npm.io/package/@angular/core.md) ^4.0.0
- [@angular/http](https://npm.io/package/@angular/http.md) ^4.0.0
- [@angular/forms](https://npm.io/package/@angular/forms.md) ^4.0.0
- [@angular/common](https://npm.io/package/@angular/common.md) ^4.0.0
- [@angular/router](https://npm.io/package/@angular/router.md) ^4.0.0
- [@angular/compiler](https://npm.io/package/@angular/compiler.md) ^4.0.0
- [@angular/platform-browser](https://npm.io/package/@angular/platform-browser.md) ^4.0.0
- [@angular/platform-browser-dynamic](https://npm.io/package/@angular/platform-browser-dynamic.md) ^4.0.0
## Alternatives
- [@lexical/table](https://npm.io/package/@lexical/table.md) — 3.0M weekly downloads
- [mantine-datatable](https://npm.io/package/mantine-datatable.md) — 98.2K weekly downloads
- [react-native-collapsible-tab-view](https://npm.io/package/react-native-collapsible-tab-view.md) — 70.6K weekly downloads
- [@handsontable/vue3](https://npm.io/package/@handsontable/vue3.md) — 16.1K weekly downloads
- [vuewordcloud](https://npm.io/package/vuewordcloud.md) — 7.2K weekly downloads
## Recent versions
- 0.1.7 (latest) — 2017-10-12
- 0.1.6 — 2017-09-14
- 0.1.5 — 2017-09-14
- 0.1.4 — 2017-06-29
- 0.1.3 — 2017-06-29
- 0.1.2 — 2017-06-29
- 0.1.1 — 2017-06-29
- 0.1.0 — 2017-06-29
- 0.0.7 — 2017-05-23
- 0.0.6 — 2017-05-23
- 0.0.5 — 2017-05-23
- 0.0.4 — 2017-05-23
- 0.0.3 — 2017-05-19
- 0.0.2 — 2017-05-19
- 0.0.1 — 2017-05-18
- … 1 more at https://npm.io/package/ngx-elastic-datatable/versions
## README
# Angular Elastic DataTable Component
[](https://www.npmjs.org/package/ngx-elastic-datatable)
A minimalist DataTable-based component for Angular with elastic pagination.
### Installation
```
npm install ngx-elastic-datatable --save
```
### Usage
Import the ElasticDatatable Module and add it to the imports of your application module.
```
import { ElasticDatatableModule } from 'ngx-elastic-datatable'
@NgModule({
imports: [ ElasticDatatableModule ],
declarations: [ ... ],
bootstrap: [ ... ]
})
export class YourModule { }
```
Call the component from within a template.
```
```
And you're set!
### API
The elastic datatable component has an emitter named `didSelectedRow` launched when a row is selected, and also has an emitter named `didChangedTotalPages` launched when the datatable has recalculated the number of rows to show per page (mainly due to browser window resize).
The elastic datatable component should be called with the parameters listed below.
| Parameter | Type | Description |
|---|---|---|
| `items` | array | An array of groups with lists of rows. |
| `columns` | array | An array describing the columns of the datatable. |
| `config` | array | An array with the configuration of the datatable. |
| `currentPage` | number | The page number to be shown in the datatable. |
| `filterString` | string | Text to be filtered in the datatable rows. |
| `filterGroupId` | string | The group id to be filtered in the datatable rows. |
Example of data structure to be used as `items` parameter:
```
public data: Array = [
{
'id': '1',
'name': 'Area 1',
'groupHeaderClassName': 'context-list-subheader',
'rows':
[{
'id': '128',
'num': '128',
'name': 'Masferrer Serrat Albert',
'hours': '35h',
'selected': true
}, {
'id': '244',
'num': '244',
'name': 'Puig Guitart Sílvia',
'hours': '22h',
'selected': false
}, {
'id': '432',
'num': '432',
'name': 'Masferrer Puig Pau',
'hours': '24h',
'selected': false
}, {
'id': '784',
'num': '784',
'name': 'Masferrer Pellisser Carlos',
'hours': '28h',
'selected': false
}]
},
{
'id': '2',
'name': 'Area 2',
'groupHeaderClassName': 'context-list-subheader',
'rows':
[{
'id': '264',
'num': '264',
'name': 'Serrat Comas Montserrat',
'hours': '21h',
'selected': false
}, {
'id': '841',
'num': '841',
'name': 'Masferrer Serrat Laura',
'hours': '25h',
'selected': false
}, {
'id': '472',
'num': '472',
'name': 'Serrat Oltra Salvador',
'hours': '29h',
'selected': false
}, {
'id': '548',
'num': '548',
'name': 'Serrat Oltra Alba',
'hours': '20h',
'selected': false
}, {
'id': '328',
'num': '328',
'name': 'Serrat Comas Jaume',
'hours': '23h',
'selected': false
}]
}];
```
Example of data structure to be used as `columns` parameter:
```
public columns:Array = [
{
title: 'NÚM',
name: 'num',
headerClassName: 'employee-list-fields-num',
cellClassName: 'employee-list-item-num'
}, {
title: 'NOMBRE',
name: 'name',
headerClassName: 'employee-list-fields-name',
cellClassName: 'employee-list-item-name'
}, {
title: 'H',
name: 'hours',
headerClassName: 'employee-list-fields-hours',
cellClassName: 'employee-list-item-hours'
}
];
```
Example of data structure to be used as `config` parameter:
```
public config:any = {
paging: true,
sorting: {columns: this.columns},
filtering: { filterString: '',
columnName: 'name' },
groupSelectorPlaceholder: 'Filtrar por estructura o organización'
};
```
### License
MIT
---
_Source: https://npm.io/package/ngx-elastic-datatable · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._