ngx-datatable - 引导主题 - 列标题答案

【问题标题】：ngx-datatable - Bootstrap theme - Column headersngx-datatable - 引导主题 - 列标题
【发布时间】：2019-06-08 23:13:11
【问题描述】：

我正在尝试通过实现 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
],

问题在于没有显示列标题图标。没有显示任何排序方向图标，我不知道还要添加什么，因为一切看起来就像在演示站点中设置的一样。

【问题讨论】：

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

【解决方案1】：

不要忘记包含node_modules/swimlane/ngx-datatable/release/assets/icons.css

或者对于 sass @import '~@swimlane/ngx-datatable/release/assets/icons.css';

【讨论】：

是的，这是我几天前找到的解决方案。谢谢！
顺便说一句，您知道 ngx-datatables 上的 Bootstrap（更适合 BS 4）的任何其他主题吗？与 Bootstrap 捆绑在一起的那个看起来不太像 Bootstrap 表和寻呼机......
ngx-datatables 使用自己的样式，我只是通过使用他们的引导样式表作为参考推出了自己的样式，对于加载程序或列调整大小处理等内容，您需要查看它们的材料主题并获取要复制的样式，我使用了 sass，所以我查看了他们的 sass 文件，希望对您有所帮助，让我知道
太糟糕了，它不能像往常一样重用 Bootstrap 样式来设置表格样式...不得不再次重做所有样式以使其看起来像 BS 有点痛苦，因为它看起来不像即使有这些样式，也像 BS... 知道是否有其他在线资源可以获取 ngx-datatables 的样式？