How to change mdbTable hover color?

1001albertpadilla commented 6 years ago

The solution doesn't seem to work -- table mdbTable #tableEl="mdbTable" class="z-depth-1 table-responsive" mdbTableScroll striped="true"

Arkadiusz Idzikowski staff commented 6 years ago

Could you paste here the HTML you use to render this table (or link to the documentation if it's one of our examples). It will be easier to provide a solution for the specific table structure.

1001albertpadilla commented 6 years ago

              <table mdbTable #tableEl="mdbTable" class="z-depth-1 table-responsive" mdbTableScroll striped="true" scrollY="true" maxHeight="500">
                <thead>
                <tr scope="col">
                  <th scope="row"></th>
                  <th class="custom-datatable-header" [mdbTableSort]="elements" sortBy="code">Code <mdb-icon fas icon="sort"></mdb-icon></th>
                  <th class="custom-datatable-header" [mdbTableSort]="elements" sortBy="name">Name <mdb-icon fas icon="sort"></mdb-icon></th>
                  <th class="custom-datatable-header" [mdbTableSort]="elements" sortBy="address">Address <mdb-icon fas icon="sort"></mdb-icon></th>
                  <th class="custom-datatable-header" [mdbTableSort]="elements" sortBy="displayStatus">Status <mdb-icon fas icon="sort"></mdb-icon></th>
                  <th class="custom-datatable-header">Action</th>
                </tr>
                </thead>
                <tbody>
                <tr *ngFor="let el of elements; let i = index">
                  <th *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex"
                      scope="row" style="padding:  7px;">{{i + 1}}</th>
                  <td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex" style="padding: 7px; font-size: 13px;">{{el.code}}</td>
                  <td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex" style="padding: 7px; font-size: 13px;">{{el.name}}</td>
                  <td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex" style="padding: 7px; font-size: 13px;">{{el.address}}</td>
                  <td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex" style="padding: 7px; font-size: 13px;">
                    <mdb-badge *ngIf="el.status == true" pill="true" primary="true" class="p-1">{{el.displayStatus}}</mdb-badge>
                    <mdb-badge *ngIf="el.status == false" pill="true" warning="true" class="p-1">{{el.displayStatus}}</mdb-badge>
                  </td>
                  <td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex" style="padding: 7px; font-size: 13px;">
                    <button mdbBtn color="secondary" outline="true" rounded="true" size="sm" class="px-2 m-0" mdbWavesEffect (click)="openEditModal(el.warehouseId)">
                      <mdb-icon fas icon="pencil-alt"></mdb-icon>
                    </button>
                  </td>
                </tr>
                </tbody>

Damian Gemza staff commented 6 years ago

@1001albertpadilla You have provided us only the <thead> markup. Please provide us with the <tbody> too.

1001albertpadilla commented 6 years ago

Please see updated codes above. Thanks.

1001albertpadilla commented 6 years ago

Cool. It works. Thanks!