CODEWITHSUNDEEP
angularjsangular-material
panagulis72
panagulis72

Reputation: 2169

Change css style of Angular Material Data Table

I'm using mdDataTable to display data retrieved form Server. Is there a possibility to change the css class of mdt-row? If I try to add a class, mdDatatable overwrites it

Upvotes: 1

Views: 14864

Answers (2)

Sameel
Sameel

Reputation: 132

DataTable client version You can explore the classes and ids for the element in the developer tool, It is easy to add style for all elements, Here I've added sample styles you can keep added as you wish. Hope it helps.

 .mat-table {
        overflow: auto;
        max-height: 700px;
      }

 .mat-header-cell .mat-sort-header-sorted {
        color: #0A0A0A;
      }

 md-pagination-wrapper {
        width:auto !important;
    }

 md-row:nth-child(even){
      background-color:#EDF1F5;
      }

 md-row:nth-child(odd){
      background-color:#FDFDFB;
      }

Upvotes: 0

ganders
ganders

Reputation: 7451

in your own css file, you can override the css by explicitly targetting the angular md classes, like this:

.mdt-row {
  {overridesettingname}: {newsetting};
}

But I'd be careful because that overrides site-wide. You can override just a single page by targeting a parent element on the page, like:

.{mypageclassname} .mdt-row {
  {overridesettingname}: {newsetting};
}

Another note, make sure YOUR css file is loaded AFTER the angular css file(s).

Upvotes: 1

Related Questions