New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
How to set initial sorting? #14
Comments
Hi, |
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> |
Hey Great Work. I'm just curious if this has been implemented yet? If not could it be included in your next release? |
It's not implemented yet. I will try to implement this ASAP |
Great work mariuszfoltak, after days of trying to find a simple solution for my table yours was the answer..
//edit: doing this is disabling the sorting, not a good fix |
@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 ! |
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.
The text was updated successfully, but these errors were encountered: