NgxDatatable
.datatable-header-cell {
display: flex !important;
align-items: center !important;
}
.datatable-body-cell {
display: flex !important;
align-items: center !important;
}
.datatable-footer-inner {
direction: rtl;
display: flex !important;
align-items: center !important;
}
.empty-row {
display: flex !important;
align-items: center !important;
}
يوضع في ملف Style.css العام
طريقة استخدامي للمكتبة:
<div *ngIf="allowAccessPermission(); else access_denied" fxLayout="column" class="p-2">
<div class="p-2">
<div fxLayout="column" class="mat-elevation-z8">
<mat-form-field class="px-3 py-1">
<input matInput [placeholder]="'SEARCH_ENGINE.PLACEHOLDER_FOR_ANY' | translate"
(keyup)="updateFilter($event)">
</mat-form-field>
</div>
<ngx-datatable #table [reorderable]="reorderable" class="material" [headerHeight]="50" [limit]="5"
[summaryRow]="true" [summaryHeight]="55" [summaryPosition]="'bottom'" [count]="100" [columnMode]="'force'"
[footerHeight]="50" [rowHeight]="'auto'" [rows]="rows" [loadingIndicator]="loadingIndicator"
(activate)="onActivate($event)" (select)='onSelect($event)'>
<!-- <ngx-datatable-column [width]="30" [sortable]="false" [canAutoResize]="false" [draggable]="true"
[resizeable]="false" [headerCheckboxable]="false" [checkboxable]="false">
</ngx-datatable-column> -->
<ngx-datatable-column [name]="'LABELS.REVENUE_NUMBER' | translate" [summaryTemplate]="total">
<ng-template ngx-datatable-cell-template let-rowIndex="rowIndex" let-value="row.id" let-row="row">
<span (click)="openViewDialog(row)" class="cursor-pointer"
[matTooltip]="'BUTTONS.VIEW_DETAILS' | translate">
{{row.id}}
</span>
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column [name]="'LABELS.CLASSIFICATION' | translate" [summaryTemplate]="empty">
<ng-template ngx-datatable-cell-template let-rowIndex="rowIndex" let-value="row.classification.ar_name"
let-row="row">
<span *ngIf="row.classification; else notSpecifiedTem" (click)="openViewDialog(row)"
class="cursor-pointer" [matTooltip]="'BUTTONS.VIEW_DETAILS' | translate">
<b>{{lang === 'ar'? row.classification.ar_name: row.classification.en_name}}</b>
</span>
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column [name]="'LABELS.PIECES' | translate" [summaryTemplate]="_pieces">
<ng-template ngx-datatable-cell-template let-rowIndex="rowIndex" let-value="row.pieces" let-row="row">
<span (click)="openViewDialog(row)" class="cursor-pointer"
[matTooltip]="'BUTTONS.VIEW_DETAILS' | translate">
{{row.pieces? row.pieces: '-'}}
</span>
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column [name]="'LABELS._PRICE_PER_PIECE' | translate" [summaryTemplate]="empty">
<ng-template ngx-datatable-cell-template let-rowIndex="rowIndex" let-value="row.amount" let-row="row">
<span (click)="openViewDialog(row)" class="cursor-pointer"
[matTooltip]="'BUTTONS.VIEW_DETAILS' | translate">
{{row.amount? (row.amount | number: decimals): '-'}}
</span>
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column [name]="'LABELS.VAT_AMOUNT' | translate" [summaryTemplate]="_vat_amount">
<ng-template ngx-datatable-cell-template let-rowIndex="rowIndex" let-value="row.vat_amount"
let-row="row">
<span (click)="openViewDialog(row)" class="cursor-pointer"
[matTooltip]="'BUTTONS.VIEW_DETAILS' | translate">
{{row.vat_amount? (row.vat_amount | number: decimals): '-'}}
</span>
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column [name]="'LABELS.TOTAL_SUMMATION' | translate" [summaryTemplate]="_total">
<ng-template ngx-datatable-cell-template let-rowIndex="rowIndex" let-value="row.total" let-row="row">
<span (click)="openViewDialog(row)" class="cursor-pointer"
[matTooltip]="'BUTTONS.VIEW_DETAILS' | translate">
{{row.total? (row.total | number: decimals): '-'}}
</span>
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column [name]="'LABELS.DATE' | translate" [summaryTemplate]="empty">
<ng-template ngx-datatable-cell-template let-rowIndex="rowIndex" let-row="row"
let-value="row.created_at">
<span (click)="openViewDialog(row)" class="cursor-pointer"
[matTooltip]="'BUTTONS.VIEW_DETAILS' | translate">
{{row.created_at | date: 'dd/MM/yyyy'}}
</span>
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column [name]="'LABELS.NOTES' | translate" [summaryTemplate]="empty">
<ng-template ngx-datatable-cell-template let-value="row.notes" let-row="row">
<span (click)="openViewDialog(row)" class="cursor-pointer"
[matTooltip]="'BUTTONS.VIEW_DETAILS' | translate">
{{row.notes? row.notes : '-'}}
</span>
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column [name]="'LABELS.ACTIONS' | translate" [summaryTemplate]="empty">
<ng-template ngx-datatable-cell-template let-value="value" let-row="row">
<mat-icon (click)="openViewDialog(row)" [matTooltip]="'BUTTONS.VIEW_DETAILS' | translate"
class="m-1 icon-edit cursor-pointer">visibility</mat-icon>
<mat-icon *ngIf="crudPermission('UPDATE')" (click)="openDialog(row)"
[matTooltip]="'BUTTONS.EDIT' | translate" class="m-1 icon-edit cursor-pointer">edit</mat-icon>
<mat-icon *ngIf="crudPermission('DELETE')" (click)="deleteItem(row)"
[matTooltip]="'BUTTONS.DELETE' | translate"
class="m-1 icon-edit cursor-pointer">delete</mat-icon>
</ng-template>
</ngx-datatable-column>
<!-- <ngx-datatable-footer *ngIf="true">
<ng-template ngx-datatable-footer-template let-rowCount="rowCount" let-pageSize="pageSize"
let-selectedCount="selectedCount" let-curPage="curPage" let-offset="offset">
<div style="padding: 5px 10px">
<div><strong>Summary</strong>: Gender: Female</div>
<hr style="width:100%" />
<div>Rows: {{ rowCount }} | Size: {{ pageSize }} | Current: {{ curPage }} | Offset: {{ offset }}
</div>
</div>
</ng-template>
</ngx-datatable-footer> -->
<!-- Apply the custom footer -->
<!-- <ngx-datatable-footer [footerTemplate]="_customPager"></ngx-datatable-footer> -->
</ngx-datatable>
</div>
</div>
<ng-template #empty>
<b></b>
</ng-template>
<ng-template #total>
<b>{{rows.length}}</b>
</ng-template>
<ng-template #_pieces>
<b>{{totalPieces(rows)}}</b>
</ng-template>
<ng-template #_vat_amount>
<b>{{totalVatAmount(rows) | number: decimals}}</b>
</ng-template>
<ng-template #_total>
<b>{{totalTotalSummation(rows) | number: decimals}}</b>
</ng-template>
<ng-template #access_denied>
<app-access-denied [message]="'ERRORS.ACCESS_DENIED' | translate"></app-access-denied>
</ng-template>
<ng-template #notFound>
<app-page404></app-page404>
</ng-template>
<ng-template #notSpecifiedTem>
<b style="z-index: 1500;">{{ 'MAINTENANCE_REQUESTS_TYPES.NOT_SPECIFIED' | translate}}</b>
</ng-template>
<ng-template #spinner>
<div fxLayoutAlign="center" class="pt-3">
<mat-spinner [diameter]="25"></mat-spinner>
</div>
</ng-template>
<ng-template #spinner2>
<div class="fileuploader-thumbnails-input-inner">
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
</ng-template>
<ng-template #noAttachments>
<app-no-attachments2></app-no-attachments2>
</ng-template>
تعليقات
إرسال تعليق