Use angular-cdk table with bootstrap 4

Question

I'm using the Angular CDK table (without Angular Material2) and want to use bootstrap table design to style it.

It is possible to add classes to the CDK table, but the bootsstrap rules directly address the html table elements tr, td, ... and Angular CDK uses custom tags cdk-table, cdk-row, cdk-cell ...

As quick and dirty solution, I wrote my own rules for the cdk elements with a lot of copy paste from the bootstrap sources. But is there a nice and perhaps more future proof solution to automatically inherit the bootstrap rules for CDK tables?

Studio

Answer 1

I've had good results using sass version of bootstrap and adding the following styles for cdk-table:

.cdk-table { display: table; @extend table; }
.cdk-header-row { display: table-row; @extend thead; }
.cdk-header-cell { display: table-cell; @extend th; }
.cdk-row { display: table-row; @extend tr; }
.cdk-cell { display: table-cell; @extend td; }
.cdk-table.table-hover .cdk-row:hover { background-color: rgba(0, 0, 0, 0.075); }

Sifuentes

Answer 2

I was able to get a cdk table to use bootstrap 4 without any trouble. Assuming you have bootstrap installed, in the .component.scss file just add:

@import "~/bootstrap/scss/bootstrap"

You could also add it to the styles.scss file to make it global.

Then in the .component.html:

<table [datasource]="someDatasource" cdk-table class="table table-bordered">
...
</table>

Ras

I think this is more correct than the accepted answer - cdk-table is supposed to be used as directive and not as element. It implements just the behaviour while styling is responsibility of the element to which it is applied. – Uncaredfor

perhaps this approach will work for the cdk-table directive but might come in short for the inner generated tags. So I would go with the accepted answer personally. – Tuxedo

Answer 3

I don't believe there is. Cdk table isn't really a table element.

Strangulation

I guess what I recommend is not trying to make cdk table look like bs, instead write your own table component in bs style. :) – Strangulation

Answer 4

You can override style: .cdk-column-...name of column... { ... }. this is css class will be insert last in cdk-header-cell ...

Boulder