Perfecting Flexmonster’s Sorting Functionality

We're continuing our series of articles on core pivot table features. Last time, we covered filtering. You can revisit that topic here: Mastering Filtering in Flexmonster Pivot. Now, we can move on to sorting. 

Have you already tried using Flexmonster from the previous article? If so, you should already know that it's a powerful yet simple web tool that is handy in visualizing big datasets. Flexmonster helps you turn your data into clear, interactive reports. And of course, it offers sorting functionality to help you prioritize information with one click.

In this article, you’ll learn how to perform sorting members and values in the classic form, the compact form, and the chart view of Flexmonster. As summer vacation continues, we will illustrate the sorting using a Tourism Dataset. We also chose this dataset because it’s the perfect way to show not only how sorting works, but also how it can be used. Let's check together how to find the most popular destinations and understand what makes them stand out.

Flexmonster supports two ways to sort data: by values and by members. Sorting helps structure data, highlight key points, and speed up analysis. You can sort through the UI, in the report object, or using our API. Sorting by members works in both pivot table and chart views, while sorting by values is available only in the grid view. The flat layout also lets you sort multiple columns at once.

In this example, we’ll work with a simple data slice to sort countries by the number of visitors in specific categories.

How to Sort Values in Flexmonster Pivot Table

How to Sort Values via UI

Sorting values via UI can help you quickly identify top-performing countries. For instance, you can sort destinations by rating or compare them with categories in different countries. You can arrange data in ascending or descending order via UI. Thus, making it straightforward to highlight key insights without writing any code.

In Flexmonster, you can sort both rows and columns in ascending or descending order. To achieve this via UI, tap on the tiny arrow on the cell:

To clear sorting, use the context menu, which opens when you right-click on the cell. 

How to Sort Values in the Report

As mentioned in the previous paragraph, the easiest way to sort values in the report is to configure it via the UI. Then, save the report in JSON format to the local file system, a remote server, or a ReportObject. 

Please, find a more detailed guide on how to save the report in our docs. 

Your report now includes the sorting configurations within the slice.sorting property. You can modify these configurations programmatically by specifying SortingObject, which defines the sorting for values in a specific row and/or column in the pivot table.

How to Sort Values Using API Call

The last way to sort values is by using sortValues() API call. You can use it to predefine sorting options in the code.

pivot.sortValues(
  "columns",
  "asc",
  ["category.[urban]”],
  {"uniqueName": "Country"}
);

To sort in the flat form, use setFlatSort() method.

How to Sort Members in Flexmonster Pivot Table & Charts

​In Flexmonster, sorting members lets you arrange field items like countries or categories in ascending, descending, or unsorted order. 

Please note that by default, members are sorted ascendingly based on their data type (text, numbers, dates). You can use the options.defaultHierarchySortName property to change this default behavior. Learn more about how to do this via Flexmonster docs.

How to Sort Members Via UI

To sort members via UI, you first need to open the filter view. Then, 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.

Suppose you’re looking for a place to visit. This dataset includes fields like Country and Rating. To compare countries, you might want to sort the Country field alphabetically in the pivot table or chart. This helps you quickly locate specific countries in a long list and then go through the numbers. 

Another example based on our dataset: suppose you're looking for a specific way to spend time on your trip: either to see the city or to have time by the beach. Or maybe you’re the museum person. You can sort the Category field alphabetically to group similar categories.

By the way, you can rearrange records using a custom sorting order to reflect your priorities. This will come in handy when visualizing data in chart form.

slice: {
  rows: [
    {
      uniqueName: "Category",
      sortOrder: [
        "Beach",
        "Urban",
        "Historical",
      ],
    },
  ],
  // Other slice configs
}

How to Sort Members in the Report

To sort members in the report, you need to define the sorting type by setting the sort property while configuring the slice. It’s also a great way to set the predefined sorting options.

slice: {
  rows: [
    {
      uniqueName: "Category",
      sort: "asc",
    },
  ],
  // Other slice configs
}

 How to Sort Members via API Call

You can set the sorting type using the setSort() API call: pivot.setSort("Category", "desc");. To see the current sorting, use getSort().

To get a better understanding of how this works, check our live example on js.fiddle.net

How to Perform Sorting in the Flat Form of Flexmonster 

Since sorting in the flat table looks slightly different from other forms, we decided to separate it in the Flexmonster documentation and this article. 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. 

Let’s start with sorting via UI. In the flat form, you can find the sorting arrows 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.

Moving to the sorting in the flat form with the report: you can preset the sorting in the report using the slice.flatSort property:

slice: {
  flatSort: [
    {
      uniqueName: "Category",
      sort: "desc",
    },
    {
      uniqueName: "Price",
      sort: "asc",
    },
  ],
  // Other slice configs
}

The last example is sorting columns using the setFlatSort() API call. 

let sort = [
  {
    uniqueName: "Category",
    sort: "desc"
  },
  {
    uniqueName: "Price",
    sort: "asc"
  }
];

pivot.setFlatSort(sort);

Note that multiple columns are sorted in the specified order when sorting.

Can I manage the visibility of the sorting controls?

As Flexmonster is highly customizable, you can configure not only how to view the report via sorting, but also change the visual representation of the table itself. So, to manage the visibility of the sorting controls, use the sorting option. Also, check this live example to see how it can be used.

Sorting may not seem like a big deal, but it has a significant impact on the process. Whether you're exploring seasonal tourism patterns like us or working on your business data, Flexmonster allows you to organize your data just how you need it.

Do not miss this video tutorial on how to use the sorting feature in Flexmonster Pivot Table component on our YouTube channel.