Why I can't see the pagination on my grid, what I'm missing

Please help?, Why I can’t see the pagination client side, I have this template and the fetch method in my page like the demo example, I can see the loaded grid, but without pagination

template: <div> <ngx-datatable class="material" [rows]="rows" [columns]="columns"> [columnMode]="'force'" [headerHeight]="50" [footerHeight]="50" [rowHeight]="'auto'" [limit]="10"> </ngx-datatable> </div>

export class CmpGrid { rows: Array<any> = [];

columns = [ { name: ‘Date & Time’ }, { name: ‘Unit’ }, { name: ‘Name’ }, { name: ‘Tag’ }, { name: ‘Expiration’ }, { name: ‘Location’ } ];

constructor() { this.fetch( data => { //I got my array data with other stuff inside data object this.rows = data.data; }); }

fetch(cb) {

const req = new XMLHttpRequest();
req.open('GET', '../../assets/data/entries.json');

req.onload = () => {
  cb(JSON.parse(req.response));
};

req.send();

}

///entries.json { “message”: “Success”, “valid”: true, “data”: [{ “unit”: “C05”, “expiration”: “03/04/2017”, “tag”: “”, “dateTime”: “03/04/2017 08:35”, “name”: “A1 ALUMINUM CHRIS” }, { “unit”: “D11”, “expiration”: “12/31/9999”, “tag”: “”, “dateTime”: “03/04/2017 08:31”, “name”: “3 AMIGOS LAWN” }, { “unit”: “AA07”, “expiration”: “12/31/9999”, “tag”: “”, “dateTime”: “03/04/2017 08:29”, “name”: “AA GOLF” },…] }

[adammedford]

It doesn’t look like you have footerHeight set on your grid, not necessarily because you haven’t provided it. Just emphasizing that testing should focus on that. I would expect to see ng-reflect-footer-height on the ngx-datatable element like the other inputs if you aren’t specifying them programmatically using View/ContentChildren.

[adammedford]

You’re missing the material theme used in the demo. @import '/node_modules/@swimlane/ngx-datatable/release/themes/material.css';

Your footer is missing the below style (should appear in the panel on the right)

.ngx-datatable.material .datatable-footer { 
border-top: 1px solid rgba(0, 0, 0, 0.12);
font-size: 16px;
}