CSS Issue Ngx-Table Angular2 Swimlane

CSS issue Ngx-table angular2 swimlane

I assume it has to do with view encapsulation. Basically your css will be scoped with an attribute like [_ngcontent-c5], because elements inside of your template will automatically have that.

However items added to the dom by datatables probably doesn't have that attribute causing the styles to do nothing.

You can fix that by adding the option encapsulation: ViewEncapsulation.None to your component like so:

import { ViewEncapsulation } from '@angular/core';
@Component({
  [...] // other code like template and style urls
  encapsulation: ViewEncapsulation.None
})

Ngx-table angular2 swimlane com compilation issue

Here's the issue on their Github page: https://github.com/swimlane/ngx-datatable/issues/927

It seems that updating to Typescript 2.4 might solve the problem (it did for me). Of course, keep in mind that one should update it in npm and/or Visual Studio depending on the tools you're using.

swimlane/ngx-datatable doesn't work after update to 16.0.3 (columns seem to be the problem)

As far as I’ve seen it doesn’t yet support angular 9. I stopped the upgrade on our project when I got the warning about incompatibility with ngx-datatable.

The better question is when they’re planning to release an update for compatibility! It’s been months.

ETA: 4 days later they started some new releases! 17.0.0 is strictly compatible with angular 9.

ngx-datatable rowClass is not working

The problem is that your .row-color is scoped to test component. You need to prefix it with /deep/ to break encapsulation:

/deep/ .row-color {
  background-color: green;
}

Alternatively, you can use ViewEncapsulation.None to have your CSS rules go around the app.

Or you need to put this rule somewhere in your global app styles (not bound to any one component).

Here's a working Stackblitz.

What ViewEncapsulation.None does means something like this:

Any css you write will be applied not only on your component, but to the whole context (page). If you Inspect element, you'll see on angular components that you have things like <span _ngcontent-c15>...</span>. So all the stuff on your component, angular marks with the attribute _ngcontent-c15 (or similar). Then all the styles from your component are not simply span, but rather span[_ngcontent-c15]. So if you paint your spans red, it won't leak to other components (they'd be e.g. _content-c16). ViewEncapsulation.None removes that attribute from your component CSS so it's valid all over the page.

NGX-Datatable with Angular 2 - Wrap Column's Name

Adding this to the CSS did the trick. It also centered and vertically aligned the column headers.

.ngx-datatable.fixed-header .datatable-header .datatable-header-inner .datatable-header-cell {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: normal !important;
  text-align: center !important;
  vertical-align: middle !important;
}

---

Related Topics