Angular - Override CSS of swimlane/ngx-datatable

Question

I need to remove the padding from ngx-datatable header cells and body cells.

My actual solution looks like this:

.datatable-body-cell {
  padding: 0 !important;
}

.datatable-header-cell {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

calendar.component.scss

@Component({
  templateUrl: './calendar.component.html',
  styleUrls: ['./calendar.component.scss'],
  encapsulation: ViewEncapsulation.None,
  changeDetection: ChangeDetectionStrategy.OnPush,
})

calendar.component.ts

The problem I encountered is that I need to disable the ViewEncapsulation override the ngx-datatable CSS classes datatable-body-cell and datatable-header-cell. Since I use the ngx-datatable in other components as well, the CSS remains overridden when I navigate to the other components. Only when I refresh the CSS in the other components is shown as it should.

Are there any other possibilities to override CSS of a library in a component without affecting the other components?

I'm using Angular 5.

Until

Answer 1

Keep default component encapsulation and use ng-deep

:host ::ng-deep .datatable-body-cell {
  padding: 0 !important;
}

https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep

Vhf

Thanks, it works! I thought of using ::ng-deep as well, but isn't it deprecated and aren't they removing the support of ::ng-deep from browsers? – Until

They are not going to remove it until they find a replacement, and there is none for now – Vhf

It saved me some time! Thanks. – Luckett

This is nice! Thanks a lot. – Crandell

Is it still relevant with angular 7 and ngx-datatable >= 14.0.0 ? Does anyone make it work with this version ? – Tswana

@Vhf i just tried with angular 9 and ngx-datatable and it works fine ! Not sure if this is going to break in future because of ng-deep depreceated ? – Paillasse

This will likely break in the future, but for now there is no replacement. Other option is to put rulea in styles.scss – Vhf

Answer 2

You could try to do a prefixing/isolation of the css code. That means put e.g. a DIV around the component you want to set a different style and give that DIV a class (prefix-css).

.prefix-css .datatable-body-cell {
  padding: 0 !important;
}

.prefix-css .datatable-header-cell {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

The HTML code then looks somehow like that:

<div class="prefix-css">
  ... here the code for your datatable
</div>

You can make that styles global and then just affect code inside of the div with the class 'prefix-css'.

Look at this example: https://stackblitz.com/edit/angular-qlkcs3

Capitate

This would probably work as well although I prefer to have the component styling in the component CSS file... – Until

If you only want to modify the header and body cells you can use the headerClass and cellClass properties of <ngx-datatable-column>. But that also requires global CSS rules :/ – Bacitracin