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).

Why don't you sort the data on ts side? rows: rowData.sort((a, b) => a.milliseconds - b.milliseconds).reverse() — Julian W.
– Julian W., Commented May 28, 2019 at 3:47
Why would you not just sort by b.milliseconds - a.milliseconds rather that sort in reverse order then reverse, seems like a waste of a reverse. — Adrian Brand
– Adrian Brand, Commented May 28, 2019 at 5:11
@prindev thats what I am doing except I am doing b.milliseconds - a.milliseconds instead of reverse. However the table is not rendered as sorted. — HelloWorld
– HelloWorld, Commented May 28, 2019 at 15:01

Akber Iqbal · Accepted Answer · 2019-05-28 03:37:33Z

2

you have to do 2 things to achieve that:

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
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

answered May 28, 2019 at 3:37

Akber Iqbal

15.1k12 gold badges54 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dominik Brázdil Over a year ago

you don't actually need to target the CSS on the last column, each column in MatTable has default class assigned to it in format mat-column-columnName. So your CSS could look like: .mat-column-milliseconds { display: none; }

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related