Ngx-elastic-datatable NPM

Angular Elastic DataTable Component

A minimalist DataTable-based component for Angular with elastic pagination.

npm.io

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.

  <ngx-elastic-datatable  [config]="config"
                          [items]="data"
                          [columns]="columns"
                          [currentPage]="page"
                          [filterString]="searchFilter"
                          [filterGroupId]="selectedGroupId"
                          (didSelectedRow)="didSelectedRow($event);"
                          (didChangedTotalPages)="didChangedTotalPages($event);"></ngx-elastic-datatable>

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<any> = [
  {
    '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<any> = [
    {
        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'
  };