ui-grid sort data after filter

Question

I have this model containing labels in the user selected language.

"status": [{
        "id": "IN_PROGRESS",
        "label": "In progress"
    }, {
        "id": "KO",
        "label": "Everything is KO"
    }, {
        "id": "OK",
        "label": "Everything is OK"
    }]

Data from server:

myService.data =[{
status:"OK",
history:"History 2"
},{
status:"IN_PROGRESS",
history:"History 3"
},{
status:"KO",
history:"History 4"
}
]

In my controller I have the following:

vm.myList = {
            enableColumnMenus: false,
            enableHorizontalScrollbar: 0,
            enableVerticalScrollbar: 0,
            enableRowSelection: false,
            enableRowHeaderSelection: false,
            multiSelect: false,
            paginationPageSizes: [6],
            paginationPageSize: 6,
            useExternalSorting: false,
            paginationTemplate: "views/templates/grid-custom-pager.html",
            columnDefs: [{
                    displayName: "recording.status",
                    field: 'status',
                    headerCellFilter: 'translate',
                    cellFilter: 'translate',
                    sortCellFiltered: true,
                    cellTemplate: '<div class="ui-grid-cell-contents" translate-field="status" translate-value="COL_FIELD"></div>'
                },
                {
                    displayName: "recording.history",
                    field: 'history',
                    headerCellFilter: 'translate'
}],
data: myService.data}

When I press the header cell for sorting, the sort is made by the field value, not by the displayed value. Is there any way of sorting the column after the filtering is done?

Answer 1

Have you tried creating your own sorting algorithm? See the wiki page of the project Sorting in Ui-Grid