Angular Elastic DataTable Component

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.

  <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'
  };

License

MIT