Flexmonster Pivot allows you to sort field members and values. This guide describes which sorting options are available in Flexmonster and how to configure them.
You can also check out our video tutorial to see how sorting works.
This section describes how to sort members and values in the classic form, the compact form, and the chart view.
Members can have ascending, descending, or unsorted order. Based on the field’s type, you can apply alphabetical, numerical, or date sorting to members.
Note By default, field members are sorted in ascending order. To override the default sorting order, use the options.defaultHierarchySortName property Live example.
Sorting can be set via UI, in the report, or using API calls:
Step 1. Open the filter view.
Step 2. Use the AZ and ZA toggle buttons to sort field members in ascending and descending orders. To display members in unsorted order, deselect an active toggle.
Step 3. To save the configuration, click the APPLY button.
Specify the sorting type in the sort property when configuring the slice:
slice: {
rows: [
{
uniqueName: "Category",
sort: "desc",
},
],
// Other slice configs
}
Sorting for values can be set via UI, in the report, or using API calls:
You can sort a specific row or column on the grid using sorting arrows, which appear when hovering over field headers. Click the arrow the first time to sort in descending order and the second time for ascending.
Sorting can also be managed through the context menu of each member cell.
To clear sorting, use the context menu of the needed member cell.
Note Sorting values directly in the chart view is not supported. To sort the data, configure the sorting through the сompact or classic view.
If you want to sort values in a specific row or column in your report, we recommend the following approach:
Your report will now contain the sorting configurations in the slice.sorting property. If needed, you can edit the configurations programmatically. To learn more, see the SortingObject.
Sort a specific row or column using the sortValues() API call:
pivot.sortValues(
"columns",
"asc",
["category.[bikes]", "color.[red]"],
{"uniqueName": "Price"}
);
In the flat table, you can sort a column via UI, in the report, or using API calls. It is also possible to sort multiple columns at once.
In the flat form, the sorting arrows appear when hovering over field headers. Click the first time to sort in ascending order, the second time for descending, and the third time to remove sorting.
To sort multiple columns at once, press and hold Ctrl (Command on macOS) and click a sorting arrow on each column you want to sort.
Check out our video tutorial to see how it works.
Preset sorting in the report using the slice.flatSort property:
slice: {
flatSort: [
{
uniqueName: "Category",
sort: "desc",
},
{
uniqueName: "Price",
sort: "asc",
},
],
// Other slice configs
}
Note When sorting multiple columns, the columns are sorted in the order they were specified (i.e., the first column is sorted first, and so on).
Sort column using the setFlatSort() API call:
let sort = [
{
uniqueName: "Category",
sort: "desc"
},
{
uniqueName: "Price",
sort: "asc"
}
];
pivot.setFlatSort(sort);
Note When sorting multiple columns, the columns are sorted in the order they were specified.
In Flexmonster, it is possible to override the default ascending order to set the custom order for field members. For example, you can make sure that some members are always kept at the end or at the start of the list.
Custom ascending order can be set using the sortingMethod() API call or the sortOrder property in the slice (works only for JSON and CSV).
You can set the custom ascending order for the field members using the sortOrder property from the slice. This feature is supported for JSON and CSV data source types.
For example, we specified a slice with the "Category" field in a row. This field has the following members: "Accessories", "Bikes", "Clothing", "Components", and "Cars". Let’s override their default sorting order using the sortOrder property:
slice: {
rows: [
{
uniqueName: "Category",
sortOrder: [
"Bikes",
"Cars",
"Clothing",
"Accessories",
"Components",
],
},
],
// Other slice configs
}
As a result, field members will be displayed in the specified order when sorted in ascending order. If the descending sorting is applied, the members’ order will be the opposite to the one defined in the sortOrder property:
If you remove sorting in both ascending and descending order, field members will be displayed in the order they came from the data source.
The custom ascending sort order can be set using the sortingMethod() API call.
In the example below, members that begin with a specific letter (e.g., "F") are put first, while all other members remain in alphabetical order:
const letterToPutFirst = "F";
pivot.sortingMethod("Contact Last Name", function(a, b) {
if (a.at(0) == letterToPutFirst && b.at(0) == letterToPutFirst)
return a > b ? 1 : -1;
if (a.at(0) == letterToPutFirst)
return -1;
if (b.at(0) == letterToPutFirst)
return 1;
return a > b ? 1 : -1;
});
The result will look similar to the following:
If you remove sorting, field members will be displayed in the order they came from the data source.
For SSAS, ascending order is the order defined inside the cube, and descending order is the reverse order from the cube. You can override the ascending order using the sortingMethod() API call.
You can sort the Field List items using the sortFieldList() API call.
In the example below, we sort the Field List items in the reverse alphabetical order:
pivot.sortFieldsList(function(firstItem, secondItem, viewType) {
return secondItem.caption.localeCompare(firstItem.caption);
});
You can also define sortFieldsList as an initialization parameter:
let pivot = new Flexmonster({
container: "pivot-container",
componentFolder: "https://cdn.flexmonster.com/",
report: {
dataSource: {
filename: "data/data.csv"
},
},
sortFieldsList: function(firstItem, secondItem, viewType) {
return secondItem.caption.localeCompare(firstItem.caption);
}
});
You can specify where the sorting arrows are visible using the sorting option. Possible values:
"rows")."columns")."on" or true)."off" or false).For example:
report: {
dataSource: {
filename: "data/data.csv",
},
options: {
sorting: "columns"
},
}