angular 4 - Row styling in CDK data-table

Question

I am trying to use cdk datatable with customized row view. But there is not enough information about how to accomplish this yet. I tried going through the source code, But couldn't get a grasp of how to do it. Basically I want to contain the data in a card for each row. How can I do this?

Answer 1

Add a class to md-row that replicates the styling of md-card.

css:

.card{
    padding: 24px;
    border-radius: 2px;
    margin: 10px 0 10px 0;
}

html:

 <md-row *cdkRowDef="let row; columns: displayedColumns;"
          class="mat-elevation-z4 card">

Plunker demo