Nested Property Tablesort Not Working

Dear MHarmony,

I thought, that you've got a problem with your table construction.

You're iterating with *ngFor (let row of tableData), and then in td elements you're interpolating strings {{row.last_name}}.

But row element haven't got last_name property on the first level (you have to add an employee to use this property).

Please take a look at my table - there's no pagination and I have removed the *ngIf from td elements:

.html:

<div class="row">
  <div class="col-md-6 mx-auto my-5">
    <table mdbTable stickyHeader="true" hover="true" class="z-depth-1 btn-table">
      <thead class="sticky-top">
      <tr>
        <th [mdbTableSort]="tableData" sortBy="employee.last_name">
          Last Name <i class="fa fa-sort cursor-pointer"></i>
        </th>

        <th [mdbTableSort]="tableData" sortBy="employee.first_name">
          First Name <i class="fa fa-sort cursor-pointer"></i>
        </th>

        <th [mdbTableSort]="tableData" sortBy="employee.start_date">
          Start Date <i class="fa fa-sort cursor-pointer"></i>
        </th>

        <th [mdbTableSort]="tableData" sortBy="employee.labor_category.category_name">
          LCAT <i class="fa fa-sort cursor-pointer"></i>
        </th>

        <th [mdbTableSort]="tableData" sortBy="employee.track.track_name">
          Track <i class="fa fa-sort cursor-pointer"></i>
        </th>

        <th [mdbTableSort]="tableData" sortBy="employee.contract.contract_name">
          Contract <i class="fa fa-sort cursor-pointer"></i>
        </th>

        <th [mdbTableSort]="tableData" sortBy="due_date">
          Due Date<i class="fa fa-sort cursor-pointer"></i>
        </th>

        <th scope="col"></th>
      </tr>
      </thead>

      <tbody #tablerow>
      <tr mdbTableCol *ngFor="let row of tableData; let i = index;">
        <td scope="row">{{row.employee.last_name}}</td>
        <td >{{row.employee.first_name}}</td>
        <td >{{row.employee.start_date | date:'M/d/yy'}}</td>
        <td >{{row.employee.labor_category?.category_name}}</td>
        <td >{{row.employee.track?.track_name}}</td>
        <td >{{row.employee.contract?.contract_name}}</td>
        <td >{{row.employee.due_date}}</td>
        <td  align="right" style="width: 64px;">
          <div>
            <a mdbBtn floating="true"  type="button"
               gradient="blue" size="sm" class="waves-light mb-1 mr-2" style="display: inline-block;"
               mdbTooltip="View" placement="top" mdbWavesEffect>
              <i class="fa fa-eye"></i>
            </a>
          </div>
        </td>
      </tr>
      </tbody>

      <!--<tfoot class="grey lighten-5 w-100">-->
      <!--<tr>-->
        <!--<td colspan="8">-->
          <!--<mdb-table-pagination searchPagination="true" [searchDataSource]="tableData"-->
                                <!--(nextPageClick)="onNextPageClick($event)" (previousPageClick)="onPreviousPageClick($event)">-->
          <!--</mdb-table-pagination>-->
        <!--</td>-->
      <!--</tr>-->
      <!--</tfoot>-->
    </table>
  </div>
</div>

.ts:

tableData = [{
    completed_date: null,
    due_date: "2019-11-30",
    employee: {
      first_name: "John",
      last_name: "Doe",
      start_date: "2019-11-01",
      labor_category: {
        category_name: "Senior Associate"
      },
      track: {
        track_name: "Technical"
      },
      contract: {
        contract_name: "CONTRACT"
      }
    },
    last_modified_date: "2019-03-22T17:14:52.593Z"
  },
    {
      completed_date: null,
      due_date: "2019-11-30",
      employee: {
        first_name: "John 2",
        last_name: "Doe 2",
        start_date: "2019-11-12",
        labor_category: {
          category_name: "Senior Associate 2"
        },
        track: {
          track_name: "Technical 2"
        },
        contract: {
          contract_name: "CONTRACT 2"
        }
      },
      last_modified_date: "2019-03-26T17:14:52.593Z"
    }]

The above code works fine on my end - I'm able to sort over every property from the table.

Best Regards,

Damian