Docs indicate using an invalid columns format
DejayJD opened this issue · comments
What is the current behavior?
None of the rows/headers are showing up. All that is visible is the borders
Code:
html:
<pbl-ngrid [columns]="columns" [dataSource]="rows" style="height: 500px" vScrollAuto wheelMode="blocking">
</pbl-ngrid>
component:
import {ChangeDetectionStrategy, Component, OnInit, ViewEncapsulation} from '@angular/core';
@Component({
selector: 'test-grid',
templateUrl: './test-grid.component.html',
styleUrls: ['./test-grid.component.scss'],
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class TestGridComponent implements OnInit {
columns = [
{prop: 'id', sort: true, width: '40px'},
{prop: 'name', sort: true},
{prop: 'gender', width: '50px'}
];
rows = [
{id:0, name:'JD', gender:'M'},
{id:1, name:'Nathan', gender:'M'},
{id:2, name:'Robert', gender:'M'},
{id:3, name:'Noor', gender:'M'},
{id:4, name:'Ross', gender:'M'},
{id:5, name:'Andrea', gender:'F'},
];
constructor() {
}
ngOnInit() {
}
}
Which versions of Angular, CDK, Material, NGrid, OS, TypeScript, browsers are affected?
Running in Chrome
package.json:
{
"name": "doe",
"version": "0.25.7",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"app-build-dev": "ng build --base-href \"/doe/doeui/\" --configuration=develop --build-optimizer",
"app-build-stage": "ng build --base-href \"/doe/doeuistage/\" --configuration=stage --build-optimizer",
"app-build-qa": "ng build --base-href \"/doe/doeui/\" --configuration=qa --build-optimizer",
"app-build-prod": "ng build --base-href \"/doe/doeui/\" --configuration=production --build-optimizer"
},
"private": true,
"dependencies": {
"@angular-redux/router": "^9.0.0",
"@angular-redux/store": "^9.0.0",
"@angular/animations": "^7.2.15",
"@angular/cdk": "^7.3.7",
"@angular/cdk-experimental": "^7.3.7",
"@angular/common": "^7.2.15",
"@angular/compiler": "^7.2.15",
"@angular/core": "^7.2.15",
"@angular/forms": "^7.2.15",
"@angular/http": "^7.2.15",
"@angular/material": "^7.2.0",
"@angular/platform-browser": "^7.2.15",
"@angular/platform-browser-dynamic": "^7.2.15",
"@angular/router": "^7.2.15",
"@nicky-lenaers/ngx-scroll-to": "^2.0.0",
"@pebula/ngrid": "1.0.0-alpha.23",
"@pebula/ngrid-material": "1.0.0-alpha.23",
"@pebula/utils": "1.0.0-alpha.3",
"@swimlane/ngx-datatable": "^14.0.0",
"angular-redux": "^1.0.0-beta",
"angular-svg-icon": "^7.2.0",
"await-timeout": "^0.3.0",
"axios": "^0.18.1",
"bootstrap": "^3.4.1",
"buffer": "^5.2.1",
"chart.js": "^2.8.0",
"classlist.js": "^1.1.20150312",
"concat-stream": "^2.0.0",
"core-js": "^2.6.5",
"events": "^3.0.0",
"file-saver": "^2.0.1",
"guid-typescript": "^1.0.9",
"include-media": "^1.4.9",
"lodash": "^4.17.15",
"mustache": "^3.0.1",
"ng2-charts": "^2.2.2",
"ng6-breadcrumbs": "^1.0.7",
"ngx-bootstrap": "^4.2.0",
"ngx-json-viewer": "^2.4.0",
"ngx-lightbox": "^1.2.0",
"ngx-pagination": "^3.2.1",
"ngx-toastr": "^9.2.0",
"pretty-ms": "^2.1.0",
"redux": "^4.0.1",
"redux-logger": "^3.0.6",
"resize-observer-polyfill": "^1.5.1",
"rxjs": "~6.3.3",
"sax": "^1.2.4",
"stream": "0.0.2",
"timers": "^0.1.1",
"web-animations-js": "^2.3.1",
"xml-js": "^1.6.11",
"zone.js": "~0.8.26"
},
"devDependencies": {
"@angular-devkit/build-angular": "^0.13.8",
"@angular/cli": "^7.3.9",
"@angular/compiler-cli": "~7.0.0",
"@angular/language-service": "~7.0.0",
"@types/chart.js": "^2.7.51",
"@types/jasmine": "~2.8.8",
"@types/jasminewd2": "~2.0.3",
"@types/lodash": "^4.14.123",
"@types/node": "^8.10.45",
"@types/xml2js": "^0.4.4",
"codelyzer": "~4.5.0",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~3.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "^2.0.5",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.11.0",
"typescript": "~3.1.1"
}
}
Tried following code in the starter repo - https://github.com/shlomiassaf/ngrid-material-starter not working either
I'm having the same problem. Not sure how to fix it.
Guys, I need a working stack blitz to reproduce this.
Anyway, try adding a "noFiller" to the grid, maybe there is a bug with it, let me know:
<pbl-ngrid noFiller [columns]="columns" [dataSource]="rows" style="height: 500px" vScrollAuto wheelMode="blocking">
</pbl-ngrid>I gave you everything you would need, but whatever - here is a Stackblitz with the same result (including your suggestion). https://stackblitz.com/edit/angular-8hjw6q
Ok, the way you initialize the column is incorrect.
There are different types of columns, header/footer/group, so you can't just provide an array, you need to provide an object referencing the proper column types:
So, instead of this:
columns = [
{prop: 'id', sort: true, width: '40px'},
{prop: 'name', sort: true},
{prop: 'gender', width: '50px'}
];
Do this:
columns = {
table: {
cols: [
{prop: 'id', sort: true, width: '40px'},
{prop: 'name', sort: true},
{prop: 'gender', width: '50px'}
],
},
};
https://stackblitz.com/edit/pebula-ngrid-starter-kya8ew?file=app/app.component.html
Read more here: https://shlomiassaf.github.io/ngrid/concepts/datasource/introduction
As a side note: Prefer using the datasource factory (createDS) and column factory (columnFactory )
Read more about the datasource factory and column factory
Your documentation literally says that you can provide an array. I'll definitely use that though. Thank you
@DejayJD I will fix the documentation, its probably a legacy error.
@DejayJD can you point me to the location in the docs, with the error?
Looking back at it, it looks like I mostly just got confused by https://shlomiassaf.github.io/table-demo/ngrid#/concepts/column-model, but now I'm seeing that all of your example code has that same column format - sorry I should have noticed that
@DejayJD nope, you're right, its misleading, thank you for the heads up.