Editing ngx-datatable styling issues

angular ngx-datatable
Shaun Chua picture Shaun Chua · Apr 16, 2018 · Viewed 7.3k times · Source

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:

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: enter image description here

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?

Answer

Dagrooms picture Dagrooms · Feb 20, 2020

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.

Related questions

Ngx-datatable set column width dynamically

I'm storing the column widths of my ngx-datatable inside a database. I get these values using an AJAX call. How can I set these values for the datatable? What I've tried: setting the [width] property on the <ngx-datatable-column> …

Read More
How to add pagination and footer template in ngx-datatable?

I have the Following html code, <ngx-datatable class="material" [rows]="rows" [columns]="[{name:'Name'},{name:'Age'},{name:'Company'}]" [columnMode]="'force'" [headerHeight]="50" [footerHeight]="50" [rowHeight]="'auto'" [externalPaging]="true" [count]="page.totalElements" [offset]="page.pageNumber" [limit]="page.size" (page)='getValue($event)' […

Read More
Implementing NGX Datatable filtering on all columns

I've been trying to get this working with no luck. I've been referencing these resources for help: http://swimlane.github.io/ngx-datatable/#filter https://github.com/swimlane/ngx-datatable/blob/master/demo/basic/filter.component.ts Basically i just want to …

Read More