1001albertpadilla free commented 4 years ago

Cool. It works. Thanks!

1001albertpadilla free commented 5 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 4 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 free commented 4 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 4 years ago

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

1001albertpadilla free commented 4 years ago

Please see updated codes above. Thanks.