AG-GRID: Sort the Current Page Rows in Infinite Row Model

Question

I am new to ag-grid and JS and I am trying to create a Server Side Paginated View of my data.

These are the Test settings I am currently using. They are working fine.

datasource: updateDataSource(),
rowModelType: 'infinite',
cacheBlockSize: 5,
rowBuffer: 0,
paginationPageSize: 5,
cacheOverflowSize: 2,
maxConcurrentDatasourceRequests: 1,
maxBlocksInCache: 5,
infiniteInitialRowCount: 5,
pagination: true,
paginationAutoPageSize: false

But now I want to implement sort functionality. Through the documentation I found we can pass the sortModel to the Server and get the sorted data, but I don't want to sort the data on the Server Side. Is there any way to write a sorting logic for every column on the Client Side itself ?

My getRows Method,

getRows: (params) => {
          currentPage = corporateActionGridOpts.api.paginationGetCurrentPage();
          let sortModel = params.sortModel[0];
          data = fetchData(currentPage);
          data.then((res) => {
            let totalRows = res.headers["x-total-count"];
            if(sortModel) {
              res = sortData(res, sortModel)
            }
            params.successCallback(res, totalRows);
          })
        }
      };

Currently I am using this logic to sort the columns on the Client Side,

function sortData(data, sortModel) {
      let comparator;
      switch(sortModel.colId) {
        case 'id':
          switch(sortModel.sort) {
            case 'asc':
              comparator = function compare(a, b) {
                if ( a.id < b.id ){
                  return -1;
                }
                if ( a.id > b.id ){
                  return 1;
                }
                return 0;
              }
              break;
            case 'desc':
              comparator = function compare(a, b) {
                if ( a.id > b.id ){
                  return -1;
                }
                if ( a.id < b.id ){
                  return 1;
                }
                return 0;
              }
              break;
          }
          break;
      }

      data.sort(comparator);
      return data;
    }

But writing this for all the columns is too much code. Is there any better way to do this ? I have about 15 columns total.

Answer 1

I do not have your example in an online code editor but I will try to do my best.

Please convert your sortData method into this form and tell me what you've got there

function sortData(data, sortModel) {
  let comparator;
  const resultOfSort = data.slice();
  resultOfSort.sort(function (a, b) {
    for (let k = 0; k < sortModel.length; k++) {
      const sortColModel = sortModel[k];
      const valueA = a[sortColModel.colId];
      const valueB = b[sortColModel.colId];

      if (valueA == valueB) {
        continue;
      }
      const sortDirection = sortColModel.sort === 'asc' ? 1 : -1;
      if (valueA > valueB) {
        return sortDirection;
      } else {
        return sortDirection * -1;
      }
    }
    return 0;
  });
  return resultOfSort;
}

This is a generic sorting algorithm taken from this example: https://plnkr.co/edit/XyO5FRfajGtq3H7z?preview