CODEWITHSUNDEEP
angularsassbootstrap-4angular-material2angular-cdk
Moritz
Moritz

Reputation: 118

Use angular-cdk table with bootstrap 4

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?

Upvotes: 5

Views: 1886

Answers (4)

Bill Clyde
Bill Clyde

Reputation: 230

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>

Upvotes: 2

Anton
Anton

Reputation: 1

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

Upvotes: 0

Michal Filip
Michal Filip

Reputation: 990

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

Upvotes: 4

funkizer
funkizer

Reputation: 4897

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

Upvotes: 0

Related Questions