ngx-datatable-Bootstrap主题-列标题

时间:2019-01-14 22:55:46

标签: angular bootstrap-4 angular-components ngx-datatable

我正在尝试通过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)'>

此外,所有模块均导入到应用程序模块中:

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

问题在于没有显示列标题图标。没有显示排序方向图标,我也不知道要添加什么,因为一切似乎都像在演示站点中一样设置。

1 个答案:

答案 0 :(得分:0)

别忘了包含node_modules/swimlane/ngx-datatable/release/assets/icons.css

或无礼的@import '~@swimlane/ngx-datatable/release/assets/icons.css';