This plugin sorts the view by columns (but does not sort the data source!). To enable the plugin, set the
Options#columnSorting property to the correct value (see the examples below).
Example
// as boolean
columnSorting: true
// as an object with initial sort config (sort ascending for column at index 1)
columnSorting: {
initialConfig: {
column: 1,
sortOrder: 'asc'
}
}
// as an object which define specific sorting options for all columns
columnSorting: {
sortEmptyCells: true, // true = the table sorts empty cells, false = the table moves all empty cells to the end of the table (by default)
indicator: true, // true = shows indicator for all columns (by default), false = don't show indicator for columns
headerAction: true, // true = allow to click on the headers to sort (by default), false = turn off possibility to click on the headers to sort
compareFunctionFactory: function(sortOrder, columnMeta) {
return function(value, nextValue) {
// Some value comparisons which will return -1, 0 or 1...
}
}
}
// as an object passed to the `column` property, allows specifying a custom options for the desired column.
// please take a look at documentation of `column` property: pro/Options.html#columns
columns: [{
columnSorting: {
indicator: false, // disable indicator for the first column,
sortEmptyCells: true,
headerAction: false, // clicks on the first column won't sort
compareFunctionFactory: function(sortOrder, columnMeta) {
return function(value, nextValue) {
return 0; // Custom compare function for the first column (don't sort)
}
}
}
}]```
Methods
-
clearSort()
-
Clear the sort performed on the table.
-
destroy()
-
Destroys the plugin instance.
-
disablePlugin()
-
Disables the plugin functionality for this Handsontable instance.
-
enablePlugin()
-
Enables the plugin functionality for this Handsontable instance.
-
getSortConfig(column){undefined|Object|Array}
-
Get sort configuration for particular column or for all sorted columns. Objects contain
columnandsortOrderproperties.Note: Please keep in mind that returned objects expose visual column index under the
columnkey. They are handled by thesortfunction.Parameters:
Name Type Description columnNumber optional Visual column index.
Returns: {undefined|Object|Array}
-
isEnabled(){Boolean}
-
Checks if the plugin is enabled in the Handsontable settings. This method is executed in
Hooks#beforeInit
hook and if it returnstruethan theColumnSorting#enablePluginmethod is called.Returns: {Boolean}
-
isSorted(){Boolean}
-
Checks if the table is sorted (any column have to be sorted).
Returns: {Boolean}
-
setSortConfig(sortConfig)
-
Warn: Useful mainly for providing server side sort implementation (see in the example below). It doesn't sort the data set. It just sets sort configuration for all sorted columns.
Parameters:
Name Type Description sortConfigundefined | Object | Array Single column sort configuration or full sort configuration (for all sorted columns).
The configuration object containscolumnandsortOrderproperties. First of them contains visual column index, the second one contains
sort order (ascfor ascending,descfor descending).Example
beforeColumnSort: function(currentSortConfig, destinationSortConfigs) { const columnSortPlugin = this.getPlugin('columnSorting'); columnSortPlugin.setSortConfig(destinationSortConfigs); // const newData = ... // Calculated data set, ie. from an AJAX call. // this.loadData(newData); // Load new data set. return false; // The blockade for the default sort action. }``` -
sort(sortConfig)
-
Sorts the table by chosen columns and orders.
Parameters:
Name Type Description sortConfigundefined | Object Single column sort configuration. The configuration object contains
columnandsortOrderproperties.
First of them contains visual column index, the second one contains sort order (ascfor ascending,descfor descending).Note: Please keep in mind that every call of
sortfunction set an entirely new sort order. Previous sort configs aren't preserved.Fires:
Example
// sort ascending first visual column hot.getPlugin('columnSorting').sort({ column: 0, sortOrder: 'asc' });