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?

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); }