I'm using the following versions:
ngx-datatable: 11.3.2 angular: 5
I'm trying to update ngx-datatable cell template to display a progress bar.
I have below HTML template defined:
<ngx-datatable-column name="Progress" prop="progress_percent" [canAutoResize]="true" [width]="35">
<ng-template ngx-datatable-cell-template let-value="value" let-row="row">
<div class="progress">
<div *ngIf="value < 100" class="progress-bar bg-warning progress-bar-striped progress-bar-animated" [attr.aria-valuenow]="value" [attr.aria-valuemin]="0" [attr.aria-valuemax]="100" [style.width.%]="value"></div>
<div *ngIf="row.status == 'COMPLETE'" class="progress-bar bg-success progress-bar-striped progress-bar-animated" [attr.aria-valuenow]="value" [attr.aria-valuemin]="0" [attr.aria-valuemax]="100" [style.width.%]="value"></div>
<div *ngIf="row.status == 'ERROR'" class="progress-bar bg-danger progress-bar-striped progress-bar-animated" [attr.aria-valuenow]="value" [attr.aria-valuemin]="0" [attr.aria-valuemax]="100" [style.width.%]="value"></div>
</div>
</ng-template>
</ngx-datatable-column>
However, nothing is displayed on the column.
If I place the div outside ngx-datatable, then it is rendered correctly.
I've also tried to simply use demo example progress bar, but it just shows an empty square:
Inspecting the element, it seems fine but I'm not able to figure out why it is not rendered correctly:
I've also tried using mat-table and the progress bar is rendered fine.
Kindly advise.