ngx-datatable - Тема Bootstrap - Заголовки столбцов

Я пытаюсь реализовать ngx-datatable с реализацией темы для Bootstrap.

Я добавляю CSS Bootstrap как из Bootstrap 4, так и из ngx-datatable в стили приложения:

"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)'>

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

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

Проблема заключается в том, что не отображаются значки заголовков столбцов. Ни один из значков направления сортировки не отображается, и я не знаю, что еще добавить, поскольку кажется, что все настроено так же, как на демонстрационном сайте.


angular bootstrap-4 angular-components ngx-datatable
person CesarD    schedule 14.01.2019    source источник

Ответы (1)


arrow_upward
2
arrow_downward

не забудьте включить node_modules/swimlane/ngx-datatable/release/assets/icons.css

или для sass @import '~@swimlane/ngx-datatable/release/assets/icons.css';

person Jayme    schedule 14.03.2019
comment
Да, это было решение, которое я нашел несколько дней назад. Спасибо! - person CesarD; 14.03.2019
comment
Кстати, знаете ли вы о какой-либо другой теме для Bootstrap (лучше для BS 4) на ngx-datatables? Тот, который идет в комплекте для Bootstrap, не слишком похож на таблицу Bootstrap и пейджер ... - person CesarD; 14.03.2019
comment
ngx-datatables используют свои собственные стили, я просто скатил свой собственный, используя их таблицу стилей начальной загрузки в качестве ссылки, для таких вещей, как загрузчик или дескриптор изменения размера столбца, вам нужно посмотреть на их тему материала и получить стили для копирования, Я использовал sass, поэтому я посмотрел их файлы sass, надеюсь, это поможет, дайте мне знать - person Jayme; 15.03.2019
comment
Жаль, что он не может повторно использовать стили Bootstrap для стилизации таблицы, как обычно ... Необходимость переделывать все стили снова, чтобы она выглядела как BS, это своего рода боль, так как это совсем не похоже на BS даже с этими стилями ... Есть идеи, есть ли в сети какие-либо другие источники для получения стилей для ngx-datatables? - person CesarD; 15.03.2019