Bootstrap Theme Not Being Applied

Question

I'm trying to apply the Bootstrap theme to my datatable. I'm using ngx-datatable version 10.4.0 because I'm still on Angular 4 and 11.0 isn't compatible. According to the changelog, the Bootstrap theme was added in version 10.3.0.

Below is my component.html:

<div>
    <ngx-datatable class="bootstrap" [rows]="rows" [columns]="columns" (select)='onSelect($event)' [selected]="selected" [selectionType]="'single'"
        [limit]="10" [columnMode]="'force'" [headerHeight]="40" [footerHeight]="40" [rowHeight]="'auto'">
    </ngx-datatable>
</div>

However, this doesn't add the styling as in the demo. I think I have included everything the documentation shows.

I'm using Bootstrap 3.3.7. Is 4.0 required? Am I not including something correctly?

Martita

Answer 1

Make sure you are including the scss file to your build.

In .angular-cli.json you should add it:

"apps": [
  {
    ...
    "styles": [
      ...
      "../node_modules/@swimlane/ngx-datatable/release/themes/bootstrap.css",
      ...
    ],

also the <ngx-datatable> element should have both bootstrap and ngx-datatable classes:

<ngx-datatable class="bootstrap ngx-datatable">

Staffman

I'm using ASP.NET Core and JavaScriptServices (github.com/aspnet/JavaScriptServices). I'm not sure how I can incorporate your answer as I don't have a .angular-cli.json file. – Martita

then include the css file as you normally would with that setup – Staffman