styles not working with ionic 3

[praveens96]

I'm submitting a ... (check one with "x")

[ ] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[X ] support request => Please do not submit support request here, post on Stackoverflow or Gitter

Current behavior

I am trying to use the library with my ionic app. The styles are not coming up as in demo's. none of the styles are coming up

Expected behavior

Reproduction of the problem

What is the motivation / use case for changing the behavior?

Please tell us about your environment:

• Table version: 0.8.x

• Angular version: 2.0.x

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

• Language: [all | TypeScript X.X | ES6/7 | ES5]

[Corona17]

Hey @praveens96, I am also using ngx-datatable with Ionic. I had some difficulties linking the stylesheets but got it working in the end.

This is what I have in my 'src/app/app.scss' file:

@import '../assets/styles/ngx-datatable/index';
@import '../assets/styles/ngx-datatable/material';
@import '../assets/styles/ngx-datatable/bootstrap';

You need to rename the css files to .scss and prepend an underscore for Sass to import these files. For example in my ngx-datatable folder (under assets/styles) my files are called:

_index.scss
_material.scss
_bootstrap.scss

Hope this helps!

[paritosh64ce]

The same issue I faced while working with Angular (not ionic). Even after doing that, it didn't work for me. I had to use class='material' on the ngx-datatable element in the markup. Try adding it. Hope it helps!

[saschwarz]

I ended up editing angular.json and adding the files to the styles section:

  "projects": {
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            ...
            "styles": [
              {
                "input": "src/theme/variables.scss"
              },
              {
                "input": "src/global.scss"
              },
              {
                "input": "node_modules/@swimlane/ngx-datatable/index.scss"
              },
              {
                "input": "node_modules/@swimlane/ngx-datatable/themes/material.scss"
              },
              {
                "input": "node_modules/@swimlane/ngx-datatable/assets/icons.css"
              }
            ],
           ...