ngx-datatable: css not working with angular-cli

I tried to test ngx-datatable on my angular-cli project, but the css is not applied and i got a result like this

I imported NgxDatatableModule in my app.module and linked css as in the documentation in my index.html < link rel="stylesheet" type="text/css" href="./release/datatable.css" /> < link rel="stylesheet" type="text/css" href="./release/material.css" /> (I added a space here between < and link due to github injection security but it’s not present in my code)

And my html look like this <ngx-datatable class='material' [rows]='rows' [columnMode]="'standard'" [headerHeight]="50" [footerHeight]="50" [rowHeight]="50" [scrollbarV]="true" (page)="onPage($event)"> <ngx-datatable-column name="Name" width="200"> <template let-value="value" ngx-datatable-cell-template> <strong>a</strong> </template> </ngx-datatable-column> <ngx-datatable-column name="Gender" width="300"> <template let-row="row" let-value="value" ngx-datatable-cell-template> <i [innerHTML]="row['name']"></i> and <i>b</i> </template> </ngx-datatable-column> <ngx-datatable-column name="Age" width="80"> </ngx-datatable-column> </ngx-datatable>

Also my package.json dependencies "dependencies": { "@angular/common": "2.3.1", "@angular/compiler": "2.3.1", "@angular/core": "2.3.1", "@angular/forms": "2.3.1", "@angular/http": "2.3.1", "@angular/platform-browser": "2.3.1", "@angular/platform-browser-dynamic": "2.3.1", "@angular/router": "3.3.1", "@swimlane/ngx-datatable": "4.0.0", "angular2-cookie": "1.2.5", "angular2-toaster": "1.1.0", "core-js": "^2.4.1", "js-sha256": "0.3.2", "ng2-bootstrap": "1.1.16", "rxjs": "5.0.1", "ts-helpers": "^1.1.1", "zone.js": "^0.6.23" }, "devDependencies": { "@angular/compiler-cli": "2.3.1", "@types/jasmine": "2.5.38", "@types/node": "^6.0.42", "angular-cli": "1.0.0-beta.21", "codelyzer": "~2.0.0-beta.1", "jasmine-core": "2.5.2", "jasmine-spec-reporter": "2.5.0", "karma": "1.2.0", "karma-chrome-launcher": "^2.0.0", "karma-cli": "^1.0.1", "karma-jasmine": "^1.0.2", "karma-remap-istanbul": "^0.2.1", "protractor": "4.0.9", "ts-node": "1.2.1", "tslint": "^4.0.2", "typescript": "~2.0.3", "webdriver-manager": "10.2.5" }

So i don’t know if it’s an error in my implementation, if the doc is incorrect or if it’s an issue with the ngx-datatable module or another module…

About this issue

Original URL
State: closed
Created 8 years ago
Comments: 15 (7 by maintainers)

Most upvoted comments

Eu Resolvi assim (I resolved in Angular11 themes) Angular 11 no angular.json

"projects": {
  "admin": {
    "architect": {
      "build": {
        "options": {
             styles": [
                  "./node_modules/@swimlane/ngx-datatable/index.css",
                  "./node_modules/@swimlane/ngx-datatable/themes/material.scss",
                  "./node_modules/@swimlane/ngx-datatable/assets/icons.css" 
            ]

fabiobernardo on Apr 21, 2021

Got the same problem. Here’s a print screen:

tableexample

PEsteves8 on Dec 20, 2016

I’ve done, I hope it helps. 🙂

closer27 on Jan 11, 2017

In my case,

@import '/node_modules/@swimlane/ngx-datatable/release/datatable.css'; @import '/node_modules/@swimlane/ngx-datatable/release/material.css'; @import '/node_modules/@swimlane/ngx-datatable/release/assets/icons.css';

to scss file is correct. I hope this is helpful for someone.

closer27 on Jan 11, 2017

for me, put those css files at .scss does not work. But put them in component.ts file works.

Another thing is, I need to change @import to import

gamesover on Mar 4, 2017