CODEWITHSUNDEEP
javascripthandsontable
Rohit Nigam
Rohit Nigam

Reputation: 708

Handsontable's columnSorting is sorting fixed rows also

I am using Handsontable for populating my DB data.

I have used 3 fixed rows, but when I click on column header for sorting, it sort complete data along with fixed rows.

I want it should sort by leaving fixed rows.

Here is jsFiddle

Here is my code:

hot = new Handsontable(container, {
    data: data,
    minSpareRows: 1,
    colHeaders: true,
    fixedRowsTop: 3,
    columnSorting: true,
    contextMenu: true
  });

Upvotes: 2

Views: 4050

Answers (3)

Ludwig Magnusson
Ludwig Magnusson

Reputation: 14399

If you want to keep columns fixed when sorting handsontable, implement your own sort comparator that will always keep the top rows first. From version 0.24, you can add the property sortFunction to each column. In previous versions, you can sort the data array manually with this comparator function. Here is the function that I created to always keep the top row fixed, this is used in the sortFunction from the link above. Check that link to see information about the input parameters. You will need to modify it if you want more rows fixed

function comparatorFactory (compareFn) {
  return function (sortOrder) {
    return function (a, b) {
      var aRow = a[0]
      var bRow = b[0]
      var aValue = a[1]
      var bValue = b[1]
      var modifier = sortOrder === false ? -1 : 1
      if (aRow === 0) {
        return -1 // Make sure first row stays first
      } else if (bRow === 0) {
        return 1 // Make sure first row stays first
      } else if (aValue == null) {
        // Make sure empty rows are always last (my preference)
        return bValue == null ? 0 : 1
      } else if (bValue == null) {
        // Make sure empty rows are always last (my preference)
        return aValue == null ? 0 : -1
      } else {
        // Compare two actual values using the compare function
        return modifier * compareFn(aValue, bValue)
      }
    }
  }
}

Call this factory with a function that compares the values in your column, like a number comparator, string comparator or whatever kind of data you have and it will keep the top row fixed.

Upvotes: 0

mzoabi
mzoabi

Reputation: 369

I did solve it by changing the handsontable.full.js "this.sort" function

I have 1 fixed row, so before start sorting I spliced the first row and saved it in variable.

I let the original sort to run and sort my data , then before return from sort function I did add the saved first row to my data array

My Solution : 

// handsontable.full.js -- built in sort function

this.sort = function () {
var instance = this;

if (typeof instance.sortOrder == 'undefined') {
  return;
}

instance.sortingEnabled = false; //this is required by translateRow plugin hook
instance.sortIndex.length = 0;

var colOffset = this.colOffset();
for (var i = 0, ilen = this.countRows() - instance.getSettings()['minSpareRows']; i < ilen; i++) {
  this.sortIndex.push([i, instance.getDataAtCell(i, this.sortColumn + colOffset)]);
}

// Custom Sorting - Saving First Row
var firstRow = this.sortIndex[0];

// Remove first Row from data
this.sortIndex.shift();
/////// Original Sort Begin/////////
var colMeta = instance.getCellMeta(0, instance.sortColumn);
var sortFunction;
switch (colMeta.type) {
  case 'date':
    sortFunction = dateSort;
    break;
  default:
    sortFunction = defaultSort;
}

this.sortIndex.sort(sortFunction(instance.sortOrder));
////// Original Sort END /////////


// Custom Sorting - Adding the fixed row to the TOP
this.sortIndex.unshift(firstRow);


//Append spareRows
for(var i = this.sortIndex.length; i < instance.countRows(); i++){
  this.sortIndex.push([i, instance.getDataAtCell(i, this.sortColumn + colOffset)]);
}

instance.sortingEnabled = true;   };

Upvotes: 2

ZekeDroid
ZekeDroid

Reputation: 7209

Unfortunately, the included sorting that comes with HOT does not allow that sort of behavior, simply because it sorts the data array and the freezing of rows is just for aesthetics.

The solution is implementing your own sorting on your data. I had the same task and solved it by adding an onclick event to the column headers and have that function do a selective sorting.

In your case, that function could ask for the property from your HOT instance that gives you the consecutive rows which are frozen, then sort your data manually by ignoring the first x frozen rows. One way to implement this is by splicing the sub-array with the non-frozen rows from the large array, sorting, then combining the two arrays.

Hope this helps!

Upvotes: 0

Related Questions