search

swimlane / ngx-datatable

✨ A feature-rich yet lightweight data-table crafted for Angular
http://swimlane.github.io/ngx-datatable/
MIT License
4.63k stars 1.68k forks source link

[Bug / Documentation] headerClass usage #1024

Open guillaumegarcia13 opened 6 years ago

guillaumegarcia13 commented 6 years ago

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

Adondriel commented 6 years ago

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 commented 6 years ago

@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.