I have a <p-table>
table with sortMode="multiple"
. I would like to specify two columns as the default sort when the page is first displayed. If I set sortMode="single" it works by specifying the sortField="year" [sortOrder]="-1" options (eg the header appears selected and the column sorted). What would be the equivalent for multiple columns?
Similar sample code (taken from https://www.primefaces.org/primeng/showcase/#/table/sort )
<h3>Multi Sort with MetaKey</h3>
<p-table [columns]="cols" [value]="cars2" sortMode="multiple">
<ng-template pTemplate="header" let-columns>
<tr>
<th *ngFor="let col of columns" [pSortableColumn]="col.field">
{{col.header}}
<p-sortIcon [field]="col.field"></p-sortIcon>
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-rowData let-columns="columns">
<tr>
<td *ngFor="let col of columns">
{{rowData[col.field]}}
</td>
</tr>
</ng-template>
</p-table>
export class TableSortDemo implements OnInit {
cars1: Car[];
cars2: Car[];
cars3: Car[];
cols: any[];
constructor(private carService: CarService) { }
ngOnInit() {
this.carService.getCarsSmall().then(cars => this.cars1 = cars);
this.carService.getCarsSmall().then(cars => this.cars2 = cars);
this.carService.getCarsSmall().then(cars => this.cars3 = cars);
this.cols = [
{ field: 'vin', header: 'Vin' },
{ field: 'year', header: 'Year' },
{ field: 'brand', header: 'Brand' },
{ field: 'color', header: 'Color' }
];
}
customSort(event: SortEvent) {
event.data.sort((data1, data2) => {
let value1 = data1[event.field];
let value2 = data2[event.field];
let result = null;
if (value1 == null && value2 != null)
result = -1;
else if (value1 != null && value2 == null)
result = 1;
else if (value1 == null && value2 == null)
result = 0;
else if (typeof value1 === 'string' && typeof value2 === 'string')
result = value1.localeCompare(value2);
else
result = (value1 < value2) ? -1 : (value1 > value2) ? 1 : 0;
return (event.order * result);
});
}
}
I would like to set the default sort to be "year,brand"
So it appears like this:
Answering my own question in case it helps others. You have to use the multiSortMeta
property similar to this:
[multiSortMeta]="[{field: 'year', order: -1}, {field: 'brand', order: -1}]"
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.