@noammazuz/vzn-data-table NPM

VznDataTable

This library was generated with Angular CLI version 8.2.9.

Code scaffolding

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.

npm login
npm init --scope=@noammazuz
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;
}