Closed alvinmeimoun closed 7 years ago
Got the same problem. Here's a print screen:
Actually I should point out that, it gets displayed like this using the quickstart. I actually haven't used the Angular CLI at all.
I was able to repo this @PEsteves8's screenshot by only including material.css you need to include both:
ps- I am currently using the older angular2-data-table instead of ngx-datatable but I presume the solution applies to both.
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.
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';
This is included in docs, suggestions welcome for better approaches.
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" ],
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.
would u mind PR to the docs?
I've done, I hope it helps. 🙂
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
Anyone know how to get this working with scss
in the CLI?
@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?
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"
]
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!
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)">
`
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..