Ngx-datatable: css not working with angular-cli

[alvinmeimoun]

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..

[PEsteves8]

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

[PEsteves8]

Actually I should point out that, it gets displayed like this using the quickstart. I actually haven't used the Angular CLI at all.

[wyers]

I was able to repo this @PEsteves8's screenshot by only including material.css
you need to include both:

• "../node_modules/angular2-data-table/release/datatable.css"
• "../node_modules/angular2-data-table/release/material.css"

ps- I am currently using the older angular2-data-table instead of ngx-datatable but I presume the solution applies to both.

[PEsteves8]

Thanks. I'm now realizing it was indeed specified in the docs. I must have missed it.

I'm assuming the OP didn't include either.

[JanCejka]

I use following to have sorting icons working as well... ;-)

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

[amcdnl]

This is included in docs, suggestions welcome for better approaches.

[alvinmeimoun]

I solved by adding these line in my angular-cli.json in the section "apps" > "styles"

"../node_modules/@swimlane/ngx-datatable/release/datatable.css", "../node_modules/@swimlane/ngx-datatable/release/material.css"

thats give me something like this

"apps": [ { "styles": [ "../node_modules/@swimlane/ngx-datatable/release/datatable.css", "../node_modules/@swimlane/ngx-datatable/release/material.css", "styles.css" ],

[closer27]

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.

[amcdnl]

would u mind PR to the docs?

[closer27]

I've done, I hope it helps. 🙂

[gamesover]

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

[failpunk]

Anyone know how to get this working with scss in the CLI?

[akcasoy]

@closer27

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

worked for me also until i updated to angular 5 & co..
Now i have this compile error in my table.component.css, where i actually have just those 3 lines:

ERROR in ./src/app/table/table.component.css
Module build failed: TypeError: Path must be a string. Received undefined
at assertPath (path.js:7:11)
at Object.isAbsolute (path.js:1200:5)
at Promise.all.paths.map.file (/Users/xx/CRUD/node_modules/postcss-import/index.js:187:24)
at Array.map (native)
at Promise.resolve.then.paths (/Users/xx/CRUD/node_modules/postcss-import/index.js:186:15)
at process._tickCallback (internal/process/next_tick.js:109:7)
@ ./src/app/table/table.component.ts 38:21-53
@ ./src/app/app.module.ts
@ ./src/main.ts
@ multi webpack-dev-server/client?http://0.0.0.0:0 ./src/main.ts

anybody has an idea?

[fabiobernardo]

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" 
            ]

[soufianerafik]

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" 
            ]

Thank you @fabiobernardo, life saver!