- SpreadJS Overview
- Getting Started
- JavaScript Frameworks
- Best Practices
-
Features
- Workbook
- Worksheet
- Rows and Columns
- Headers
- Cells
- Data Binding
- TableSheet
- GanttSheet
- JSON Schema with SpreadJS
- SpreadJS File Format
- Data Validation
- Conditional Formatting
- Sort
- Group
- Formulas
- Serialization
- Keyboard Actions
- Shapes
- Form Controls
- Floating Objects
- Barcodes
- Charts
- Sparklines
- Tables
- Pivot Table
- Slicer
- Theme
- Culture
- SpreadJS Designer
- SpreadJS Designer Component
- Touch Support
- Formula Reference
- Import and Export Reference
- Frequently Used Events
- API Documentation
- Release Notes
Sort with Grouped Data
SpreadJS allows you to sort grouped data in different ways by using groupSort enumeration. It provides four values that define the way in which group sorting will occur:
Enum Value | Sort Type | Description |
|---|---|---|
| Flat Sort | Sorts the data in a flat manner without considering any group |
| Group Level Sort | Sorts and moves the group but keeps the group data as it is |
| Child Level Sort | Sorts the group data but keeps the group as it is |
| 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 that contains grouped data and groupSort enumeration is not defined, group-level sorting will occur within the group. Also, the data out of the sorting range will not change its location. For example, If you sort column A, the data in column C won't change.
The following code sample shows how to sort the grouped data by using API members and UI operation by using 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 });