Ngx-datatable: [Bug / Documentation] headerClass usage

[guillaumegarcia13]

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

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

Current behavior

When you use headerClass, it applies to the tag , it is OK for some styles (background-color for instance in the example provided http://swimlane.github.io/ngx-datatable/#css) but very not intuitive for layout ones.

Expected behavior

The style should apply consistenly (whether it targets text, layout, color behaviours)

Reproduction of the problem

Let's say I want to apply an ellipsis to the header using the following class that I declare as headerClass="ellipsible":

.ellipsible
  display: block
  overflow: hidden
  white-space: nowrap
  text-overflow: ellipsis

-> it actually... doesn't work, I have to declare it like this:

.ellipsible .datatable-header-cell-label
  display: block
  overflow: hidden
  white-space: nowrap
  text-overflow: ellipsis

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

Prevent duplication of classes for using in ngx-datatable

Please tell us about your environment:

Windows 10, angular-CLI (1.4.4), Visual Studio Code

• Table version: ngx-datatable: 10.2.3

• Angular version: Angular: 4.4.4

• 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 ]
  
  Chrome: 61.0.3163.100

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

[Adondriel]

Make sure you set your encapsulation to none, so that it doesn't restrict the applicable style tags. (I think it's called view encapsulation? Been a little bit since I worked in angular 2/with this library again.)

[guillaumegarcia13]

@Adondriel, I'm not sure the View encapsulation is the issue here. The CSS class is actually present on the component, it's just that having 4 levels of HTML markup:

<datatable-header-cell class="{ headerClass applied here }">
    <div>
        <span class="datatable-header-cell-wrapper">
            <span class="datatable-header-cell-label">My header text</span>
  ...

kind of require some (unintuitive) adjustements in the way you declare your style for ngx-datatable usage.

In the scenario I described, one shall (and does) wonder why the ellipsis is ignored:

<ngx-datatable>
    <ngx-datatable-column headerClass="ellipsible" ...>
...

I'm not saying that there is an easy fix as I'm sure this 4-level markup is there for good reasons (let me guess: resizeable, movable, ... ?).
Yet, for newcomers, it may give the impression that "this stuff doesn't work!"

Maybe, the best way is just to differentiate between _headerClass_ and a new _headerTextClass_.
Just wanted to have your ideas on this, guys.