Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Multi-column sorting #101

merged 91 commits into from Sep 26, 2018


None yet
4 participants
Copy link

commented Aug 3, 2018


Introducing the new PRO plugin.


  • New sorting order arrows were introduced, numbers by the arrows indicates sort sequence.

screen shot 2018-09-20 at 11 50 13

Note: We know that Firefox may show numbers lower than Chrome. It's related to the position of span inside header.

  • Sort indicator is shown by default when plugin is enabled and column is sorted (no extra option needed).
  • Click with cmd key (macOS) or ctrl key (other platforms) allow to sort multiple columns.
  • Sorting by click may be disabled by headerAction option inside configuration of the plugin (multiColumnSorting key).
  • The non-contiguous selection on headers is blocked when user click on the sorting arrow.
  • Column header which may display indicator (by default, option indicator is set to true) reserves extra space for purpose of showing it (header is wider). It should also work properly when using disablePlugin, enablePlugin, updateSettings methods.
  • span DOM element inside column header is inline-block from now with line-height set to 1.1.

API & engine

  • Plugin settings
    • initialConfig (Object), which determines the initial sort status for some columns; it contains the following keys:
      • column (Number), which determines the visual index of the sorted column
      • sortOrder (String), which determines the order that the column will be sorted in (possible values: 'asc' and 'desc')
    • indicator (Boolean), which defines whether thesorting order indicator is displayed (an arrow icon in the column header specifying the sorting order),
    • sortEmptyCells (Boolean), which defines whether empty cells should take part in the sorting process,
    • headerAction (Boolean), which defines whether clicking the header should sort the table,
    • compareFunctionFactory (Function), which defines the compare function factory.

For example:

multiColumnSorting: {
  initialConfig: [[{
    column: 1, sortOrder: 'asc'
  }, {
    column: 0, sortOrder: 'desc'
  indicator: false,
  sortEmptyCells: true,,
  headerAction: false
  compareFunctionFactory: function() {
    return function() {
      // Some value comparisons which will return -1, 0 or 1...
  • We can declare some options for particular columns by columns option, but please keep in mind that it was delivered by workaround (cellMeta inheriance isn't full yet). For example:
columns(visualColumn) {
  if (visualColumn === 1) {
    return {
      multiColumnSorting: {
        compareFunctionFactory(sortOrder, columnMeta) {
          return function(value, nextValue) {
            // Some value comparisons which will return -1, 0 or 1...

  return {};
  • Comparators
function numericSort(sortOrder, columnMeta) {
  return function (value, nextValue) {
  • Plubic API methods:
    • sort
    • getSortConfig
    • setSortConfigs
    • clearSort
  • The sort method it's pure function, so every call of sort function set an entirely new sort order. Previous sort configs aren't preserved. Example of calls are shown below:
hot.getPlugin('multiColumnSorting').sort({ column: 0, sortOrder: 'asc' });

// sort first two visual column in the defined sequence
  column: 1, sortOrder: 'asc'
}, {
  column: 0, sortOrder: 'desc'
  • Some validations of config handled by sort method were implemented. As the result, a warn will be fired when passed config wasn't proper.
  • Hooks beforeColumnSort and afterColumnSort gets as arguments current sort config, destination sort config and flag if sort is possible (it has been developed similar to the handsontable/handsontable#5068 - passing all useful information)
  • The updateSettings with defined multiColumnSort set completly new sort settings (nothing is preserved).

How has this been tested?

Manual tests of API and work of the PersistantState plugin.

Types of changes

  • Bug fix (non-breaking change which fixes an issue)
  • New feature or improvement (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)

Related issue(s):

  1. #94
  2. handsontable/handsontable#5282


  • My code follows the code style of this project,
  • My change requires a change to the documentation.

wszymanski added some commits Jul 17, 2018

Refactor & extra tests & `getColumnSettings` workaround for purpose o…
…f getting `headerAction` from the column settings #94

wszymanski added some commits Sep 17, 2018


This comment has been minimized.

Copy link
Member Author

commented Sep 18, 2018

Extra fix for rendering too wide header when colHeaders is set to false: handsontable/handsontable@953c624. Related to this part of the code.

Use case found by @swistach.

sep-17-2018 12-34-55


This comment has been minimized.

Copy link
Member Author

commented Sep 19, 2018

New setSortConfigs method was implemented.


This comment has been minimized.

Copy link
Member Author

commented Sep 19, 2018

Extra warn about sort config validation was added.

wszymanski added some commits Sep 20, 2018


budnix approved these changes Sep 26, 2018

@wszymanski wszymanski merged commit 7f3d5c4 into develop Sep 26, 2018

3 of 4 checks passed

continuous-integration/codeship Build in progress
continuous-integration/travis-ci/pr The Travis CI build passed
continuous-integration/travis-ci/push The Travis CI build passed
security/snyk - package.json (budnix) No new issues

@wszymanski wszymanski added this to the October 2018 milestone Sep 26, 2018

@wszymanski wszymanski deleted the feature/issue-94 branch Oct 16, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.