How to sort angular material table rows by property not declared in displayed Columns

Question

Here is the code that creates my tableModel:

const rowData = [{
        id: '74b0d34f-1e2f-47d1-b1ea-55658d5d750f',
        assetId: '9ff317cd-3b75-433d-a32b-949c67b84eee',
        type: 'DATA_RECORDING',
        eventStart: '2019-05-01T00:00:00Z',
        eventEnd: '2019-05-01T00:00:00Z',
        assetName: 584,
        milliseconds: 3524583453452
},{
        id: '74b0d34f-1e2f-47d1-b1ea-55658d5d7534',
        assetId: '9ff317cd-3b75-433d-a32b-949c67b84eee',
        type: 'DATA_RECORDING',
        eventStart: '2019-05-01T00:00:00Z',
        eventEnd: '2019-05-01T00:00:00Z',
        assetName: 584,
        milliseconds: 35245824528
},{
        id: '74b0d34f-1e2f-47d1-b1ea-55658d5d7545',
        assetId: '9ff317cd-3b75-433d-a32b-949c67b84eee',
        type: 'DATA_RECORDING',
        eventStart: '2019-05-01T00:00:00Z',
        eventEnd: '2019-05-01T00:00:00Z',
        assetName: 584,
        milliseconds: 13219245949
}];

tableModel(data: Array<dataObj>) {
    return [{
        headers: ['DATE LOGGED', 'ASSET ID', 'DIVISION NAME', 'TYPE'],
        displayedColumns: ['eventStart', 'assetId', 'divisionName', 'type'],
        rows: rowData
    }];
}

I want the default sort of the table rows to be based on the 'millisecond' properties of the row objects, but I do not want to display the property in the table. Is there a way to do this? I don't see anything about it in the docs and setting matSortStart="desc" just sorts the table based on the first column (eventStart in this case).

Answer 1

you have to do 2 things to achieve that:

1. Add matSortActive="milliseconds" so that sorting is done by this column, you already knew matSortDirection="desc" which will work when added to the <table mat-table> element
2. Add css which hides the milliseconds column (which we placed at the very last), since you didn't want to display it

relevant CSS:

td.mat-cell:last-of-type,
th.mat-header-cell:last-of-type
{display:none;}

relevant HTML:

<table mat-table [dataSource]="dataSource" matSort matSortActive="milliseconds" matSortDirection="desc" class="mat-elevation-z8">

    <!-- id Column -->
    <ng-container matColumnDef="id">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> id. </th>
        <td mat-cell *matCellDef="let element"> {{element.id}} </td>
    </ng-container>

    <!-- type Column -->
    <ng-container matColumnDef="type">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> type </th>
        <td mat-cell *matCellDef="let element"> {{element.type}} </td>
    </ng-container>

    <!-- assetName Column -->
    <ng-container matColumnDef="assetName">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> assetName </th>
        <td mat-cell *matCellDef="let element"> {{element.assetName}} </td>
    </ng-container>

    <!-- milliseconds Column 
  -->
    <ng-container matColumnDef="milliseconds" class='hideMe'>
        <th mat-header-cell *matHeaderCellDef mat-sort-header> milliseconds </th>
        <td mat-cell *matCellDef="let element"> {{element.milliseconds}} </td>
    </ng-container>

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

complete working stackblitz is available here