3

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.

CesarD
  • 573
  • 14
  • 30

1 Answers1

2

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';

Jayme
  • 1,776
  • 10
  • 28
  • Yes, this was the solution I found a few days ago. Thanks! – CesarD Mar 14 '19 at 20:30
  • BTW, do you know of any other theme for Bootstrap (better for BS 4) on ngx-datatables? The one that comes bundled for Bootstrap doesn't looks too much like a Bootstrap table and pager... – CesarD Mar 14 '19 at 20:32
  • 1
    the ngx-datatables use their own styles, I just rolled my own one by using their bootstrap style sheet as a reference, for things like the loader or the column resize handle you need to look at their material theme and get the styles to copy, I used sass so I looked at their sass files, hope this helps, let me know – Jayme Mar 15 '19 at 07:00
  • 1
    Too bad it can't reuse Bootstrap styles for styling a table as usual... Having to redo all styles again to make it look LIKE BS is kind of a pain, as it doesn't look like BS at all even with those styles... Any idea if there are any other sources online to get styles for ngx-datatables? – CesarD Mar 15 '19 at 14:27