Editing ngx-datatable styling issues

Question

I'm following the themeing setup for ngx-datatable.

First I npm installed ngx-datatable 10.4.0 since this is compatible with Angular 4 and an earlier version of rxjs.

My problem is with the styling of the table.

My template file looks like this:

<div>
    <ngx-datatable
        [rows]="rows"
        [columns]="columns"
        [columnMode]="'standard'"
        class="material"
        fixed-header
        [headerHeight]="50"
        [scrollbarV]="true">
    </ngx-datatable>
</div>

Inside of my scss file:

@import '~@swimlane/ngx-datatable/release/index.css';
@import '~@swimlane/ngx-datatable/release/themes/material.css';
@import '~@swimlane/ngx-datatable/release/themes/bootstrap.css';
@import '~@swimlane/ngx-datatable/release/assets/icons.css';

And I can confirm that the material styling works to a certain extent:

I wish to add a border-bottom under my header, but to no avail.

If you check the demo: http://swimlane.github.io/ngx-datatable/#filter

There is always a border-bottom for the sample tables.

How do I configure the table to insert a border-bottom beneath the header?

Is there a problem with my ngx-datatable setup?

Solution

Any styling of this component should be done in the global styles.scss file.

styles.scss:

/* You can add global styles to this file, and also import other style files */
@import '~@swimlane/ngx-datatable/index.css';
@import '~@swimlane/ngx-datatable/themes/bootstrap.scss';
@import '~@swimlane/ngx-datatable/themes/material.scss';
@import '~@swimlane/ngx-datatable/themes/dark.scss';
@import '~@swimlane/ngx-datatable/assets/icons.css';

/* Preferably put any custom styles for ngx-datatable into your own "_datatable.scss" file 
   and @import it into global styles, but this is a simple working example */

.ngx-datatable {
  border: 1px solid #dddddd;
  ...
}

If you haven't used the global styles file yet, make sure it exists at src/styles.scss. Ensure that it is included in angular.json under architect/build/options/styles:

...
"styles": [
  "src/styles.scss",
  ...
]

Angular CLI apps should have all of this built out by default.

It's too bad the docs don't mention this, but view encapsulation on your component will block the styles from bleeding down into any nested components. This is actually preferable so that your styles don't get bashed when you build a component for someone else to install and you use the same class names by accident.

Comments

[pankajt]

I am facing the same issue. Did you raise ticket with ngx-datatable?