Ngx-datatable: Default Sort Not Working / Not Documented.

[RicardoVaranda]

I'm submitting a ... (check one with "x")

[ ] bug report => search github for a similar issue or PR before submitting
[X] feature request
[ ] support request => Please do not submit support request here

Current behavior

Default Sorting does not work
Expected behavior

Have a way to be able to define which column to sort by at the start.

Reproduction of the problem

http://plnkr.co/edit/TLx2vYlCTLsqcLwvWafd is broken, if you can provide me a different plnkr I will post a repro
What is the motivation / use case for changing the behavior?

Please tell us about your environment:

• Table version: 0.7.x
  

• Angular version: 2.0.x
  

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
  

• Language: [all | TypeScript X.X | ES6/7 | ES5]

[RicardoVaranda]

@amcdnl Could you let me know the proper way to declare a default sort by column, Thanks 👍

[amcdnl]

Is this client side sorting you are expecting?

[Fonexn]

Try remove any html tag above the datatable. In this case <h3>basic</h3>

I do not know why, but the sort order stops working with any html above datatable.

[RicardoVaranda]

Yes client side default sorting for example:
I want to make one of my columns be ordered by default in ascending order.

I've tried to find how to do something like this and there seems to be no documentation about it or I've just not seen it.

[marjan-georgiev]

Fixed in 6.1.2

[AlbertoFCasarrubias]

@RicardoVaranda do you find the proper way? I'm looking for the same

[RicardoVaranda]

@yaotzin68 rather than waiting I did the sort myself with the help of underscore:

this.rows = _.sortBy(pages, function (o) {
          return parseInt(o['page_number']);
        });

[AlbertoFCasarrubias]

@RicardoVaranda thanks , I'll do the same

[mikebuckley5]

According to the commit from @marjan-georgiev it looks like its done like this:

<ngx-datatable [sorts]="[{prop: 'name', dir: 'desc'}]">...

[lopadk]

Still not working, even demo page does not work:
https://swimlane.github.io/ngx-datatable/#default-sorting
The column is marked as sorted, but no sorting is taking place

[olaf89]

Same here, when page is loaded sorting indicator is visible, but items are not sorted.

[RicardoVaranda]

@olaf89 , if you'd like try the fix I mentioned above until it's fixed in the [sorts]. That is still working for me.

[mrjamesriley]

@marjan-georgiev this issue still seems to exist, as as @lopadk notes, the issue can be seen on the demo page for default sorting: http://swimlane.github.io/ngx-datatable/#default-sorting. Can this issue be re-opened?

[gantrim]

I agree that this issue should be reopened. The workaround provided by @RicardoVaranda works fine if you're doing everything client side, I however am handling limit on the server side via Postgres. For anyone else doing the same, I have been working around this by manually calling the changeSort method in my ngOnInit() here is an example:

list.html

<ngx-datatable
    [rows]="rows"
    [columnMode]="'force'"
    [headerHeight]="50"
    [footerHeight]="50"
    [rowHeight]="50"
    [scrollbarV]="true"
    [externalSorting]="true",
    [loadingIndicator]='showLoadingIndicator()',
    (sort)="changeSortSettings($event.column.prop, $event.newValue)">

list.component.ts

@Component({
   selector: 'my-list'
   // ...
})
export class ListComponent implements OnInit {
    private limit:number;
    private defaultSortColumnProp: string;
    private defaultSortDirection: string;
    private sortColumn: string;
    private sortDirection: string;

    //...

    ngOnInit() {
        //...
        this.changeSortSettings(this.defaultSortColumnProp, this.defaultSortDirection);
        //...
    }

    //...

    changeSortSettings(columnProp: string, direction: string) {
        this.sortColumn = columnProp;
        this.sortDirection = direction;

        // reset the page to 0 on sort
        this.page.pageNumber = 0;

        // make http get call to backend api. 
        //backend api makes postgres query with limit and sortby props
        this.rowsService.refreshRowsFromBackend(this.limit, this.sortColumn, this.sortDirection);
    }
};

hope that helps others until this issue is fixed.

[CaffGeek]

Any fix on this yet? Demo page still broken too.

[maustand]

Still it is broken... i tried to use the default soring in this way but it does not work.

<ngx-datatable
[sorts]="[{prop: 'requests', dir: 'desc'}]

[bhushangahire]

+1

[RicardoVaranda]

@amcdnl Hey Austin any chance you can take a look at this, seems to be affecting a substantial amount of people.

[CramericaIndustries]

Works for me (9.3)

<ngx-datatable  [rows]="currentSolarState"
        [selectionType]="'single'"
        (select)='onSolarRowClick($event)'
        [headerHeight]="30"
        [footerHeight]="30"
        [rowHeight]="'20px'"
        [sorts]="[{prop: 'name', dir: 'desc'}]"
        class="material">

[bhushangahire]

I think the issue with when you add ngx-datatable-column templates then it doesn't work.
Check this demo, which is not working: https://swimlane.github.io/ngx-datatable/#default-sorting

[bhushangahire]

Those who are looking for a temporary solution I am triggering the click event on header span to sort default column.

[bhushangahire]

This seems to be Fixed in 10.3.0. Thanks

[3d6]

got this error when loading the data to early into the table. (may be a result of the onPush refresh strategy). solved it with setTimeout() to set the data one tick later