Exclude Pinned Rows While Sorting in React

Background:

The standard sort functionality of FlexGrid when clicking on the column header sorts the entire grid. Sometimes a user wants particular rows to not get sorted and remain pinned or frozen to the top.

Steps to Complete:

1. Use a custom sort converter function for the grid

2. Ensure that a unique identifier is present in the dataItem of the pinned rows

Getting Started:

Use a custom sort converter function for the grid

A way you can accomplish pinning or freezing rows is by using a custom sort converter function for the grid. This keeps the pinned rows untouched while sorting. You need to make sure that a unique identifier (i.e. a property in the dataItem with a unique value) is present in the dataItem of the frozen rows. This is used to target the pinned rows dataItems in the custom sortConverter function.

 function customSortConverter(sd, item, value) {
 ...
 }

function initGrid(grid) {
    grid.collectionView.sortConverter = customSortConverter;

    // if you don't have any unique identifier on items, then you can add them inside the initialized event or loaded rows event
    // grid.collectionView.sourceCollection[0]['id'] = 'some unique id';
 }

Ensure that a unique identifier is present in the dataItem of the frozen rows

You need a unique identifier to target the items that should not be sorted. This example uses the "id" prop value of the item for this purpose:

 function customSortConverter(sd, item, value) {

    // for ex: if(item.country == 'US') etc.
    if (item['id'] < frozenRowCount) {
      return sd.ascending ? -Infinity : Infinity;
    }
    return value; // return default value
 }

If done correctly, the items you determine to be pinned will not be changed when you filter. A sample app showcasing this code can be found here.

Happy coding!