Ngx-datatable: Theme does not work when Angular Material is used

[emauro]

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

Table is not themed correctly if Angular Material is used. CellClass is not respected.

Expected behavior

Have the same appearance of the examples.

Reproduction of the problem

Create a project using angular cli, add angular material and create a table using ngx-datatable.

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

Please tell us about your environment:

• Table version: 0.9.x
  

• Angular version: 4.1.x
  

• Browser: all
  

• Language: TypeScript 2.X

[amcdnl]

Can you post a demo plz?

[RicardoVaranda]

Hey @emauro,

Make sure you import the css in one of your parent components:

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

[wgsl2005]

@Ricardo Varanda
Thank You! You saved my day!

[dannychase2004]

I noticed that when I put these imports into the .css file for the component, they only partially work. WebPack recognizes them, but for example with "Dark", the background of the table turns dark, but none of the other things are applied. When I moved the CSS imports to styles.css at the application level, it works. Is there something I'm doing wrong, or something I don't understand about CSS?

[dexluce]

I noticed that when I put these imports into the .css file for the component, they only partially work. WebPack recognizes them, but for example with "Dark", the background of the table turns dark, but none of the other things are applied. When I moved the CSS imports to styles.css at the application level, it works. Is there something I'm doing wrong, or something I don't understand about CSS?

A bit late, but in case someone needs it:

Hey @dannychase2004
This is typically caused by the style encapsulation of the component. When using the style.css, the style apply to the project. But when you declare or import styles in a component, by default it will apply only to the current component, not his parent, nor his childs (ngx-datatable in your case).

You can either deactivate the encapsulation in you component directive, or use ::ng-deep in your component style file:

_in your component style.scss_

::ng-deep {
  @import "~@swimlane/ngx-datatable/index.css";
  @import "~@swimlane/ngx-datatable/themes/material.scss";
  @import "~@swimlane/ngx-datatable/assets/icons.css";
}

_or in your component.ts_

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-component',
  templateUrl: './component.html',
  styleUrls: ['./component.scss'],
  encapsulation: ViewEncapsulation.None  // This is the important part
})
export class Component { ... }

Caution with this. It may break other view.

[joeveiga]

This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions[bot]]

This issue was closed because it has been stalled for 7 days with no activity.