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
});
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; };
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!
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.
