Rows sorting

Sort rows alphabetically or numerically, in ascending, descending, or a custom order, by one or multiple columns.

Overview

Handsontable provides two plugins for sorting rows:

ColumnSorting — sorts rows by a single column at a time. Clicking a column header cycles through ascending, descending, and unsorted states.
MultiColumnSorting — sorts rows by multiple columns simultaneously. Hold Ctrl/Cmd and click column headers to add more sort criteria.

Both plugins sort the view only. The source data array is never modified. To persist the sorted order back to the data source, see Saving data.

ColumnSorting and MultiColumnSorting are mutually exclusive. Enable only one at a time. If both options are set to true, ColumnSorting is automatically disabled.

Sorting demo

Click a column header to sort in ascending (↑) or descending (↓) order. Click again to return to the original order.

1
// to import sorting as an individual module, see the 'Import the sorting module' section of this page
2
import Handsontable from 'handsontable/base';
3
import { registerAllModules } from 'handsontable/registry';
4

5
// Register all Handsontable's modules.
6
registerAllModules();
7

8
const container = document.querySelector('#exampleSortingDemo');
9

10
new Handsontable(container, {
11
  data: [
12
    {
13
      brand: 'Jetpulse',
14
      model: 'Racing Socks',
15
      price: 30,
16
      sellDate: '2023-10-11',
17
      sellTime: '01:23',
18
      inStock: false,
19
    },
20
    {
21
      brand: 'Gigabox',
22
      model: 'HL Mountain Frame',
23
      price: 1890.9,
24
      sellDate: '2023-05-03',
25
      sellTime: '11:27',
26
      inStock: false,
27
    },
28
    {
29
      brand: 'Camido',
30
      model: 'Cycling Cap',
31
      price: 130.1,
32
      sellDate: '2023-03-27',
33
      sellTime: '03:17',
34
      inStock: true,
35
    },
36
    {
37
      brand: 'Chatterpoint',
38
      model: 'Road Tire Tube',
39
      price: 59,
40
      sellDate: '2023-08-28',
41
      sellTime: '08:01',
42
      inStock: true,
43
    },
44
    {
45
      brand: 'Eidel',
46
      model: 'HL Road Tire',
47
      price: 279.99,
48
      sellDate: '2023-10-02',
49
      sellTime: '13:23',
50
      inStock: true,
51
    },
52
  ],
53
  columns: [
54
    {
55
      title: 'Brand',
56
      type: 'text',
57
      data: 'brand',
58
    },
59
    {
60
      title: 'Model',
61
      type: 'text',
62
      data: 'model',
63
    },
64
    {
65
      title: 'Price',
66
      type: 'numeric',
67
      data: 'price',
68
      locale: 'en-US',
69
      numericFormat: {
70
        style: 'currency',
71
        currency: 'USD',
72
        minimumFractionDigits: 2,
73
      },
74
    },
75
    {
76
      title: 'Date',
77
      type: 'intl-date',
78
      data: 'sellDate',
79
      locale: 'en-US',
80
      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
81
      className: 'htRight',
82
    },
83
    {
84
      title: 'Time',
85
      type: 'intl-time',
86
      data: 'sellTime',
87
      locale: 'en-US',
88
      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
89
      className: 'htRight',
90
    },
91
    {
92
      title: 'In stock',
93
      type: 'checkbox',
94
      data: 'inStock',
95
      className: 'htCenter',
96
    },
97
  ],
98
  // enable sorting for all columns
99
  columnSorting: true,
100
  height: 'auto',
101
  stretchH: 'all',
102
  autoWrapRow: true,
103
  autoWrapCol: true,
104
  licenseKey: 'non-commercial-and-evaluation',
105
});

1
// to import sorting as an individual module, see the 'Import the sorting module' section of this page
2
import Handsontable from 'handsontable/base';
3
import { registerAllModules } from 'handsontable/registry';
4

5
// Register all Handsontable's modules.
6
registerAllModules();
7

8
const container = document.querySelector('#exampleSortingDemo')!;
9

10
new Handsontable(container, {
11
  data: [
12
    {
13
      brand: 'Jetpulse',
14
      model: 'Racing Socks',
15
      price: 30,
16
      sellDate: '2023-10-11',
17
      sellTime: '01:23',
18
      inStock: false,
19
    },
20
    {
21
      brand: 'Gigabox',
22
      model: 'HL Mountain Frame',
23
      price: 1890.9,
24
      sellDate: '2023-05-03',
25
      sellTime: '11:27',
26
      inStock: false,
27
    },
28
    {
29
      brand: 'Camido',
30
      model: 'Cycling Cap',
31
      price: 130.1,
32
      sellDate: '2023-03-27',
33
      sellTime: '03:17',
34
      inStock: true,
35
    },
36
    {
37
      brand: 'Chatterpoint',
38
      model: 'Road Tire Tube',
39
      price: 59,
40
      sellDate: '2023-08-28',
41
      sellTime: '08:01',
42
      inStock: true,
43
    },
44
    {
45
      brand: 'Eidel',
46
      model: 'HL Road Tire',
47
      price: 279.99,
48
      sellDate: '2023-10-02',
49
      sellTime: '13:23',
50
      inStock: true,
51
    },
52
  ],
53
  columns: [
54
    {
55
      title: 'Brand',
56
      type: 'text',
57
      data: 'brand',
58
    },
59
    {
60
      title: 'Model',
61
      type: 'text',
62
      data: 'model',
63
    },
64
    {
65
      title: 'Price',
66
      type: 'numeric',
67
      data: 'price',
68
      locale: 'en-US',
69
      numericFormat: {
70
        style: 'currency',
71
        currency: 'USD',
72
        minimumFractionDigits: 2,
73
      },
74
    },
75
    {
76
      title: 'Date',
77
      type: 'intl-date',
78
      data: 'sellDate',
79
      locale: 'en-US',
80
      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
81
      className: 'htRight',
82
    },
83
    {
84
      title: 'Time',
85
      type: 'intl-time',
86
      data: 'sellTime',
87
      locale: 'en-US',
88
      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
89
      className: 'htRight',
90
    },
91
    {
92
      title: 'In stock',
93
      type: 'checkbox',
94
      data: 'inStock',
95
      className: 'htCenter',
96
    },
97
  ],
98
  // enable sorting for all columns
99
  columnSorting: true,
100
  height: 'auto',
101
  stretchH: 'all',
102
  autoWrapRow: true,
103
  autoWrapCol: true,
104
  licenseKey: 'non-commercial-and-evaluation',
105
});

1
<div id="exampleSortingDemo"></div>

Enable sorting

To enable sorting for all columns, set columnSorting to true.

1
const configurationOptions = {
2
  columnSorting: true,
3
};

To disable sorting for specific columns, set headerAction to false in the per-column configuration. In the following example, only the Model, Date, and In stock columns are sortable.

1
import Handsontable from 'handsontable/base';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// Register all Handsontable's modules.
5
registerAllModules();
6

7
const container = document.querySelector('#exampleEnableSortingForColumns');
8

9
new Handsontable(container, {
10
  data: [
11
    {
12
      brand: 'Jetpulse',
13
      model: 'Racing Socks',
14
      price: 30,
15
      sellDate: '2023-10-11',
16
      sellTime: '01:23',
17
      inStock: false,
18
    },
19
    {
20
      brand: 'Gigabox',
21
      model: 'HL Mountain Frame',
22
      price: 1890.9,
23
      sellDate: '2023-05-03',
24
      sellTime: '11:27',
25
      inStock: false,
26
    },
27
    {
28
      brand: 'Camido',
29
      model: 'Cycling Cap',
30
      price: 130.1,
31
      sellDate: '2023-03-27',
32
      sellTime: '03:17',
33
      inStock: true,
34
    },
35
    {
36
      brand: 'Chatterpoint',
37
      model: 'Road Tire Tube',
38
      price: 59,
39
      sellDate: '2023-08-28',
40
      sellTime: '08:01',
41
      inStock: true,
42
    },
43
    {
44
      brand: 'Eidel',
45
      model: 'HL Road Tire',
46
      price: 279.99,
47
      sellDate: '2023-10-02',
48
      sellTime: '13:23',
49
      inStock: true,
50
    },
51
  ],
52
  // enable sorting for all columns
53
  columnSorting: true,
54
  columns: [
55
    {
56
      title: 'Brand',
57
      type: 'text',
58
      data: 'brand',
59
      // disable sorting for the 'Brand' column
60
      columnSorting: {
61
        headerAction: false,
62
      },
63
    },
64
    {
65
      title: 'Model',
66
      type: 'text',
67
      data: 'model',
68
    },
69
    {
70
      title: 'Price',
71
      type: 'numeric',
72
      data: 'price',
73
      locale: 'en-US',
74
      numericFormat: {
75
        style: 'currency',
76
        currency: 'USD',
77
        minimumFractionDigits: 2,
78
      },
79
      // disable sorting for the 'Price' column
80
      columnSorting: {
81
        headerAction: false,
82
      },
83
    },
84
    {
85
      title: 'Date',
86
      type: 'intl-date',
87
      data: 'sellDate',
88
      locale: 'en-US',
89
      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
90
      className: 'htRight',
91
    },
92
    {
93
      title: 'Time',
94
      type: 'intl-time',
95
      data: 'sellTime',
96
      locale: 'en-US',
97
      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
98
      className: 'htRight',
99
      // disable sorting for the 'Time' column
100
      columnSorting: {
101
        headerAction: false,
102
      },
103
    },
104
    {
105
      title: 'In stock',
106
      type: 'checkbox',
107
      data: 'inStock',
108
      className: 'htCenter',
109
    },
110
  ],
111
  height: 'auto',
112
  stretchH: 'all',
113
  autoWrapRow: true,
114
  autoWrapCol: true,
115
  licenseKey: 'non-commercial-and-evaluation',
116
});

1
import Handsontable from 'handsontable/base';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// Register all Handsontable's modules.
5
registerAllModules();
6

7
const container = document.querySelector('#exampleEnableSortingForColumns')!;
8

9
new Handsontable(container, {
10
  data: [
11
    {
12
      brand: 'Jetpulse',
13
      model: 'Racing Socks',
14
      price: 30,
15
      sellDate: '2023-10-11',
16
      sellTime: '01:23',
17
      inStock: false,
18
    },
19
    {
20
      brand: 'Gigabox',
21
      model: 'HL Mountain Frame',
22
      price: 1890.9,
23
      sellDate: '2023-05-03',
24
      sellTime: '11:27',
25
      inStock: false,
26
    },
27
    {
28
      brand: 'Camido',
29
      model: 'Cycling Cap',
30
      price: 130.1,
31
      sellDate: '2023-03-27',
32
      sellTime: '03:17',
33
      inStock: true,
34
    },
35
    {
36
      brand: 'Chatterpoint',
37
      model: 'Road Tire Tube',
38
      price: 59,
39
      sellDate: '2023-08-28',
40
      sellTime: '08:01',
41
      inStock: true,
42
    },
43
    {
44
      brand: 'Eidel',
45
      model: 'HL Road Tire',
46
      price: 279.99,
47
      sellDate: '2023-10-02',
48
      sellTime: '13:23',
49
      inStock: true,
50
    },
51
  ],
52
  // enable sorting for all columns
53
  columnSorting: true,
54
  columns: [
55
    {
56
      title: 'Brand',
57
      type: 'text',
58
      data: 'brand',
59
      // disable sorting for the 'Brand' column
60
      columnSorting: {
61
        headerAction: false,
62
      },
63
    },
64
    {
65
      title: 'Model',
66
      type: 'text',
67
      data: 'model',
68
    },
69
    {
70
      title: 'Price',
71
      type: 'numeric',
72
      data: 'price',
73
      locale: 'en-US',
74
      numericFormat: {
75
        style: 'currency',
76
        currency: 'USD',
77
        minimumFractionDigits: 2,
78
      },
79
      // disable sorting for the 'Price' column
80
      columnSorting: {
81
        headerAction: false,
82
      },
83
    },
84
    {
85
      title: 'Date',
86
      type: 'intl-date',
87
      data: 'sellDate',
88
      locale: 'en-US',
89
      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
90
      className: 'htRight',
91
    },
92
    {
93
      title: 'Time',
94
      type: 'intl-time',
95
      data: 'sellTime',
96
      locale: 'en-US',
97
      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
98
      className: 'htRight',
99
      // disable sorting for the 'Time' column
100
      columnSorting: {
101
        headerAction: false,
102
      },
103
    },
104
    {
105
      title: 'In stock',
106
      type: 'checkbox',
107
      data: 'inStock',
108
      className: 'htCenter',
109
    },
110
  ],
111
  height: 'auto',
112
  stretchH: 'all',
113
  autoWrapRow: true,
114
  autoWrapCol: true,
115
  licenseKey: 'non-commercial-and-evaluation',
116
});

1
<div id="exampleEnableSortingForColumns"></div>

Configure sorting

Set columnSorting to an object to configure the plugin. The available options are:

Option	Type	Default	Description
`headerAction`	`boolean`	`true`	When `true`, clicking a column header sorts by that column.
`sortEmptyCells`	`boolean`	`false`	When `true`, empty cells participate in sorting. When `false`, empty cells are always placed at the end.
`indicator`	`boolean`	`true`	When `true`, a sort-order arrow icon is shown in the column header.
`compareFunctionFactory`	`function`	—	A factory that returns a custom comparator function. See Add a custom comparator.
`initialConfig`	`object`	—	Sort config applied at initialization. Contains `column` (visual index) and `sortOrder` (`'asc'` or `'desc'`).

1
const configurationOptions = {
2
  columnSorting: {
3
    // enable click-to-sort on column headers (default: true)
4
    headerAction: true,
5
    // place empty cells at the end (default: false)
6
    sortEmptyCells: false,
7
    // show sort-order arrow in the column header (default: true)
8
    indicator: true,
9
    // sort column 1 descending at initialization
10
    initialConfig: {
11
      column: 1,
12
      sortOrder: 'desc',
13
    },
14
    compareFunctionFactory(sortOrder, columnMeta) {
15
      return function(value, nextValue) {
16
        // return -1, 0, or 1
17
      };
18
    },
19
  },
20
};

You can also override columnSorting options per column, using the columns configuration:

1
const configurationOptions = {
2
  columnSorting: true,
3
  columns: [
4
    {
5
      columnSorting: {
6
        // no sort icon for the first column
7
        indicator: false,
8
        // disable click-to-sort for the first column
9
        headerAction: false,
10
      },
11
    },
12
  ],
13
};

Sort different types of data

Handsontable applies type-aware sorting automatically when you set the type option on a column. The supported cell types are:

text — sorted alphabetically (default)
numeric
date
time
checkbox
dropdown
autocomplete
password

You can also define a custom cell type. See Cell type.

1
import Handsontable from 'handsontable/base';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// Register all Handsontable's modules.
5
registerAllModules();
6

7
const container = document.querySelector('#exampleSortDifferentTypes');
8

9
new Handsontable(container, {
10
  data: [
11
    {
12
      model: 'Racing Socks',
13
      size: 'S',
14
      price: 30,
15
      sellDate: '2023-10-11',
16
      sellTime: '01:23',
17
      inStock: false,
18
      color: 'Black',
19
      email: '8576@all.xyz',
20
    },
21
    {
22
      model: 'HL Mountain Shirt',
23
      size: 'XS',
24
      price: 1890.9,
25
      sellDate: '2023-05-03',
26
      sellTime: '11:27',
27
      inStock: false,
28
      color: 'White',
29
      email: 'tayn@all.xyz',
30
    },
31
    {
32
      model: 'Cycling Cap',
33
      size: 'L',
34
      price: 130.1,
35
      sellDate: '2023-03-27',
36
      sellTime: '03:17',
37
      inStock: true,
38
      color: 'Green',
39
      email: '6lights@far.com',
40
    },
41
    {
42
      model: 'Ski Jacket',
43
      size: 'M',
44
      price: 59,
45
      sellDate: '2023-08-28',
46
      sellTime: '08:01',
47
      inStock: true,
48
      color: 'Blue',
49
      email: 'raj@fq1my2c.com',
50
    },
51
    {
52
      model: 'HL Goggles',
53
      size: 'XL',
54
      price: 279.99,
55
      sellDate: '2023-10-02',
56
      sellTime: '13:23',
57
      inStock: true,
58
      color: 'Black',
59
      email: 'da@pdc.ga',
60
    },
61
  ],
62
  columns: [
63
    {
64
      title: 'Model<br>(text)',
65
      // set the type of the 'Model' column
66
      type: 'text',
67
      data: 'model',
68
    },
69
    {
70
      title: 'Price<br>(numeric)',
71
      // set the type of the 'Price' column
72
      type: 'numeric',
73
      data: 'price',
74
      locale: 'en-US',
75
      numericFormat: {
76
        style: 'currency',
77
        currency: 'USD',
78
        minimumFractionDigits: 2,
79
      },
80
    },
81
    {
82
      title: 'Sold on<br>(date)',
83
      // set the type of the 'Date' column
84
      type: 'intl-date',
85
      data: 'sellDate',
86
      locale: 'en-US',
87
      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
88
      className: 'htRight',
89
    },
90
    {
91
      title: 'Time<br>(time)',
92
      // set the type of the 'Time' column
93
      type: 'intl-time',
94
      data: 'sellTime',
95
      locale: 'en-US',
96
      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
97
      className: 'htRight',
98
    },
99
    {
100
      title: 'In stock<br>(checkbox)',
101
      // set the type of the 'In stock' column
102
      type: 'checkbox',
103
      data: 'inStock',
104
      className: 'htCenter',
105
    },
106
    {
107
      title: 'Size<br>(dropdown)',
108
      // set the type of the 'Size' column
109
      type: 'dropdown',
110
      data: 'size',
111
      source: ['XS', 'S', 'M', 'L', 'XL'],
112
      className: 'htCenter',
113
    },
114
    {
115
      title: 'Color<br>(autocomplete)',
116
      // set the type of the 'Size' column
117
      type: 'autocomplete',
118
      data: 'color',
119
      source: ['White', 'Black', 'Yellow', 'Blue', 'Green'],
120
      className: 'htCenter',
121
    },
122
    {
123
      title: 'Email<br>(password)',
124
      // set the type of the 'Email' column
125
      type: 'password',
126
      data: 'email',
127
    },
128
  ],
129
  columnSorting: true,
130
  height: 'auto',
131
  stretchH: 'all',
132
  autoWrapRow: true,
133
  autoWrapCol: true,
134
  licenseKey: 'non-commercial-and-evaluation',
135
});

1
import Handsontable from 'handsontable/base';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// Register all Handsontable's modules.
5
registerAllModules();
6

7
const container = document.querySelector('#exampleSortDifferentTypes')!;
8

9
new Handsontable(container, {
10
  data: [
11
    {
12
      model: 'Racing Socks',
13
      size: 'S',
14
      price: 30,
15
      sellDate: '2023-10-11',
16
      sellTime: '01:23',
17
      inStock: false,
18
      color: 'Black',
19
      email: '8576@all.xyz',
20
    },
21
    {
22
      model: 'HL Mountain Shirt',
23
      size: 'XS',
24
      price: 1890.9,
25
      sellDate: '2023-05-03',
26
      sellTime: '11:27',
27
      inStock: false,
28
      color: 'White',
29
      email: 'tayn@all.xyz',
30
    },
31
    {
32
      model: 'Cycling Cap',
33
      size: 'L',
34
      price: 130.1,
35
      sellDate: '2023-03-27',
36
      sellTime: '03:17',
37
      inStock: true,
38
      color: 'Green',
39
      email: '6lights@far.com',
40
    },
41
    {
42
      model: 'Ski Jacket',
43
      size: 'M',
44
      price: 59,
45
      sellDate: '2023-08-28',
46
      sellTime: '08:01',
47
      inStock: true,
48
      color: 'Blue',
49
      email: 'raj@fq1my2c.com',
50
    },
51
    {
52
      model: 'HL Goggles',
53
      size: 'XL',
54
      price: 279.99,
55
      sellDate: '2023-10-02',
56
      sellTime: '13:23',
57
      inStock: true,
58
      color: 'Black',
59
      email: 'da@pdc.ga',
60
    },
61
  ],
62
  columns: [
63
    {
64
      title: 'Model<br>(text)',
65
      // set the type of the 'Model' column
66
      type: 'text', // 'text' is the default type, so you can omit this line
67
      data: 'model',
68
    },
69
    {
70
      title: 'Price<br>(numeric)',
71
      // set the type of the 'Price' column
72
      type: 'numeric',
73
      data: 'price',
74
      locale: 'en-US',
75
      numericFormat: {
76
        style: 'currency',
77
        currency: 'USD',
78
        minimumFractionDigits: 2,
79
      },
80
    },
81
    {
82
      title: 'Sold on<br>(date)',
83
      // set the type of the 'Date' column
84
      type: 'intl-date',
85
      data: 'sellDate',
86
      locale: 'en-US',
87
      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
88
      className: 'htRight',
89
    },
90
    {
91
      title: 'Time<br>(time)',
92
      // set the type of the 'Time' column
93
      type: 'intl-time',
94
      data: 'sellTime',
95
      locale: 'en-US',
96
      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
97
      className: 'htRight',
98
    },
99
    {
100
      title: 'In stock<br>(checkbox)',
101
      // set the type of the 'In stock' column
102
      type: 'checkbox',
103
      data: 'inStock',
104
      className: 'htCenter',
105
    },
106
    {
107
      title: 'Size<br>(dropdown)',
108
      // set the type of the 'Size' column
109
      type: 'dropdown',
110
      data: 'size',
111
      source: ['XS', 'S', 'M', 'L', 'XL'],
112
      className: 'htCenter',
113
    },
114
    {
115
      title: 'Color<br>(autocomplete)',
116
      // set the type of the 'Size' column
117
      type: 'autocomplete',
118
      data: 'color',
119
      source: ['White', 'Black', 'Yellow', 'Blue', 'Green'],
120
      className: 'htCenter',
121
    },
122
    {
123
      title: 'Email<br>(password)',
124
      // set the type of the 'Email' column
125
      type: 'password',
126
      data: 'email',
127
    },
128
  ],
129
  columnSorting: true,
130
  height: 'auto',
131
  stretchH: 'all',
132
  autoWrapRow: true,
133
  autoWrapCol: true,
134
  licenseKey: 'non-commercial-and-evaluation',
135
});

1
<div id="exampleSortDifferentTypes"></div>

Set an initial sort order

Use the initialConfig option to apply a sort order when Handsontable initializes. column is the visual column index. sortOrder is 'asc' for ascending or 'desc' for descending.

1
const configurationOptions = {
2
  columnSorting: {
3
    initialConfig: {
4
      column: 0,
5
      sortOrder: 'asc',
6
    },
7
  },
8
};

To set an initial sort order across multiple columns, use the MultiColumnSorting plugin with an array value for initialConfig. See Set an initial multi-column sort order.

Add a custom comparator

A comparator is a function that determines sort order based on two cell values. Use a custom comparator to implement sorting logic beyond Handsontable’s built-in defaults.

Common use cases:

Sort by value length, occurrence of a character, or any other custom criterion.
Exclude specific rows from sorting (for example, rows with a particular job title).

Use the compareFunctionFactory option to provide a comparator factory. The factory receives sortOrder ('asc' or 'desc') and columnMeta, and must return a comparator function. The comparator receives two cell values and must return -1, 0, or 1.

1
const configurationOptions = {
2
  columnSorting: {
3
    compareFunctionFactory: function(sortOrder, columnMeta) {
4
      return function(value, nextValue) {
5
        if (value < nextValue) return -1;
6
        if (value > nextValue) return 1;
7
        return 0;
8
      };
9
    },
10
  },
11
};

Use sorting hooks

Run code before or after sorting using the following Handsontable hooks:

beforeColumnSort — fires before sorting. Return false to cancel the sort and keep the current order.
afterColumnSort — fires after sorting completes.

A common use of beforeColumnSort is server-side sorting: cancel the client-side sort, send the sort configuration to a server, and reload the data. A common use of afterColumnSort is excluding specific rows from the sorted result.

1
const configurationOptions = {
2
  beforeColumnSort(currentSortConfig, destinationSortConfigs) {
3
    // add your code here
4
    return false; // return false to block front-end sorting
5
  },
6
  afterColumnSort(currentSortConfig, sortedSortConfigs) {
7
    // add your code here
8
  },
9
};

Exclude rows from sorting

You can prevent specific top or bottom rows from being sorted. This is useful when a frozen row at the top displays column labels, or a frozen row at the bottom displays column summaries — rows that should always stay in place regardless of the sort order.

1
import Handsontable from 'handsontable/base';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// Register all Handsontable's modules.
5
registerAllModules();
6

7
const container = document.querySelector('#exampleExcludeRowsFromSorting');
8
const hot = new Handsontable(container, {
9
  data: [
10
    {
11
      brand: 'Brand',
12
      model: 'Model',
13
      price: 'Price',
14
      sellDate: 'Date',
15
      sellTime: 'Time',
16
      inStock: 'In stock',
17
    },
18
    {
19
      brand: 'Gigabox',
20
      model: 'HL Mountain Frame',
21
      price: 1890.9,
22
      sellDate: '2023-05-03',
23
      sellTime: '11:27',
24
      inStock: 11,
25
    },
26
    {
27
      brand: 'Camido',
28
      model: 'Cycling Cap',
29
      price: 130.1,
30
      sellDate: '2023-03-27',
31
      sellTime: '03:17',
32
      inStock: 0,
33
    },
34
    {
35
      brand: 'Chatterpoint',
36
      model: 'Road Tire Tube',
37
      price: 59,
38
      sellDate: '2023-08-28',
39
      sellTime: '08:01',
40
      inStock: 1,
41
    },
42
    {
43
      brand: 'Eidel',
44
      model: 'HL Road Tire',
45
      price: 279.99,
46
      sellDate: '2023-10-02',
47
      sellTime: '13:23',
48
      inStock: 3,
49
    },
50
    {
51
      brand: 'Jetpulse',
52
      model: 'Racing Socks',
53
      price: 30,
54
      sellDate: '2023-10-11',
55
      sellTime: '01:23',
56
      inStock: 5,
57
    },
58
    {
59
      brand: 'Gigabox',
60
      model: 'HL Mountain Frame',
61
      price: 1890.9,
62
      sellDate: '2023-05-03',
63
      sellTime: '11:27',
64
      inStock: 22,
65
    },
66
    {
67
      brand: 'Camido',
68
      model: 'Cycling Cap',
69
      price: 130.1,
70
      sellDate: '2023-03-27',
71
      sellTime: '03:17',
72
      inStock: 13,
73
    },
74
    {
75
      brand: 'Chatterpoint',
76
      model: 'Road Tire Tube',
77
      price: 59,
78
      sellDate: '2023-08-28',
79
      sellTime: '08:01',
80
      inStock: 0,
81
    },
82
    {
83
      brand: 'Eidel',
84
      model: 'HL Road Tire',
85
      price: 279.99,
86
      sellDate: '2023-10-02',
87
      sellTime: '13:23',
88
      inStock: 14,
89
    },
90
    {
91
      brand: 'Jetpulse',
92
      model: 'Racing Socks',
93
      price: 30,
94
      sellDate: '2023-10-11',
95
      sellTime: '01:23',
96
      inStock: 16,
97
    },
98
    {
99
      brand: 'Gigabox',
100
      model: 'HL Mountain Frame',
101
      price: 1890.9,
102
      sellDate: '2023-05-03',
103
      sellTime: '11:27',
104
      inStock: 18,
105
    },
106
    {
107
      brand: 'Camido',
108
      model: 'Cycling Cap',
109
      price: 130.1,
110
      sellDate: '2023-03-27',
111
      sellTime: '03:17',
112
      inStock: 3,
113
    },
114
    {
115
      brand: 'Chatterpoint',
116
      model: 'Road Tire Tube',
117
      price: 59,
118
      sellDate: '2023-08-28',
119
      sellTime: '08:01',
120
      inStock: 0,
121
    },
122
    {
123
      brand: 'Vinte',
124
      model: 'ML Road Frame-W',
125
      price: 30,
126
      sellDate: '2023-10-11',
127
      sellTime: '01:23',
128
      inStock: 2,
129
    },
130
    {},
131
  ],
132
  columns: [
133
    {
134
      type: 'text',
135
      data: 'brand',
136
    },
137
    {
138
      type: 'text',
139
      data: 'model',
140
    },
141
    {
142
      type: 'numeric',
143
      data: 'price',
144
      locale: 'en-US',
145
      numericFormat: {
146
        style: 'currency',
147
        currency: 'USD',
148
        minimumFractionDigits: 2,
149
      },
150
    },
151
    {
152
      type: 'intl-date',
153
      data: 'sellDate',
154
      locale: 'en-US',
155
      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
156
      className: 'htRight',
157
    },
158
    {
159
      type: 'intl-time',
160
      data: 'sellTime',
161
      locale: 'en-US',
162
      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
163
      className: 'htRight',
164
    },
165
    {
166
      type: 'numeric',
167
      data: 'inStock',
168
      className: 'htCenter',
169
    },
170
  ],
171
  height: 200,
172
  stretchH: 'all',
173
  fixedRowsTop: 1,
174
  fixedRowsBottom: 1,
175
  colHeaders: true,
176
  columnSorting: true,
177
  // `afterColumnSort()` is a Handsontable hook: it's fired after each sorting
178
  afterColumnSort() {
179
    const lastRowIndex = hot.countRows() - 1;
180

181
    // after each sorting, take row 1 and change its index to 0
182
    hot.rowIndexMapper.moveIndexes(hot.toVisualRow(0), 0);
183
    // after each sorting, take row 16 and change its index to 15
184
    hot.rowIndexMapper.moveIndexes(hot.toVisualRow(lastRowIndex), lastRowIndex);
185
  },
186
  cells(row) {
187
    const lastRowIndex = this.instance.countRows() - 1;
188

189
    if (row === 0) {
190
      return {
191
        type: 'text',
192
        className: 'htCenter',
193
        readOnly: true,
194
      };
195
    }
196

197
    if (row === lastRowIndex) {
198
      return {
199
        type: 'numeric',
200
        className: 'htCenter',
201
      };
202
    }
203

204
    return {
205
      type: 'text',
206
    };
207
  },
208
  columnSummary: [
209
    {
210
      sourceColumn: 2,
211
      type: 'sum',
212
      reversedRowCoords: true,
213
      destinationRow: 0,
214
      destinationColumn: 2,
215
      forceNumeric: true,
216
      suppressDataTypeErrors: true,
217
    },
218
    {
219
      sourceColumn: 5,
220
      type: 'sum',
221
      reversedRowCoords: true,
222
      destinationRow: 0,
223
      destinationColumn: 5,
224
      forceNumeric: true,
225
      suppressDataTypeErrors: true,
226
    },
227
  ],
228
  autoWrapRow: true,
229
  autoWrapCol: true,
230
  licenseKey: 'non-commercial-and-evaluation',
231
});

1
import Handsontable from 'handsontable/base';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// Register all Handsontable's modules.
5
registerAllModules();
6

7
const container = document.querySelector('#exampleExcludeRowsFromSorting')!;
8

9
const hot = new Handsontable(container, {
10
  data: [
11
    {
12
      brand: 'Brand',
13
      model: 'Model',
14
      price: 'Price',
15
      sellDate: 'Date',
16
      sellTime: 'Time',
17
      inStock: 'In stock',
18
    },
19
    {
20
      brand: 'Gigabox',
21
      model: 'HL Mountain Frame',
22
      price: 1890.9,
23
      sellDate: '2023-05-03',
24
      sellTime: '11:27',
25
      inStock: 11,
26
    },
27
    {
28
      brand: 'Camido',
29
      model: 'Cycling Cap',
30
      price: 130.1,
31
      sellDate: '2023-03-27',
32
      sellTime: '03:17',
33
      inStock: 0,
34
    },
35
    {
36
      brand: 'Chatterpoint',
37
      model: 'Road Tire Tube',
38
      price: 59,
39
      sellDate: '2023-08-28',
40
      sellTime: '08:01',
41
      inStock: 1,
42
    },
43
    {
44
      brand: 'Eidel',
45
      model: 'HL Road Tire',
46
      price: 279.99,
47
      sellDate: '2023-10-02',
48
      sellTime: '13:23',
49
      inStock: 3,
50
    },
51
    {
52
      brand: 'Jetpulse',
53
      model: 'Racing Socks',
54
      price: 30,
55
      sellDate: '2023-10-11',
56
      sellTime: '01:23',
57
      inStock: 5,
58
    },
59
    {
60
      brand: 'Gigabox',
61
      model: 'HL Mountain Frame',
62
      price: 1890.9,
63
      sellDate: '2023-05-03',
64
      sellTime: '11:27',
65
      inStock: 22,
66
    },
67
    {
68
      brand: 'Camido',
69
      model: 'Cycling Cap',
70
      price: 130.1,
71
      sellDate: '2023-03-27',
72
      sellTime: '03:17',
73
      inStock: 13,
74
    },
75
    {
76
      brand: 'Chatterpoint',
77
      model: 'Road Tire Tube',
78
      price: 59,
79
      sellDate: '2023-08-28',
80
      sellTime: '08:01',
81
      inStock: 0,
82
    },
83
    {
84
      brand: 'Eidel',
85
      model: 'HL Road Tire',
86
      price: 279.99,
87
      sellDate: '2023-10-02',
88
      sellTime: '13:23',
89
      inStock: 14,
90
    },
91
    {
92
      brand: 'Jetpulse',
93
      model: 'Racing Socks',
94
      price: 30,
95
      sellDate: '2023-10-11',
96
      sellTime: '01:23',
97
      inStock: 16,
98
    },
99
    {
100
      brand: 'Gigabox',
101
      model: 'HL Mountain Frame',
102
      price: 1890.9,
103
      sellDate: '2023-05-03',
104
      sellTime: '11:27',
105
      inStock: 18,
106
    },
107
    {
108
      brand: 'Camido',
109
      model: 'Cycling Cap',
110
      price: 130.1,
111
      sellDate: '2023-03-27',
112
      sellTime: '03:17',
113
      inStock: 3,
114
    },
115
    {
116
      brand: 'Chatterpoint',
117
      model: 'Road Tire Tube',
118
      price: 59,
119
      sellDate: '2023-08-28',
120
      sellTime: '08:01',
121
      inStock: 0,
122
    },
123
    {
124
      brand: 'Vinte',
125
      model: 'ML Road Frame-W',
126
      price: 30,
127
      sellDate: '2023-10-11',
128
      sellTime: '01:23',
129
      inStock: 2,
130
    },
131
    {},
132
  ],
133
  columns: [
134
    {
135
      type: 'text',
136
      data: 'brand',
137
    },
138
    {
139
      type: 'text',
140
      data: 'model',
141
    },
142
    {
143
      type: 'numeric',
144
      data: 'price',
145
      locale: 'en-US',
146
      numericFormat: {
147
        style: 'currency',
148
        currency: 'USD',
149
        minimumFractionDigits: 2,
150
      },
151
    },
152
    {
153
      type: 'intl-date',
154
      data: 'sellDate',
155
      locale: 'en-US',
156
      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
157
      className: 'htRight',
158
    },
159
    {
160
      type: 'intl-time',
161
      data: 'sellTime',
162
      locale: 'en-US',
163
      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
164
      className: 'htRight',
165
    },
166
    {
167
      type: 'numeric',
168
      data: 'inStock',
169
      className: 'htCenter',
170
    },
171
  ],
172
  height: 200,
173
  stretchH: 'all',
174
  fixedRowsTop: 1,
175
  fixedRowsBottom: 1,
176
  colHeaders: true,
177
  columnSorting: true,
178
  // `afterColumnSort()` is a Handsontable hook: it's fired after each sorting
179
  afterColumnSort() {
180
    const lastRowIndex = hot.countRows() - 1;
181

182
    // after each sorting, take row 1 and change its index to 0
183
    hot.rowIndexMapper.moveIndexes(hot.toVisualRow(0), 0);
184

185
    // after each sorting, take row 16 and change its index to 15
186
    hot.rowIndexMapper.moveIndexes(hot.toVisualRow(lastRowIndex), lastRowIndex);
187
  },
188
  cells(row) {
189
    const lastRowIndex = this.instance.countRows() - 1;
190

191
    if (row === 0) {
192
      return {
193
        type: 'text',
194
        className: 'htCenter',
195
        readOnly: true,
196
      };
197
    }
198

199
    if (row === lastRowIndex) {
200
      return {
201
        type: 'numeric',
202
        className: 'htCenter',
203
      };
204
    }
205

206
    return {
207
      type: 'text',
208
    };
209
  },
210
  columnSummary: [
211
    {
212
      sourceColumn: 2,
213
      type: 'sum',
214
      reversedRowCoords: true,
215
      destinationRow: 0,
216
      destinationColumn: 2,
217
      forceNumeric: true,
218
      suppressDataTypeErrors: true,
219
    },
220
    {
221
      sourceColumn: 5,
222
      type: 'sum',
223
      reversedRowCoords: true,
224
      destinationRow: 0,
225
      destinationColumn: 5,
226
      forceNumeric: true,
227
      suppressDataTypeErrors: true,
228
    },
229
  ],
230
  autoWrapRow: true,
231
  autoWrapCol: true,
232
  licenseKey: 'non-commercial-and-evaluation',
233
});

1
<div id="exampleExcludeRowsFromSorting"></div>

Control sorting programmatically

Use the ColumnSorting plugin API and updateSettings() to control sorting at runtime. This lets you, for example, enable or disable sorting based on conditions, or trigger sorting from outside the grid.

Enable or disable sorting programmatically

To enable or disable sorting programmatically, call updateSettings() with columnSorting set to true or false.

1
// enable sorting for all columns
2
handsontableInstance.updateSettings({
3
  columnSorting: true,
4
});
5

6
// disable sorting for all columns
7
handsontableInstance.updateSettings({
8
  columnSorting: false,
9
});
10

11
// enable sorting on column 0, disable sorting on column 1
12
handsontableInstance.updateSettings({
13
  columns: [
14
    { columnSorting: { headerAction: true } },
15
    { columnSorting: { headerAction: false } },
16
  ],
17
});

Sort data programmatically

Use columnSorting.sort() to sort programmatically. Pass an object with column (visual column index) and sortOrder ('asc' or 'desc'). Each call replaces the previous sort order entirely.

Use columnSorting.clearSort() to remove the active sort and return rows to their original order.

1
const columnSorting = handsontableInstance.getPlugin('columnSorting');
2

3
// sort column 0 in ascending order
4
columnSorting.sort({ column: 0, sortOrder: 'asc' });
5

6
// return rows to their original order
7
columnSorting.clearSort();

To see how it works, try out the following demo:

1
import Handsontable from 'handsontable/base';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// Register all Handsontable's modules.
5
registerAllModules();
6

7
const container = document.querySelector('#exampleSortByAPI');
8
const hot = new Handsontable(container, {
9
  data: [
10
    {
11
      brand: 'Jetpulse',
12
      model: 'Racing Socks',
13
      price: 30,
14
      sellDate: '2023-10-11',
15
      sellTime: '01:23',
16
      inStock: false,
17
    },
18
    {
19
      brand: 'Gigabox',
20
      model: 'HL Mountain Frame',
21
      price: 1890.9,
22
      sellDate: '2023-05-03',
23
      sellTime: '11:27',
24
      inStock: false,
25
    },
26
    {
27
      brand: 'Camido',
28
      model: 'Cycling Cap',
29
      price: 130.1,
30
      sellDate: '2023-03-27',
31
      sellTime: '03:17',
32
      inStock: true,
33
    },
34
    {
35
      brand: 'Chatterpoint',
36
      model: 'Road Tire Tube',
37
      price: 59,
38
      sellDate: '2023-08-28',
39
      sellTime: '08:01',
40
      inStock: true,
41
    },
42
    {
43
      brand: 'Eidel',
44
      model: 'HL Road Tire',
45
      price: 279.99,
46
      sellDate: '2023-10-02',
47
      sellTime: '13:23',
48
      inStock: true,
49
    },
50
  ],
51
  columns: [
52
    {
53
      title: 'Brand',
54
      type: 'text',
55
      data: 'brand',
56
    },
57
    {
58
      title: 'Model',
59
      type: 'text',
60
      data: 'model',
61
    },
62
    {
63
      title: 'Price',
64
      type: 'numeric',
65
      data: 'price',
66
      locale: 'en-US',
67
      numericFormat: {
68
        style: 'currency',
69
        currency: 'USD',
70
        minimumFractionDigits: 2,
71
      },
72
    },
73
    {
74
      title: 'Date',
75
      type: 'intl-date',
76
      data: 'sellDate',
77
      locale: 'en-US',
78
      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
79
      className: 'htRight',
80
    },
81
    {
82
      title: 'Time',
83
      type: 'intl-time',
84
      data: 'sellTime',
85
      locale: 'en-US',
86
      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
87
      className: 'htRight',
88
    },
89
    {
90
      title: 'In stock',
91
      type: 'checkbox',
92
      data: 'inStock',
93
      className: 'htCenter',
94
    },
95
  ],
96
  columnSorting: true,
97
  height: 'auto',
98
  stretchH: 'all',
99
  autoWrapRow: true,
100
  autoWrapCol: true,
101
  licenseKey: 'non-commercial-and-evaluation',
102
});
103

104
const columnSorting = hot.getPlugin('columnSorting');
105
const buttonSortAscending = document.querySelector('#sort_asc');
106

107
buttonSortAscending.addEventListener('click', () => {
108
  columnSorting.sort({
109
    column: 0,
110
    sortOrder: 'asc',
111
  });
112
});
113

114
const buttonUnsort = document.querySelector('#unsort');
115

116
buttonUnsort.addEventListener('click', () => {
117
  columnSorting.clearSort();
118
});

1
import Handsontable from 'handsontable/base';
2
import { registerAllModules } from 'handsontable/registry';
3
import { ColumnSorting } from 'handsontable/plugins';
4

5
// Register all Handsontable's modules.
6
registerAllModules();
7

8
const container = document.querySelector('#exampleSortByAPI')!;
9

10
const hot = new Handsontable(container, {
11
  data: [
12
    {
13
      brand: 'Jetpulse',
14
      model: 'Racing Socks',
15
      price: 30,
16
      sellDate: '2023-10-11',
17
      sellTime: '01:23',
18
      inStock: false,
19
    },
20
    {
21
      brand: 'Gigabox',
22
      model: 'HL Mountain Frame',
23
      price: 1890.9,
24
      sellDate: '2023-05-03',
25
      sellTime: '11:27',
26
      inStock: false,
27
    },
28
    {
29
      brand: 'Camido',
30
      model: 'Cycling Cap',
31
      price: 130.1,
32
      sellDate: '2023-03-27',
33
      sellTime: '03:17',
34
      inStock: true,
35
    },
36
    {
37
      brand: 'Chatterpoint',
38
      model: 'Road Tire Tube',
39
      price: 59,
40
      sellDate: '2023-08-28',
41
      sellTime: '08:01',
42
      inStock: true,
43
    },
44
    {
45
      brand: 'Eidel',
46
      model: 'HL Road Tire',
47
      price: 279.99,
48
      sellDate: '2023-10-02',
49
      sellTime: '13:23',
50
      inStock: true,
51
    },
52
  ],
53
  columns: [
54
    {
55
      title: 'Brand',
56
      type: 'text',
57
      data: 'brand',
58
    },
59
    {
60
      title: 'Model',
61
      type: 'text',
62
      data: 'model',
63
    },
64
    {
65
      title: 'Price',
66
      type: 'numeric',
67
      data: 'price',
68
      locale: 'en-US',
69
      numericFormat: {
70
        style: 'currency',
71
        currency: 'USD',
72
        minimumFractionDigits: 2,
73
      },
74
    },
75
    {
76
      title: 'Date',
77
      type: 'intl-date',
78
      data: 'sellDate',
79
      locale: 'en-US',
80
      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
81
      className: 'htRight',
82
    },
83
    {
84
      title: 'Time',
85
      type: 'intl-time',
86
      data: 'sellTime',
87
      locale: 'en-US',
88
      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
89
      className: 'htRight',
90
    },
91
    {
92
      title: 'In stock',
93
      type: 'checkbox',
94
      data: 'inStock',
95
      className: 'htCenter',
96
    },
97
  ],
98
  columnSorting: true,
99
  height: 'auto',
100
  stretchH: 'all',
101
  autoWrapRow: true,
102
  autoWrapCol: true,
103
  licenseKey: 'non-commercial-and-evaluation',
104
});
105

106
const columnSorting: ColumnSorting = hot.getPlugin('columnSorting');
107

108
const buttonSortAscending = document.querySelector('#sort_asc')!;
109

110
buttonSortAscending.addEventListener('click', () => {
111
  columnSorting.sort({
112
    column: 0,
113
    sortOrder: 'asc',
114
  });
115
});
116

117
const buttonUnsort = document.querySelector('#unsort')!;
118

119
buttonUnsort.addEventListener('click', () => {
120
  columnSorting.clearSort();
121
});

1
<div class="example-controls-container">
2
  <div class="controls">
3
    <button id="sort_asc">Sort by the "Brand" column, in ascending order</button>
4
    <button id="unsort">Go back to the original order</button>
5
  </div>
6
</div>
7
<div id="exampleSortByAPI"></div>

MultiColumnSorting plugin

The MultiColumnSorting plugin extends ColumnSorting to sort rows by multiple columns at the same time.

Key differences from ColumnSorting:

Sort by multiple columns at once. The column clicked first has the highest sort priority.
Hold Ctrl/Cmd and click a column header to add it to the active sort criteria without replacing the existing sort.
Press Shift+Enter with a column header focused to append that column to the active sort criteria.
initialConfig accepts an array of sort config objects to define a multi-column initial order.

ColumnSorting and MultiColumnSorting are mutually exclusive. If both are set to true, ColumnSorting is automatically disabled.

Enable multi-column sorting

To enable multi-column sorting for all columns, set multiColumnSorting to true.

1
const configurationOptions = {
2
  multiColumnSorting: true,
3
};

Configure multi-column sorting options

multiColumnSorting supports the same options as columnSorting: headerAction, sortEmptyCells, indicator, and compareFunctionFactory. Refer to Configure sorting for a description of each option.

To disable multi-column sorting for a specific column, set headerAction to false in that column’s configuration:

1
const configurationOptions = {
2
  multiColumnSorting: true,
3
  columns: [
4
    {
5
      multiColumnSorting: {
6
        headerAction: false,  // disable multi-column sorting for the first column
7
      },
8
    },
9
  ],
10
};

Sort by multiple columns

To sort by multiple columns interactively, hold Ctrl/Cmd and click column headers in the desired priority order.

Try the following demo:

Click Brand. The rows sort by brand.
Hold Ctrl/Cmd and click Model. The rows sort by model within each brand.
Hold Ctrl/Cmd and click Price. The rows sort by price within each model.

1
import Handsontable from 'handsontable/base';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// Register all Handsontable's modules.
5
registerAllModules();
6

7
const container = document.querySelector('#exampleSortByMultipleColumns');
8

9
new Handsontable(container, {
10
  data: [
11
    {
12
      brand: 'Jetpulse',
13
      model: 'HL Mountain Frame',
14
      price: 1890.9,
15
      sellDate: '2023-10-11',
16
      sellTime: '01:23',
17
      inStock: false,
18
    },
19
    {
20
      brand: 'Jetpulse',
21
      model: 'HL Mountain Frame',
22
      price: 30,
23
      sellDate: '2023-05-03',
24
      sellTime: '11:27',
25
      inStock: false,
26
    },
27
    {
28
      brand: 'Jetpulse',
29
      model: 'Cycling Cap',
30
      price: 130.1,
31
      sellDate: '2023-03-27',
32
      sellTime: '03:17',
33
      inStock: true,
34
    },
35
    {
36
      brand: 'Chatterpoint',
37
      model: 'Road Tire Tube',
38
      price: 279.99,
39
      sellDate: '2023-08-28',
40
      sellTime: '08:01',
41
      inStock: true,
42
    },
43
    {
44
      brand: 'Chatterpoint',
45
      model: 'HL Road Tire',
46
      price: 59,
47
      sellDate: '2023-10-02',
48
      sellTime: '13:23',
49
      inStock: true,
50
    },
51
  ],
52
  columns: [
53
    {
54
      title: 'Brand',
55
      type: 'text',
56
      data: 'brand',
57
    },
58
    {
59
      title: 'Model',
60
      type: 'text',
61
      data: 'model',
62
    },
63
    {
64
      title: 'Price',
65
      type: 'numeric',
66
      data: 'price',
67
      locale: 'en-US',
68
      numericFormat: {
69
        style: 'currency',
70
        currency: 'USD',
71
        minimumFractionDigits: 2,
72
      },
73
    },
74
    {
75
      title: 'Date',
76
      type: 'intl-date',
77
      data: 'sellDate',
78
      locale: 'en-US',
79
      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
80
      className: 'htRight',
81
    },
82
    {
83
      title: 'Time',
84
      type: 'intl-time',
85
      data: 'sellTime',
86
      locale: 'en-US',
87
      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
88
      className: 'htRight',
89
    },
90
    {
91
      title: 'In stock',
92
      type: 'checkbox',
93
      data: 'inStock',
94
      className: 'htCenter',
95
    },
96
  ],
97
  // enable sorting by multiple columns, for all columns
98
  multiColumnSorting: true,
99
  height: 'auto',
100
  stretchH: 'all',
101
  autoWrapRow: true,
102
  autoWrapCol: true,
103
  licenseKey: 'non-commercial-and-evaluation',
104
});

1
import Handsontable from 'handsontable/base';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// Register all Handsontable's modules.
5
registerAllModules();
6

7
const container = document.querySelector('#exampleSortByMultipleColumns')!;
8

9
new Handsontable(container, {
10
  data: [
11
    {
12
      brand: 'Jetpulse',
13
      model: 'HL Mountain Frame',
14
      price: 1890.9,
15
      sellDate: '2023-10-11',
16
      sellTime: '01:23',
17
      inStock: false,
18
    },
19
    {
20
      brand: 'Jetpulse',
21
      model: 'HL Mountain Frame',
22
      price: 30,
23
      sellDate: '2023-05-03',
24
      sellTime: '11:27',
25
      inStock: false,
26
    },
27
    {
28
      brand: 'Jetpulse',
29
      model: 'Cycling Cap',
30
      price: 130.1,
31
      sellDate: '2023-03-27',
32
      sellTime: '03:17',
33
      inStock: true,
34
    },
35
    {
36
      brand: 'Chatterpoint',
37
      model: 'Road Tire Tube',
38
      price: 279.99,
39
      sellDate: '2023-08-28',
40
      sellTime: '08:01',
41
      inStock: true,
42
    },
43
    {
44
      brand: 'Chatterpoint',
45
      model: 'HL Road Tire',
46
      price: 59,
47
      sellDate: '2023-10-02',
48
      sellTime: '13:23',
49
      inStock: true,
50
    },
51
  ],
52
  columns: [
53
    {
54
      title: 'Brand',
55
      type: 'text',
56
      data: 'brand',
57
    },
58
    {
59
      title: 'Model',
60
      type: 'text',
61
      data: 'model',
62
    },
63
    {
64
      title: 'Price',
65
      type: 'numeric',
66
      data: 'price',
67
      locale: 'en-US',
68
      numericFormat: {
69
        style: 'currency',
70
        currency: 'USD',
71
        minimumFractionDigits: 2,
72
      },
73
    },
74
    {
75
      title: 'Date',
76
      type: 'intl-date',
77
      data: 'sellDate',
78
      locale: 'en-US',
79
      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
80
      className: 'htRight',
81
    },
82
    {
83
      title: 'Time',
84
      type: 'intl-time',
85
      data: 'sellTime',
86
      locale: 'en-US',
87
      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
88
      className: 'htRight',
89
    },
90
    {
91
      title: 'In stock',
92
      type: 'checkbox',
93
      data: 'inStock',
94
      className: 'htCenter',
95
    },
96
  ],
97

98
  // enable sorting by multiple columns, for all columns
99
  multiColumnSorting: true,
100
  height: 'auto',
101
  stretchH: 'all',
102
  autoWrapRow: true,
103
  autoWrapCol: true,
104
  licenseKey: 'non-commercial-and-evaluation',
105
});

1
<div id="exampleSortByMultipleColumns"></div>

Set an initial multi-column sort order

Use initialConfig with an array of sort config objects to apply a multi-column sort at initialization. Each object has a column property (visual column index) and a sortOrder property ('asc' or 'desc'). The array order determines sort priority: the first entry has the highest priority.

In the following demo, the data is initially sorted by Brand ascending, then by Model descending:

1
import Handsontable from 'handsontable/base';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// Register all Handsontable's modules.
5
registerAllModules();
6

7
const container = document.querySelector('#exampleInitialSortOrder');
8

9
new Handsontable(container, {
10
  data: [
11
    {
12
      brand: 'Jetpulse',
13
      model: 'HL Mountain Frame',
14
      price: 30,
15
      sellDate: '2023-10-11',
16
      sellTime: '01:23',
17
      inStock: false,
18
    },
19
    {
20
      brand: 'Jetpulse',
21
      model: 'HL Mountain Frame',
22
      price: 1890.9,
23
      sellDate: '2023-05-03',
24
      sellTime: '11:27',
25
      inStock: false,
26
    },
27
    {
28
      brand: 'Jetpulse',
29
      model: 'Cycling Cap',
30
      price: 130.1,
31
      sellDate: '2023-03-27',
32
      sellTime: '03:17',
33
      inStock: true,
34
    },
35
    {
36
      brand: 'Chatterpoint',
37
      model: 'Road Tire Tube',
38
      price: 59,
39
      sellDate: '2023-08-28',
40
      sellTime: '08:01',
41
      inStock: true,
42
    },
43
    {
44
      brand: 'Chatterpoint',
45
      model: 'HL Road Tire',
46
      price: 279.99,
47
      sellDate: '2023-10-02',
48
      sellTime: '13:23',
49
      inStock: true,
50
    },
51
  ],
52
  columns: [
53
    {
54
      title: 'Brand',
55
      type: 'text',
56
      data: 'brand',
57
    },
58
    {
59
      title: 'Model',
60
      type: 'text',
61
      data: 'model',
62
    },
63
    {
64
      title: 'Price',
65
      type: 'numeric',
66
      data: 'price',
67
      locale: 'en-US',
68
      numericFormat: {
69
        style: 'currency',
70
        currency: 'USD',
71
        minimumFractionDigits: 2,
72
      },
73
    },
74
    {
75
      title: 'Date',
76
      type: 'intl-date',
77
      data: 'sellDate',
78
      locale: 'en-US',
79
      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
80
      className: 'htRight',
81
    },
82
    {
83
      title: 'Time',
84
      type: 'intl-time',
85
      data: 'sellTime',
86
      locale: 'en-US',
87
      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
88
      className: 'htRight',
89
    },
90
    {
91
      title: 'In stock',
92
      type: 'checkbox',
93
      data: 'inStock',
94
      className: 'htCenter',
95
    },
96
  ],
97
  multiColumnSorting: {
98
    initialConfig: [
99
      // at initialization, sort the data by the 'Brand' column, in ascending order
100
      {
101
        column: 0,
102
        sortOrder: 'asc',
103
      },
104
      // at initialization, sort the data by the 'Model' column, in descending order
105
      {
106
        column: 1,
107
        sortOrder: 'desc',
108
      },
109
    ],
110
  },
111
  height: 'auto',
112
  stretchH: 'all',
113
  autoWrapRow: true,
114
  autoWrapCol: true,
115
  licenseKey: 'non-commercial-and-evaluation',
116
});

1
import Handsontable from 'handsontable/base';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// Register all Handsontable's modules.
5
registerAllModules();
6

7
const container = document.querySelector('#exampleInitialSortOrder')!;
8

9
new Handsontable(container, {
10
  data: [
11
    {
12
      brand: 'Jetpulse',
13
      model: 'HL Mountain Frame',
14
      price: 30,
15
      sellDate: '2023-10-11',
16
      sellTime: '01:23',
17
      inStock: false,
18
    },
19
    {
20
      brand: 'Jetpulse',
21
      model: 'HL Mountain Frame',
22
      price: 1890.9,
23
      sellDate: '2023-05-03',
24
      sellTime: '11:27',
25
      inStock: false,
26
    },
27
    {
28
      brand: 'Jetpulse',
29
      model: 'Cycling Cap',
30
      price: 130.1,
31
      sellDate: '2023-03-27',
32
      sellTime: '03:17',
33
      inStock: true,
34
    },
35
    {
36
      brand: 'Chatterpoint',
37
      model: 'Road Tire Tube',
38
      price: 59,
39
      sellDate: '2023-08-28',
40
      sellTime: '08:01',
41
      inStock: true,
42
    },
43
    {
44
      brand: 'Chatterpoint',
45
      model: 'HL Road Tire',
46
      price: 279.99,
47
      sellDate: '2023-10-02',
48
      sellTime: '13:23',
49
      inStock: true,
50
    },
51
  ],
52
  columns: [
53
    {
54
      title: 'Brand',
55
      type: 'text',
56
      data: 'brand',
57
    },
58
    {
59
      title: 'Model',
60
      type: 'text',
61
      data: 'model',
62
    },
63
    {
64
      title: 'Price',
65
      type: 'numeric',
66
      data: 'price',
67
      locale: 'en-US',
68
      numericFormat: {
69
        style: 'currency',
70
        currency: 'USD',
71
        minimumFractionDigits: 2,
72
      },
73
    },
74
    {
75
      title: 'Date',
76
      type: 'intl-date',
77
      data: 'sellDate',
78
      locale: 'en-US',
79
      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
80
      className: 'htRight',
81
    },
82
    {
83
      title: 'Time',
84
      type: 'intl-time',
85
      data: 'sellTime',
86
      locale: 'en-US',
87
      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
88
      className: 'htRight',
89
    },
90
    {
91
      title: 'In stock',
92
      type: 'checkbox',
93
      data: 'inStock',
94
      className: 'htCenter',
95
    },
96
  ],
97
  multiColumnSorting: {
98
    initialConfig: [
99
      // at initialization, sort the data by the 'Brand' column, in ascending order
100
      {
101
        column: 0,
102
        sortOrder: 'asc',
103
      },
104
      // at initialization, sort the data by the 'Model' column, in descending order
105
      {
106
        column: 1,
107
        sortOrder: 'desc',
108
      },
109
    ],
110
  },
111
  height: 'auto',
112
  stretchH: 'all',
113
  autoWrapRow: true,
114
  autoWrapCol: true,
115
  licenseKey: 'non-commercial-and-evaluation',
116
});

1
<div id="exampleInitialSortOrder"></div>

1
const configurationOptions = {
2
  multiColumnSorting: {
3
    initialConfig: [
4
      { column: 0, sortOrder: 'asc' },   // sort column 0 ascending (highest priority)
5
      { column: 1, sortOrder: 'desc' },  // sort column 1 descending (next priority)
6
    ],
7
  },
8
};

Sort by multiple columns programmatically

Use multiColumnSorting.sort() to sort by multiple columns programmatically. Pass an array of sort config objects. The array order determines sort priority. Each call replaces the previous sort order entirely.

Use multiColumnSorting.clearSort() to remove all sort criteria and return rows to their original order.

1
const multiColumnSorting = handsontableInstance.getPlugin('multiColumnSorting');
2

3
// sort column 0 ascending, then column 1 descending
4
multiColumnSorting.sort([
5
  { column: 0, sortOrder: 'asc' },
6
  { column: 1, sortOrder: 'desc' },
7
]);
8

9
// return rows to their original order
10
multiColumnSorting.clearSort();

To see how it works, try out the following demo:

1
import Handsontable from 'handsontable/base';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// Register all Handsontable's modules.
5
registerAllModules();
6

7
const container = document.querySelector('#exampleSortByAPIMultipleColumns');
8
const hot = new Handsontable(container, {
9
  data: [
10
    {
11
      brand: 'Jetpulse',
12
      model: 'Racing Socks',
13
      price: 30,
14
      sellDate: '2023-10-11',
15
      sellTime: '01:23',
16
      inStock: false,
17
    },
18
    {
19
      brand: 'Jetpulse',
20
      model: 'HL Mountain Frame',
21
      price: 1890.9,
22
      sellDate: '2023-05-03',
23
      sellTime: '11:27',
24
      inStock: false,
25
    },
26
    {
27
      brand: 'Jetpulse',
28
      model: 'Cycling Cap',
29
      price: 130.1,
30
      sellDate: '2023-03-27',
31
      sellTime: '03:17',
32
      inStock: true,
33
    },
34
    {
35
      brand: 'Chatterpoint',
36
      model: 'Road Tire Tube',
37
      price: 59,
38
      sellDate: '2023-08-28',
39
      sellTime: '08:01',
40
      inStock: true,
41
    },
42
    {
43
      brand: 'Chatterpoint',
44
      model: 'HL Road Tire',
45
      price: 279.99,
46
      sellDate: '2023-10-02',
47
      sellTime: '13:23',
48
      inStock: true,
49
    },
50
  ],
51
  columns: [
52
    {
53
      title: 'Brand',
54
      type: 'text',
55
      data: 'brand',
56
    },
57
    {
58
      title: 'Model',
59
      type: 'text',
60
      data: 'model',
61
    },
62
    {
63
      title: 'Price',
64
      type: 'numeric',
65
      data: 'price',
66
      locale: 'en-US',
67
      numericFormat: {
68
        style: 'currency',
69
        currency: 'USD',
70
        minimumFractionDigits: 2,
71
      },
72
    },
73
    {
74
      title: 'Date',
75
      type: 'intl-date',
76
      data: 'sellDate',
77
      locale: 'en-US',
78
      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
79
      className: 'htRight',
80
    },
81
    {
82
      title: 'Time',
83
      type: 'intl-time',
84
      data: 'sellTime',
85
      locale: 'en-US',
86
      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
87
      className: 'htRight',
88
    },
89
    {
90
      title: 'In stock',
91
      type: 'checkbox',
92
      data: 'inStock',
93
      className: 'htCenter',
94
    },
95
  ],
96
  multiColumnSorting: true,
97
  height: 'auto',
98
  stretchH: 'all',
99
  autoWrapRow: true,
100
  autoWrapCol: true,
101
  licenseKey: 'non-commercial-and-evaluation',
102
});
103

104
const multiColumnSorting = hot.getPlugin('multiColumnSorting');
105
const buttonSort = document.querySelector('#sort');
106

107
buttonSort.addEventListener('click', () => {
108
  multiColumnSorting.sort([
109
    {
110
      column: 0,
111
      sortOrder: 'asc',
112
    },
113
    {
114
      column: 1,
115
      sortOrder: 'desc',
116
    },
117
  ]);
118
});

1
import Handsontable from 'handsontable/base';
2
import { registerAllModules } from 'handsontable/registry';
3
import { MultiColumnSorting } from 'handsontable/plugins';
4

5
// Register all Handsontable's modules.
6
registerAllModules();
7

8
const container = document.querySelector('#exampleSortByAPIMultipleColumns')!;
9

10
const hot = new Handsontable(container, {
11
  data: [
12
    {
13
      brand: 'Jetpulse',
14
      model: 'Racing Socks',
15
      price: 30,
16
      sellDate: '2023-10-11',
17
      sellTime: '01:23',
18
      inStock: false,
19
    },
20
    {
21
      brand: 'Jetpulse',
22
      model: 'HL Mountain Frame',
23
      price: 1890.9,
24
      sellDate: '2023-05-03',
25
      sellTime: '11:27',
26
      inStock: false,
27
    },
28
    {
29
      brand: 'Jetpulse',
30
      model: 'Cycling Cap',
31
      price: 130.1,
32
      sellDate: '2023-03-27',
33
      sellTime: '03:17',
34
      inStock: true,
35
    },
36
    {
37
      brand: 'Chatterpoint',
38
      model: 'Road Tire Tube',
39
      price: 59,
40
      sellDate: '2023-08-28',
41
      sellTime: '08:01',
42
      inStock: true,
43
    },
44
    {
45
      brand: 'Chatterpoint',
46
      model: 'HL Road Tire',
47
      price: 279.99,
48
      sellDate: '2023-10-02',
49
      sellTime: '13:23',
50
      inStock: true,
51
    },
52
  ],
53
  columns: [
54
    {
55
      title: 'Brand',
56
      type: 'text',
57
      data: 'brand',
58
    },
59
    {
60
      title: 'Model',
61
      type: 'text',
62
      data: 'model',
63
    },
64
    {
65
      title: 'Price',
66
      type: 'numeric',
67
      data: 'price',
68
      locale: 'en-US',
69
      numericFormat: {
70
        style: 'currency',
71
        currency: 'USD',
72
        minimumFractionDigits: 2,
73
      },
74
    },
75
    {
76
      title: 'Date',
77
      type: 'intl-date',
78
      data: 'sellDate',
79
      locale: 'en-US',
80
      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
81
      className: 'htRight',
82
    },
83
    {
84
      title: 'Time',
85
      type: 'intl-time',
86
      data: 'sellTime',
87
      locale: 'en-US',
88
      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
89
      className: 'htRight',
90
    },
91
    {
92
      title: 'In stock',
93
      type: 'checkbox',
94
      data: 'inStock',
95
      className: 'htCenter',
96
    },
97
  ],
98
  multiColumnSorting: true,
99
  height: 'auto',
100
  stretchH: 'all',
101
  autoWrapRow: true,
102
  autoWrapCol: true,
103
  licenseKey: 'non-commercial-and-evaluation',
104
});
105

106
const multiColumnSorting: MultiColumnSorting = hot.getPlugin('multiColumnSorting');
107

108
const buttonSort = document.querySelector('#sort')!;
109

110
buttonSort.addEventListener('click', () => {
111
  multiColumnSorting.sort([
112
    {
113
      column: 0,
114
      sortOrder: 'asc',
115
    },
116
    {
117
      column: 1,
118
      sortOrder: 'desc',
119
    },
120
  ]);
121
});

1
<div class="example-controls-container">
2
  <div class="controls">
3
    <button id="sort">Sort</button>
4
  </div>
5
</div>
6
<div id="exampleSortByAPIMultipleColumns"></div>

Add custom sort icons

The default sort icons (↑↓) are rendered using CSS -webkit-mask-image. Override the following pseudo-elements to replace them:

.columnSorting.sortAction.ascending::before
.columnSorting.sortAction.descending::before

1
import Handsontable from 'handsontable/base';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// Register all Handsontable's modules.
5
registerAllModules();
6

7
const container = document.querySelector('#exampleCustomSortIcons');
8

9
new Handsontable(container, {
10
  data: [
11
    {
12
      brand: 'Jetpulse',
13
      model: 'Racing Socks',
14
      price: 30,
15
      sellDate: '2023-10-11',
16
      sellTime: '01:23',
17
      inStock: false,
18
    },
19
    {
20
      brand: 'Gigabox',
21
      model: 'HL Mountain Frame',
22
      price: 1890.9,
23
      sellDate: '2023-05-03',
24
      sellTime: '11:27',
25
      inStock: false,
26
    },
27
    {
28
      brand: 'Camido',
29
      model: 'Cycling Cap',
30
      price: 130.1,
31
      sellDate: '2023-03-27',
32
      sellTime: '03:17',
33
      inStock: true,
34
    },
35
    {
36
      brand: 'Chatterpoint',
37
      model: 'Road Tire Tube',
38
      price: 59,
39
      sellDate: '2023-08-28',
40
      sellTime: '08:01',
41
      inStock: true,
42
    },
43
    {
44
      brand: 'Eidel',
45
      model: 'HL Road Tire',
46
      price: 279.99,
47
      sellDate: '2023-10-02',
48
      sellTime: '13:23',
49
      inStock: true,
50
    },
51
  ],
52
  columns: [
53
    {
54
      title: 'Brand',
55
      type: 'text',
56
      data: 'brand',
57
    },
58
    {
59
      title: 'Model',
60
      type: 'text',
61
      data: 'model',
62
    },
63
    {
64
      title: 'Price',
65
      type: 'numeric',
66
      data: 'price',
67
      locale: 'en-US',
68
      numericFormat: {
69
        style: 'currency',
70
        currency: 'USD',
71
        minimumFractionDigits: 2,
72
      },
73
    },
74
    {
75
      title: 'Date',
76
      type: 'intl-date',
77
      data: 'sellDate',
78
      locale: 'en-US',
79
      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
80
      className: 'htRight',
81
    },
82
    {
83
      title: 'Time',
84
      type: 'intl-time',
85
      data: 'sellTime',
86
      locale: 'en-US',
87
      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
88
      className: 'htRight',
89
    },
90
    {
91
      title: 'In stock',
92
      type: 'checkbox',
93
      data: 'inStock',
94
      className: 'htCenter',
95
    },
96
  ],
97
  className: 'custom-sort-icon-example-1',
98
  columnSorting: {
99
    initialConfig: {
100
      column: 1,
101
      sortOrder: 'desc',
102
    },
103
  },
104
  height: 'auto',
105
  stretchH: 'all',
106
  autoWrapRow: true,
107
  autoWrapCol: true,
108
  licenseKey: 'non-commercial-and-evaluation',
109
});

1
import Handsontable from 'handsontable/base';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// Register all Handsontable's modules.
5
registerAllModules();
6

7
const container = document.querySelector('#exampleCustomSortIcons')!;
8

9
new Handsontable(container, {
10
  data: [
11
    {
12
      brand: 'Jetpulse',
13
      model: 'Racing Socks',
14
      price: 30,
15
      sellDate: '2023-10-11',
16
      sellTime: '01:23',
17
      inStock: false,
18
    },
19
    {
20
      brand: 'Gigabox',
21
      model: 'HL Mountain Frame',
22
      price: 1890.9,
23
      sellDate: '2023-05-03',
24
      sellTime: '11:27',
25
      inStock: false,
26
    },
27
    {
28
      brand: 'Camido',
29
      model: 'Cycling Cap',
30
      price: 130.1,
31
      sellDate: '2023-03-27',
32
      sellTime: '03:17',
33
      inStock: true,
34
    },
35
    {
36
      brand: 'Chatterpoint',
37
      model: 'Road Tire Tube',
38
      price: 59,
39
      sellDate: '2023-08-28',
40
      sellTime: '08:01',
41
      inStock: true,
42
    },
43
    {
44
      brand: 'Eidel',
45
      model: 'HL Road Tire',
46
      price: 279.99,
47
      sellDate: '2023-10-02',
48
      sellTime: '13:23',
49
      inStock: true,
50
    },
51
  ],
52
  columns: [
53
    {
54
      title: 'Brand',
55
      type: 'text',
56
      data: 'brand',
57
    },
58
    {
59
      title: 'Model',
60
      type: 'text',
61
      data: 'model',
62
    },
63
    {
64
      title: 'Price',
65
      type: 'numeric',
66
      data: 'price',
67
      locale: 'en-US',
68
      numericFormat: {
69
        style: 'currency',
70
        currency: 'USD',
71
        minimumFractionDigits: 2,
72
      },
73
    },
74
    {
75
      title: 'Date',
76
      type: 'intl-date',
77
      data: 'sellDate',
78
      locale: 'en-US',
79
      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
80
      className: 'htRight',
81
    },
82
    {
83
      title: 'Time',
84
      type: 'intl-time',
85
      data: 'sellTime',
86
      locale: 'en-US',
87
      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
88
      className: 'htRight',
89
    },
90
    {
91
      title: 'In stock',
92
      type: 'checkbox',
93
      data: 'inStock',
94
      className: 'htCenter',
95
    },
96
  ],
97
  className: 'custom-sort-icon-example-1',
98
  columnSorting: {
99
    initialConfig: {
100
      column: 1,
101
      sortOrder: 'desc',
102
    },
103
  },
104
  height: 'auto',
105
  stretchH: 'all',
106
  autoWrapRow: true,
107
  autoWrapCol: true,
108
  licenseKey: 'non-commercial-and-evaluation',
109
});

1
<div id="exampleCustomSortIcons"></div>

1
.custom-sort-icon-example-1 .columnSorting.sortAction.ascending::before {
2
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 0h24v24H0z' stroke='none'/%3E%3Cpath d='M12 21V9M8 13l4-4 4 4'/%3E%3Cpath d='M21 12a9 9 0 0 0-18 0'/%3E%3C/svg%3E");
3
}
4

5
.custom-sort-icon-example-1 .columnSorting.sortAction.descending::before {
6
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 0h24v24H0z' stroke='none'/%3E%3Cpath d='M12 3v12M16 11l-4 4-4-4'/%3E%3Cpath d='M3 12a9 9 0 0 0 18 0'/%3E%3C/svg%3E");
7
}

To replace the column-priority number indicators used by the MultiColumnSorting plugin (₁, ₂, etc.), override the content of .columnSorting.sort-1::after and subsequent pseudo-elements:

1
import Handsontable from 'handsontable/base';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// Register all Handsontable's modules.
5
registerAllModules();
6

7
const container = document.querySelector('#exampleCustomSortIcons3');
8

9
new Handsontable(container, {
10
  data: [
11
    {
12
      brand: 'Jetpulse',
13
      model: 'Racing Socks',
14
      color: 'White',
15
      price: 30,
16
      sellDate: '2023-10-11',
17
      sellTime: '01:23',
18
      inStock: false,
19
    },
20
    {
21
      brand: 'Gigabox',
22
      model: 'HL Frame',
23
      color: 'Black',
24
      price: 1890.9,
25
      sellDate: '2023-05-03',
26
      sellTime: '11:27',
27
      inStock: false,
28
    },
29
    {
30
      brand: 'Camido',
31
      model: 'Cycling Cap',
32
      color: 'Red',
33
      price: 130.1,
34
      sellDate: '2023-03-27',
35
      sellTime: '03:17',
36
      inStock: true,
37
    },
38
    {
39
      brand: 'Chatterpoint',
40
      model: 'Road Tire Tube',
41
      color: 'Green',
42
      price: 59,
43
      sellDate: '2023-08-28',
44
      sellTime: '08:01',
45
      inStock: true,
46
    },
47
    {
48
      brand: 'Eidel',
49
      model: 'HL Road Tire',
50
      color: 'Blue',
51
      price: 279.99,
52
      sellDate: '2023-10-02',
53
      sellTime: '13:23',
54
      inStock: true,
55
    },
56
  ],
57
  columns: [
58
    {
59
      title: 'Brand',
60
      type: 'text',
61
      data: 'brand',
62
    },
63
    {
64
      title: 'Model',
65
      type: 'text',
66
      data: 'model',
67
    },
68
    {
69
      title: 'Color',
70
      type: 'text',
71
      data: 'color',
72
    },
73
    {
74
      title: 'Price',
75
      type: 'numeric',
76
      data: 'price',
77
      locale: 'en-US',
78
      numericFormat: {
79
        style: 'currency',
80
        currency: 'USD',
81
        minimumFractionDigits: 2,
82
      },
83
    },
84
    {
85
      title: 'Date',
86
      type: 'intl-date',
87
      data: 'sellDate',
88
      locale: 'en-US',
89
      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
90
      className: 'htRight',
91
    },
92
    {
93
      title: 'Time',
94
      type: 'intl-time',
95
      data: 'sellTime',
96
      locale: 'en-US',
97
      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
98
      className: 'htRight',
99
    },
100
    {
101
      title: 'In stock',
102
      type: 'checkbox',
103
      data: 'inStock',
104
      className: 'htCenter',
105
    },
106
  ],
107
  className: 'custom-sort-icon-example-3',
108
  multiColumnSorting: {
109
    initialConfig: [
110
      {
111
        column: 0,
112
        sortOrder: 'asc',
113
      },
114
      {
115
        column: 1,
116
        sortOrder: 'desc',
117
      },
118
      {
119
        column: 2,
120
        sortOrder: 'asc',
121
      },
122
      {
123
        column: 3,
124
        sortOrder: 'desc',
125
      },
126
      {
127
        column: 4,
128
        sortOrder: 'asc',
129
      },
130
      {
131
        column: 5,
132
        sortOrder: 'desc',
133
      },
134
      {
135
        column: 6,
136
        sortOrder: 'asc',
137
      },
138
    ],
139
  },
140
  height: 'auto',
141
  stretchH: 'all',
142
  autoWrapRow: true,
143
  autoWrapCol: true,
144
  licenseKey: 'non-commercial-and-evaluation',
145
});

1
import Handsontable from 'handsontable/base';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// Register all Handsontable's modules.
5
registerAllModules();
6

7
const container = document.querySelector('#exampleCustomSortIcons3')!;
8

9
new Handsontable(container, {
10
  data: [
11
    {
12
      brand: 'Jetpulse',
13
      model: 'Racing Socks',
14
      color: 'White',
15
      price: 30,
16
      sellDate: '2023-10-11',
17
      sellTime: '01:23',
18
      inStock: false,
19
    },
20
    {
21
      brand: 'Gigabox',
22
      model: 'HL Frame',
23
      color: 'Black',
24
      price: 1890.9,
25
      sellDate: '2023-05-03',
26
      sellTime: '11:27',
27
      inStock: false,
28
    },
29
    {
30
      brand: 'Camido',
31
      model: 'Cycling Cap',
32
      color: 'Red',
33
      price: 130.1,
34
      sellDate: '2023-03-27',
35
      sellTime: '03:17',
36
      inStock: true,
37
    },
38
    {
39
      brand: 'Chatterpoint',
40
      model: 'Road Tire Tube',
41
      color: 'Green',
42
      price: 59,
43
      sellDate: '2023-08-28',
44
      sellTime: '08:01',
45
      inStock: true,
46
    },
47
    {
48
      brand: 'Eidel',
49
      model: 'HL Road Tire',
50
      color: 'Blue',
51
      price: 279.99,
52
      sellDate: '2023-10-02',
53
      sellTime: '13:23',
54
      inStock: true,
55
    },
56
  ],
57
  columns: [
58
    {
59
      title: 'Brand',
60
      type: 'text',
61
      data: 'brand',
62
    },
63
    {
64
      title: 'Model',
65
      type: 'text',
66
      data: 'model',
67
    },
68
    {
69
      title: 'Color',
70
      type: 'text',
71
      data: 'color',
72
    },
73
    {
74
      title: 'Price',
75
      type: 'numeric',
76
      data: 'price',
77
      locale: 'en-US',
78
      numericFormat: {
79
        style: 'currency',
80
        currency: 'USD',
81
        minimumFractionDigits: 2,
82
      },
83
    },
84
    {
85
      title: 'Date',
86
      type: 'intl-date',
87
      data: 'sellDate',
88
      locale: 'en-US',
89
      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
90
      className: 'htRight',
91
    },
92
    {
93
      title: 'Time',
94
      type: 'intl-time',
95
      data: 'sellTime',
96
      locale: 'en-US',
97
      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
98
      className: 'htRight',
99
    },
100
    {
101
      title: 'In stock',
102
      type: 'checkbox',
103
      data: 'inStock',
104
      className: 'htCenter',
105
    },
106
  ],
107
  className: 'custom-sort-icon-example-3',
108
  multiColumnSorting: {
109
    initialConfig: [
110
      {
111
        column: 0,
112
        sortOrder: 'asc',
113
      },
114
      {
115
        column: 1,
116
        sortOrder: 'desc',
117
      },
118
      {
119
        column: 2,
120
        sortOrder: 'asc',
121
      },
122
      {
123
        column: 3,
124
        sortOrder: 'desc',
125
      },
126
      {
127
        column: 4,
128
        sortOrder: 'asc',
129
      },
130
      {
131
        column: 5,
132
        sortOrder: 'desc',
133
      },
134
      {
135
        column: 6,
136
        sortOrder: 'asc',
137
      },
138
    ],
139
  },
140
  height: 'auto',
141
  stretchH: 'all',
142
  autoWrapRow: true,
143
  autoWrapCol: true,
144
  licenseKey: 'non-commercial-and-evaluation',
145
});

1
<div id="exampleCustomSortIcons3"></div>

1
.custom-sort-icon-example-3 .handsontable span.colHeader.columnSorting.sort-1::after {
2
  content: '①';
3
}
4

5
.custom-sort-icon-example-3 .handsontable span.colHeader.columnSorting.sort-2::after {
6
  content: '②';
7
}
8

9
.custom-sort-icon-example-3 .handsontable span.colHeader.columnSorting.sort-3::after {
10
  content: '③';
11
}
12

13
.custom-sort-icon-example-3 .handsontable span.colHeader.columnSorting.sort-4::after {
14
  content: '④';
15
}
16

17
.custom-sort-icon-example-3 .handsontable span.colHeader.columnSorting.sort-5::after {
18
  content: '⑤';
19
}
20

21
.custom-sort-icon-example-3 .handsontable span.colHeader.columnSorting.sort-6::after {
22
  content: '⑥';
23
}
24

25
.custom-sort-icon-example-3 .handsontable span.colHeader.columnSorting.sort-7::after {
26
  content: '⑦';
27
}
28

29
.custom-sort-icon-example-3 .handsontable span.colHeader.columnSorting::after {
30
  width: 10px;
31
  font-size: 10px;
32
}
33

34
.custom-sort-icon-example-3 .handsontable .columnSorting.sortAction:before {
35
  right: 5px;
36
}

Import the sorting module

To reduce bundle size, import only the modules you need. For sorting, you need the base module and the plugin module.

1
// import the base module
2
import Handsontable from 'handsontable/base';
3

4
// import ColumnSorting (or MultiColumnSorting instead)
5
import { registerPlugin, ColumnSorting } from 'handsontable/plugins';
6

7
// register the plugin
8
registerPlugin(ColumnSorting);

Windows	macOS	Action	Excel	Sheets
`Enter`	`Enter`	Sort by the focused column, cycling through ascending, descending, and original order	✗	✗
`Shift`+`Enter`	`Shift`+`Enter`	Append the focused column to the active sort criteria. Requires the `MultiColumnSorting` plugin.	✗	✗

API reference

For the full list of options, methods, and hooks related to sorting, see the following API reference pages:

Troubleshooting

Didn’t find what you need? Try this:

View related topics

Report an issue

Start a discussion

Contact our technical support

Rows sorting

Rows sorting

Overview

Sorting demo

Enable sorting

Configure sorting

Sort different types of data

Set an initial sort order

Add a custom comparator

Use sorting hooks

Exclude rows from sorting

Control sorting programmatically

Enable or disable sorting programmatically

Sort data programmatically

MultiColumnSorting plugin

Enable multi-column sorting

Configure multi-column sorting options

Sort by multiple columns

Set an initial multi-column sort order

Sort by multiple columns programmatically

Add custom sort icons

Import the sorting module

Related keyboard shortcuts

API reference

Troubleshooting