SpreadJS 14
Features / Sort / Sort with Grouped Data
In This Topic
    Sort with Grouped Data
    In This Topic

    SpreadJS allows you to sort grouped data in different ways by using groupSort enumeration. It provides four values which define the way in which group sorting will occur:

    Enum Value Sort Type Description
    none Flat Sort Sorts the data in a flat manner without considering any group
    group Group Level Sort Sorts and moves the group but keeps the group data as it is
    child Child Level Sort Sorts the group data but keeps the group as it is
    full Full Sort Sorts the group and group data, both

    The below image explains different types of group sorting with an example:

    Original Data Flat Sort Group Level Sort Child Level Sort Full Sort

    If sorting is applied on a range which contains grouped data and groupSort enumeration is not defined, group level sorting will occur within the group. Also, the data out of sorting range will not change its location. For example, If you sort column A, the data in column C won't change.

    Using Code

    This example shows how to sort the grouped data by using API members and UI operation by using code.

    JavaScript
    Copy Code
    // set data
    activeSheet.setArray(3, 0, [
        [2], [1], ['cc'], [2], [1], ['bb'], [1], [2], ['aa'], [1], [2], ['dd']
    ]);
    activeSheet.rowOutlines.group(3, 2);
    activeSheet.rowOutlines.group(6, 2);
    activeSheet.rowOutlines.group(9, 2);
    activeSheet.rowOutlines.group(12, 2);
    spread.resumePaint();
    
    // set rowFilter
    activeSheet.rowFilter(new GC.Spread.Sheets.Filter.HideRowFilter(new GC.Spread.Sheets.Range(3, 0, 13, 1)));
    
    //1) If you want to sort the grouped data by UI operation (sorting using filter dialog), you should use RangeSorting event
    spread.bind(GC.Spread.Sheets.Events.RangeSorting, function (e, info) {
        // set GroupSort to full
        info.groupSort = GC.Spread.Sheets.GroupSort.full;
    });
               
    // 2) If you want to use api to sort the grouped data, you should use this code:
    //activeSheet.sortRange(3, 0, 13, 1, true, [{ index: 0, ascending: true }], { groupSort: GC.Spread.Sheets.GroupSort.full });