How to trigger sort on clicking the column header?

Hello,
 
Thank you for reaching out.
 
We suggest checking out the JSFiddle we have prepared to demonstrate the recommended approach.
 
More information about this approach can be found below:
 
First, disable the default filtering controls to avoid opening the filter after a click on the header. It is achievable using the grid.showFilter property of the Options Object:

options: {
  grid: {
    showFilter: false
  }
}

 
Next, use the customizeCell API call to replace default sorting controls with custom ones:

flexmonster.customizeCell((cell, data) => {
  if (data.type == "header") {
    cell.text = `${data.hierarchy.caption} (${getFlatSortType(data.hierarchy.uniqueName)})`;
  }
});

function getFlatSortType(uniqueName) { //use this function to retrieve the sorting type of the field
  let flatSort = flexmonster.getFlatSort();
  flatSort = flatSort.filter(item => item.uniqueName == uniqueName);
  return flatSort.length > 0 ? flatSort[0].sort : "unsorted";
}

 
Finally, subscribe to the celldoubleclick event and perform sorting after it is triggered:

flexmonster.on("celldoubleclick", (cell) => {
  if (cell.type == "header") { //check if the clicked cell is header
    let currSortType = getFlatSortType(cell.hierarchy.uniqueName); //get current sorting type
    let sortTypeToSet; //declare new sorting type
    switch (currSortType) { //initialize new sorting type based on the current sorting
      case "unsorted":
        sortTypeToSet = "asc";
        break;
      case "asc":
        sortTypeToSet = "desc";
        break;
      case "desc":
        sortTypeToSet = "unsorted";
        break;
    }
    flexmonster.setFlatSort([{ //apply resulting sorting type to the corresponding field using the setFlatSort method
      uniqueName: cell.hierarchy.uniqueName,
      sort: sortTypeToSet
    }]);
  }
});

Please note that the celldoubleclick event is a temporary workaround. It is because of a known issue with a cellclick event, which is currently not triggered after clicking on header cells. We will notify you as soon as this issue is fixed so that you could use the cellclick event instead.
 
Please let us know if it works for you.
Feel free to reach out in case any further questions arise.
 
Best regards,
Illia

Hello,
 
We are glad to inform you that the issue with dispatching celldoubleclick instead of cellclick after a single click on flat table headers was fixed.
 
You are welcome to update the component: https://www.flexmonster.com/doc/updating-to-the-latest-version/.
 
Please let us know if everything works.
 
Best regards,
Illia