Sort a range by custom list in Angular Spreadsheet component

27 Sep 20233 minutes to read

You can also define the sorting of cell values based on your own customized personal list. In this article, custom list is achieved using custom sort comparer.

In the following demo, the Trustworthiness column is sorted based on the custom lists Perfect, Sufficient, and Insufficient.

import { Component, OnInit,ViewChild } from '@angular/core';
import { tradeData } from './datasource';
import { DataManager, DataUtil } from '@syncfusion/ej2-data';
import { SpreadsheetComponent, CellModel } from '@syncfusion/ej2-angular-spreadsheet';

@Component({
    selector: 'app-container',
    template: "<ejs-spreadsheet #spreadsheet (dataBound)='dataBound()' (sortComplete)='sortComplete($event)'> <e-sheets> <e-sheet> <e-ranges> <e-range [dataSource]='tradeData'></e-range></e-ranges><e-columns><e-column [width]=100></e-column><e-column [width]=120></e-column><e-column [width]=96></e-column></e-columns></e-sheet></e-sheets></ejs-spreadsheet>"
})
export class AppComponent implements OnInit {

    public tradeData?: object[];
    @ViewChild('spreadsheet') public spreadsheetObj?: SpreadsheetComponent;
    ngOnInit(): void {
        this.tradeData = tradeData;
    }
    dataBound(){
        if (this.spreadsheetObj!.activeSheetIndex === 0) {
            this.spreadsheetObj!.sort({sortDescriptors: { field: 'F',  sortComparer: this.mySortComparer }, containsHeader: true}, 'A1:H20');
        }
    };
    sortComplete (args : any) {
        this.spreadsheetObj!.selectRange(args.range);
        // code here.
    }


mySortComparer(x: CellModel, y: CellModel): number {
// custom sort comparer to sort based on the custom list.
   let customList: string[] = ['Perfect', 'Sufficient', 'Insufficient'];
    let comparer: Function = DataUtil.fnSort('Ascending');
    return comparer(x ? customList.indexOf((x as any).value) : x, y ? customList.indexOf((y as any).value) : y);
};

}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { SpreadsheetAllModule } from '@syncfusion/ej2-angular-spreadsheet';
import { AppComponent } from './app.component';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        SpreadsheetAllModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

See Also