Add border and header row background color to Angular material datatable

Question

I need to add table border and header row background color to my Angular datatable. I am explaining my code below.

<div class="example-container mat-elevation-z8">

  <mat-table [dataSource]="dataSource" matSort>

    <!-- Date Column -->
    <ng-container matColumnDef="Date">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Date </mat-header-cell>
      <mat-cell *matCellDef="let row"> {{row.date}} </mat-cell>
    </ng-container>

    <!-- Name Column -->
    <ng-container matColumnDef="name">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Name </mat-header-cell>
      <mat-cell *matCellDef="let row"> {{row.name}} </mat-cell>
    </ng-container>

    <!-- Download Column -->
    <ng-container matColumnDef="Download">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Download </mat-header-cell>
      <mat-cell *matCellDef="let row" [style.color]="row.color"> {{row.download}} </mat-cell>
    </ng-container>

    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;">
    </mat-row>
  </mat-table>

  <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
</div>

The above code is generating the output like below.

But here I need the complete table border and also the first row background color to this Angular material datatable using CSS which should looks like below.

So like the above image I need to add the border and header row background color. As I have no experience on CSS can anybody please help to resolve this problem ?

Jacek Ratajewski · Accepted Answer · 2021-09-02 05:48:08Z

1

There are 2 problems with styling material:

we cannot overwrite them inside component without using ::ng-deep which is deprecated
there is a lot of template generated by material inside every html tag

But it's possible, altho it's a lot of hassle.

If you want to change background color of header row add:

.mat-header-row::ng-deep {
  background-color: black;
}

To your css.

If you want to add border to table add:

.mat-table::ng-deep {
  border: 1px solid red;
}

You just need to adjust colors to your pleasure :)

Second solution without using depracated ::ng-deep will be adding styles to your global style.css rather than to component, then you need to add just:

.mat-header-row
{
  background-color: black;
}
.mat-table {
  border: 1px solid red;
}

answered Sep 2, 2021 at 5:48

Jacek Ratajewski

2881 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

subhra_user Over a year ago

Its seems ok . I added like

.mat-table {     overflow: auto;     max-height: 500px;     border: 1px solid black;   }        .mat-header-row{     background: #005173; }

but the header font color is not changing and also not visible.

Jacek Ratajewski Over a year ago

add .mat-header-cell { color: red; }

subhra_user Over a year ago

I am using like .mat-header-row{ background: #005173; } .mat-header-cell { color: white; } but the header font color not reflecting.

Jacek Ratajewski Over a year ago

maybe some other style is overwriting it? stackblitz.com/edit/angular-qvxmhe?file=src/app/… on stackblitz it's working fine

Collectives™ on Stack Overflow

Add border and header row background color to Angular material datatable

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related