VznDataTable

This library was generated with Angular CLI version 8.2.9.

Code scaffolding

Run ng generate component component-name --project vzn-data-table to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module --project vzn-data-table.

Note: Don't forget to add --project vzn-data-table or else it will be added to the default project in your angular.json file.

Build

Run ng build vzn-data-table to build the project. The build artifacts will be stored in the dist/ directory.

Publishing

After building your library with ng build vzn-data-table, go to the dist folder cd dist/vzn-data-table and run npm publish.

0. npm login
1. npm init --scope=@noammazuz
2. npm publish inside the dist folder

Running unit tests

Run ng test vzn-data-table to execute the unit tests via Karma.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.

Row selection

for adding row checkbox selection to the table add 'boolTmpl' and 'boolHdTmpl' templates to the wanted column:

this.columns = [
  {
    prop: '_id',
    cellTemplate: 'boolTmpl',
    headerTemplate: 'boolHdTmpl',
    maxWidth: 100,
    name: ''
  }
]

Add table style

Add it to the main style.

@import '~@swimlane/ngx-datatable/index.css';
@import '~@swimlane/ngx-datatable/themes/material.scss';
@import '~@swimlane/ngx-datatable/assets/icons.css';

::-webkit-scrollbar {
    display: none;
}
.datatable-scroll.ng-star-inserted {
    height: calc(100vh - 500px);
    overflow-y: auto !important;
    overflow-x: hidden;
    width: 100%;
}
.datatable-row-center.datatable-row-group.ng-star-inserted, .datatable-row-center.ng-star-inserted , .datatable-header-inner{
    width: 100% !important;
}
datatable-body-cell, datatable-header-cell {
    flex: 1;
}
.vzn-data-table-filter mat-expansion-panel {
    margin-bottom: 5px !important;
}
.mat-paginator-range-label {
    direction: initial;
}
.mat-paginator-container {
    flex-direction: row-reverse;
}
.ngx-datatable .datatable-header .datatable-header-cell .datatable-header-cell-template-wrap {
    text-align: justify;
}
.ngx-datatable.material .datatable-body .datatable-body-row .datatable-body-cell {
    text-align: justify;
}

Input parameters:

1. hidePaginator: bool - If true, hides the data table pager. Default is false