我正在尝试使用Bootstrap的主题实现ngx-datatable。
我在应用程序样式中添加了Bootstrap 4和ngx-datatable中的Bootstrap CSS:
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.css",
"node_modules/@swimlane/ngx-datatable/release/themes/bootstrap.css",
"src/styles.css"
],
然后在我的页面组件上实现表:
<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)'>
此外,模块全部导入到app模块中:
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule,
NgbModule,
FontAwesomeModule,
NgxDatatableModule
],
问题在于没有显示列标题图标。没有显示排序方向图标,我不知道还有什么要添加,因为一切似乎都像在演示站点中那样设置。
别忘了包括node_modules/swimlane/ngx-datatable/release/assets/icons.css
或者为sass @import '~@swimlane/ngx-datatable/release/assets/icons.css';