CODEWITHSUNDEEP
angularbootstrap-4angular-componentsngx-datatable
CesarD
CesarD

Reputation: 573

ngx-datatable - Bootstrap theme - Column headers

I'm trying to implement ngx-datatable with the implementation of the theming for Bootstrap.

I'm adding the Bootstrap CSS from both Bootstrap 4 and from ngx-datatable on the app styles:

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

And then implementing the table on my page component:

<ngx-datatable class="bootstrap"
[rows]="tablePage.results"
[columns]="columns"
[columnMode]="'force'"
[rowHeight]="'auto'"
[headerHeight]="50"
[footerHeight]="50"
[externalPaging]="true"
[loadingIndicator]="loading"
[count]="tablePage.pager.count"
[offset]="tablePage.pager.offset"
[limit]="tablePage.pager.limit"
[reorderable]="true"
(page)='setPage($event)'>

Also, the modules are all imported into the app module:

imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule,
NgbModule,
FontAwesomeModule,
NgxDatatableModule
],

The problem comes with the fact that no column header icons are shown. None of the sorting direction icons are shown and I don't know what else to add since everything seems setup just like in the demo site.

Upvotes: 3

Views: 5405

Answers (1)

Jayme
Jayme

Reputation: 1946

don't forget to include node_modules/swimlane/ngx-datatable/release/assets/icons.css

or for sass @import '~@swimlane/ngx-datatable/release/assets/icons.css';

Upvotes: 2

Related Questions