How to set initial sorting?

[Svancara]

Hello,
thanks for your work!

Please can you advice me how to set intial sorting?

I can sort data on the server if it is not possible, but how to set a "sorted" marker in the header?

Also - I think - a datatable will need to initialize some inner variables
( like
private isSortedByMeAsc: boolean = false;
private isSortedByMeDesc: boolean = false;
)

to work properly then.

So I think some initial setup should be possible...

Thank you.

[mariuszfoltak]

Hi,
I think actually is not possible to set initial sorting. I will add this function in next release, it should be available in this week.

[keathmilligan]

Here is an alternate sorter that accomplishes this:

import { Component, Input, OnInit } from '@angular/core';
import { DataTable, SortEvent } from 'angular2-datatable/datatable';

@Component({
  selector: 'datatable-sorter',
  template: `
    <a style="cursor: pointer" (click)="sort()" class="text-nowrap">
      <ng-content></ng-content>
      <span *ngIf="isSortedByMeAsc" class="glyphicon glyphicon-triangle-top" aria-hidden="true"></span>
      <span *ngIf="isSortedByMeDesc" class="glyphicon glyphicon-triangle-bottom" aria-hidden="true"></span>
    </a>`
})
export class TableSorterComponent implements OnInit {
  @Input('by') private sortBy: string;
  @Input('initial') private initial: string;

  private isSortedByMeAsc: boolean = false;
  private isSortedByMeDesc: boolean = false;

  constructor(private mfTable: DataTable) {
    mfTable.onSortChange.subscribe((event: SortEvent) => {
      this.isSortedByMeAsc = (event.sortBy === this.sortBy && event.sortOrder === 'asc');
      this.isSortedByMeDesc = (event.sortBy === this.sortBy && event.sortOrder === 'desc');
    });
  }

  ngOnInit() {
    if (this.initial) {
      if (this.initial === 'asc') {
        this.mfTable.setSort(this.sortBy, 'asc');
      } else {
        this.mfTable.setSort(this.sortBy, 'desc');
      }
    }
  }

  sort() {
    if (this.isSortedByMeAsc) {
      this.mfTable.setSort(this.sortBy, 'desc');
    } else {
      this.mfTable.setSort(this.sortBy, 'asc');
    }
  }
}

To use it, import this in your component that contains the datatable and include it in the directives list. Then in your template, replace "mfDefaultSorter" with "datatable-sorter". To set the initial sort column, add the initial attribute set to either "asc" or "desc". Example:

<th>
  <datatable-sorter initial="asc" by="name">Name</datatable-sorter>
</th>

[ahanley]

Hey Great Work.

I'm just curious if this has been implemented yet? If not could it be included in your next release?

[mariuszfoltak]

It's not implemented yet. I will try to implement this ASAP

[virgil-av]

Great work mariuszfoltak, after days of trying to find a simple solution for my table yours was the answer..
As for the initial sorting I am using a custom pipe on the *ngFor like this:

<tr *ngFor="let task of mf.data | orderBy:['+date']">

//edit: doing this is disabling the sorting, not a good fix

[RicoSchueppel]

@mariuszfoltak : do you have implemented this feature now ? mfDefaultSorter has still just By Input, no initial flag ?

edit: sorry, its solved. i just focused on mfDefaultSorter by=".." But you can simply add a [mfSortBy]=".." next to [mfData]="..." on table level to initially sort it / thx !