add class to multiple rows on angular material 2 datable

Question

Suppose I have a datable like this :

      <md-table #table [dataSource]="dataSource">
        <!-- first Column -->
        <ng-container mdColumnDef="position">
          <md-header-cell *mdHeaderCellDef> No. </md-header-cell>
          <md-cell *mdCellDef="let element"> {{element.position}} </md-cell>
        </ng-container>

        <!-- second Column -->

        <ng-container mdColumnDef="name">
          <md-header-cell *mdHeaderCellDef> Name </md-header-cell>
          <md-cell *mdCellDef="let element"> {{element.name}} </md-cell>
        </ng-container>

        <md-header-row *mdHeaderRowDef="displayedColumns"></md-header-row>
        <md-row *mdRowDef="let row; columns: displayedColumns;"></md-row>
      </md-table>

How can I apply a css class to first and second column simultaneously ?

If I wrap first and second column with a span tag and apply a css class to it, it dosen't work.

Shantanu · Accepted Answer · 2017-09-20 12:33:08Z

Why you want to add class? To apply styles for 1st & 2nd column there're many ways.

1) Using CSS3 nth-child selector you can select mat cell of mat row & have styles in it like;

.mat-row .mat-cell:nth-child(1), .mat-row .mat-cell:nth-child(2) {
    //add style here to apply 1st & 2nd clumn
}

2) Material creates classes cdk-column-position & cdk-column-name for your 1st & 2nd column (based on defined mdColumnDef) so you can add styles for them also:

.cdk-column-position, .cdk-column-name {
  //add styles for both columns
}

3) You can have [ngClass] on md-header & md-cell tags of 1st & 2nd column. And conditionally have class for those two columns respectively. So your template can be

<!-- first Column -->
<ng-container mdColumnDef="position">
  <md-header-cell *mdHeaderCellDef [ngClass]="'my-class'"> No. </md-header-cell>
  <md-cell *mdCellDef="let element" [ngClass]="'my-class'"> {{element.position}} </md-cell>
</ng-container>

<!-- second Column -->

<ng-container mdColumnDef="name">
  <md-header-cell *mdHeaderCellDef [ngClass]="'my-class'"> Name </md-header-cell>
  <md-cell *mdCellDef="let element" [ngClass]="'my-class'"> {{element.name}} </md-cell>
</ng-container>

Plunker Example

Collectives™ on Stack Overflow

add class to multiple rows on angular material 2 datable

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related