ngx datatable footer icons not displaying

Question

Not able to display the ngx datatable default footer properly. Its showing the footer like this

My code

    <ngx-datatable
            #table
            [columnMode]="'force'"
            [headerHeight]="50"
            [rowHeight]="'auto'"
            [footerHeight]="50"
            [count]="true"
            [limit]="4"
            [rows]="data"
        >
    <ngx-datatable-column [width]=10>
      <ng-template let-row="row" ngx-datatable-cell-template>
        <span class="circle" [ngClass]="{'red': row.alertCat == 'HIGH','yellow': row.alertCat == 'MEDIUM', 'green': row.alertCat == 'LOW'}"></span>
      </ng-template>
    </ngx-datatable-column>
    <ngx-datatable-column name="ID" [width]=10>
                    <ng-template let-column="column" ngx-datatable-header-template>
                            <strong class="text-uppercase alertHeading">ID</strong>
                    </ng-template>
      <ng-template let-row="row">
        {{row.id}}
      </ng-template>
    </ngx-datatable-column>
    </ngx-datatable>

score 5 · Answer 1 · edited Jan 26 '19 at 15:46

5

use node_modules/@swimlane/ngx-datatable/release/assets/icons.css in your main .scss file:

"styles": [
    //  ...
    "node_modules/@swimlane/ngx-datatable/release/assets/icons.css"
],

edited Jan 26 '19 at 15:46

veben

19,637
14
60
80

answered Jan 26 '19 at 12:55

ADARSHA PORE

51
1
5

It worked for me i was trying to include this file at the component level, but it didn-t work, including it on the angular.json file on the "styles" worked like a charm. – Jc Figueroa Mar 25 '21 at 18:25

score 1 · Answer 2 · answered Oct 18 '18 at 13:02

1

If I am not wrong, your footer classes are being overridden by other classes. Inspect them and you will know or provide your icons like from font-awesome. For ex

.datatable-icon-left {
     content: @fa-var-chevron-left;
 }

answered Oct 18 '18 at 13:02

Sachin Jagtap

11
2

ngx datatable footer icons not displaying

2 Answers2