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 { HotTable } from '@handsontable/react-wrapper';
3
import { registerAllModules } from 'handsontable/registry';
4

5
// register Handsontable's modules
6
registerAllModules();
7

8
const ExampleComponent = () => {
9
  return (
10
    <HotTable
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
    />
106
  );
107
};
108

109
export default ExampleComponent;

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

5
// register Handsontable's modules
6
registerAllModules();
7

8
const ExampleComponent = () => {
9
  return (
10
    <HotTable
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
    />
106
  );
107
};
108

109
export default ExampleComponent;

Enable sorting

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

1
<HotTable
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 { HotTable } from '@handsontable/react-wrapper';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// register Handsontable's modules
5
registerAllModules();
6

7
const ExampleComponent = () => {
8
  return (
9
    <HotTable
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
    />
117
  );
118
};
119

120
export default ExampleComponent;

1
import { HotTable } from '@handsontable/react-wrapper';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// register Handsontable's modules
5
registerAllModules();
6

7
const ExampleComponent = () => {
8
  return (
9
    <HotTable
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
    />
117
  );
118
};
119

120
export default ExampleComponent;

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
<HotTable
2
  columnSorting={{
3
    headerAction: true,
4
    sortEmptyCells: false,
5
    indicator: true,
6
    initialConfig: {
7
      column: 1,
8
      sortOrder: 'desc',
9
    },
10
    compareFunctionFactory(sortOrder, columnMeta) {
11
      return function(value, nextValue) {
12
        // return -1, 0, or 1
13
      };
14
    },
15
  }}
16
/>

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

1
<HotTable
2
  columnSorting={true}
3
  columns={[
4
    {
5
      columnSorting: {
6
        indicator: false,
7
        headerAction: false,
8
      },
9
    },
10
  ]}
11
/>

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 { HotTable } from '@handsontable/react-wrapper';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// register Handsontable's modules
5
registerAllModules();
6

7
const ExampleComponent = () => {
8
  return (
9
    <HotTable
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
    />
136
  );
137
};
138

139
export default ExampleComponent;

1
import { HotTable } from '@handsontable/react-wrapper';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// register Handsontable's modules
5
registerAllModules();
6

7
const ExampleComponent = () => {
8
  return (
9
    <HotTable
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
    />
136
  );
137
};
138

139
export default ExampleComponent;

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
<HotTable
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
<HotTable
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
<HotTable
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
// you need `useRef` to call Handsontable's instance methods
2
import { useRef } from 'react';
3
import { HotTable } from '@handsontable/react-wrapper';
4
import { registerAllModules } from 'handsontable/registry';
5

6
// register Handsontable's modules
7
registerAllModules();
8

9
const ExampleComponent = () => {
10
  const hotTableComponentRef = useRef(null);
11
  const exclude = () => {
12
    const handsontableInstance = hotTableComponentRef.current?.hotInstance;
13
    const lastRowIndex = (handsontableInstance?.countRows() || 0) - 1;
14

15
    // after each sorting, take row 1 and change its index to 0
16
    handsontableInstance?.rowIndexMapper.moveIndexes(handsontableInstance.toVisualRow(0), 0);
17
    // after each sorting, take row 16 and change its index to 15
18
    handsontableInstance?.rowIndexMapper.moveIndexes(handsontableInstance.toVisualRow(lastRowIndex), lastRowIndex);
19
  };
20

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

198
          if (row === 0) {
199
            return {
200
              type: 'text',
201
              className: 'htCenter',
202
              readOnly: true,
203
            };
204
          }
205

206
          if (row === lastRowIndex) {
207
            return {
208
              type: 'numeric',
209
              className: 'htCenter',
210
            };
211
          }
212
        }
213

214
        return {};
215
      }}
216
      columnSummary={[
217
        {
218
          sourceColumn: 2,
219
          type: 'sum',
220
          reversedRowCoords: true,
221
          destinationRow: 0,
222
          destinationColumn: 2,
223
          forceNumeric: true,
224
          suppressDataTypeErrors: true,
225
        },
226
        {
227
          sourceColumn: 5,
228
          type: 'sum',
229
          reversedRowCoords: true,
230
          destinationRow: 0,
231
          destinationColumn: 5,
232
          forceNumeric: true,
233
          suppressDataTypeErrors: true,
234
        },
235
      ]}
236
      autoWrapRow={true}
237
      autoWrapCol={true}
238
      licenseKey="non-commercial-and-evaluation"
239
    />
240
  );
241
};
242

243
export default ExampleComponent;

1
// you need `useRef` to call Handsontable's instance methods
2
import { useRef } from 'react';
3
import { HotTable, HotTableRef } from '@handsontable/react-wrapper';
4
import { registerAllModules } from 'handsontable/registry';
5

6
// register Handsontable's modules
7
registerAllModules();
8

9
const ExampleComponent = () => {
10
  const hotTableComponentRef = useRef<HotTableRef>(null);
11
  const exclude = () => {
12
    const handsontableInstance = hotTableComponentRef.current?.hotInstance;
13
    const lastRowIndex = (handsontableInstance?.countRows() || 0) - 1;
14

15
    // after each sorting, take row 1 and change its index to 0
16
    handsontableInstance?.rowIndexMapper.moveIndexes(handsontableInstance.toVisualRow(0), 0);
17
    // after each sorting, take row 16 and change its index to 15
18
    handsontableInstance?.rowIndexMapper.moveIndexes(handsontableInstance.toVisualRow(lastRowIndex), lastRowIndex);
19
  };
20

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

198
          if (row === 0) {
199
            return {
200
              type: 'text',
201
              className: 'htCenter',
202
              readOnly: true,
203
            };
204
          }
205

206
          if (row === lastRowIndex) {
207
            return {
208
              type: 'numeric',
209
              className: 'htCenter',
210
            };
211
          }
212
        }
213

214
        return {};
215
      }}
216
      columnSummary={[
217
        {
218
          sourceColumn: 2,
219
          type: 'sum',
220
          reversedRowCoords: true,
221
          destinationRow: 0,
222
          destinationColumn: 2,
223
          forceNumeric: true,
224
          suppressDataTypeErrors: true,
225
        },
226
        {
227
          sourceColumn: 5,
228
          type: 'sum',
229
          reversedRowCoords: true,
230
          destinationRow: 0,
231
          destinationColumn: 5,
232
          forceNumeric: true,
233
          suppressDataTypeErrors: true,
234
        },
235
      ]}
236
      autoWrapRow={true}
237
      autoWrapCol={true}
238
      licenseKey="non-commercial-and-evaluation"
239
    />
240
  );
241
};
242

243
export default ExampleComponent;

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.

To access Handsontable’s API methods from a React component, see Instance methods.

Enable or disable sorting programmatically

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

1
const hotTableComponentRef = useRef(null);
2

3
// enable sorting for all columns
4
hotTableComponentRef.current.hotInstance.updateSettings({
5
  columnSorting: true,
6
});
7

8
// disable sorting for all columns
9
hotTableComponentRef.current.hotInstance.updateSettings({
10
  columnSorting: false,
11
});
12

13
// enable sorting on column 0, disable sorting on column 1
14
hotTableComponentRef.current.hotInstance.updateSettings({
15
  columns: [
16
    { columnSorting: { headerAction: true } },
17
    { columnSorting: { headerAction: false } },
18
  ],
19
});

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 hotTableComponentRef = useRef(null);
2
const columnSorting = hotTableComponentRef.current.hotInstance.getPlugin('columnSorting');
3

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

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

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

1
import { useRef } from 'react';
2
import { HotTable } from '@handsontable/react-wrapper';
3
import { registerAllModules } from 'handsontable/registry';
4

5
// register Handsontable's modules
6
registerAllModules();
7

8
const ExampleComponent = () => {
9
  const hotTableComponentRef = useRef(null);
10
  const sortAsc = () => {
11
    // get the `ColumnSorting` plugin
12
    const columnSorting = hotTableComponentRef.current?.hotInstance?.getPlugin('columnSorting');
13

14
    columnSorting?.sort({
15
      column: 0,
16
      sortOrder: 'asc',
17
    });
18
  };
19

20
  const unsort = () => {
21
    // get the `ColumnSorting` plugin
22
    const columnSorting = hotTableComponentRef.current?.hotInstance?.getPlugin('columnSorting');
23

24
    columnSorting?.clearSort();
25
  };
26

27
  return (
28
    <>
29
      <div className="example-controls-container">
30
        <div className="controls">
31
          <button onClick={sortAsc}>Sort by the "Brand" column, in ascending order</button>
32
          <button onClick={unsort}>Go back to the original order</button>
33
        </div>
34
      </div>
35
      <HotTable
36
        ref={hotTableComponentRef}
37
        data={[
38
          {
39
            brand: 'Jetpulse',
40
            model: 'Racing Socks',
41
            price: 30,
42
            sellDate: '2023-10-11',
43
            sellTime: '01:23',
44
            inStock: false,
45
          },
46
          {
47
            brand: 'Gigabox',
48
            model: 'HL Mountain Frame',
49
            price: 1890.9,
50
            sellDate: '2023-05-03',
51
            sellTime: '11:27',
52
            inStock: false,
53
          },
54
          {
55
            brand: 'Camido',
56
            model: 'Cycling Cap',
57
            price: 130.1,
58
            sellDate: '2023-03-27',
59
            sellTime: '03:17',
60
            inStock: true,
61
          },
62
          {
63
            brand: 'Chatterpoint',
64
            model: 'Road Tire Tube',
65
            price: 59,
66
            sellDate: '2023-08-28',
67
            sellTime: '08:01',
68
            inStock: true,
69
          },
70
          {
71
            brand: 'Eidel',
72
            model: 'HL Road Tire',
73
            price: 279.99,
74
            sellDate: '2023-10-02',
75
            sellTime: '13:23',
76
            inStock: true,
77
          },
78
        ]}
79
        columns={[
80
          {
81
            title: 'Brand',
82
            type: 'text',
83
            data: 'brand',
84
          },
85
          {
86
            title: 'Model',
87
            type: 'text',
88
            data: 'model',
89
          },
90
          {
91
            title: 'Price',
92
            type: 'numeric',
93
            data: 'price',
94
            locale: 'en-US',
95
            numericFormat: {
96
              style: 'currency',
97
              currency: 'USD',
98
              minimumFractionDigits: 2,
99
            },
100
          },
101
          {
102
            title: 'Date',
103
            type: 'intl-date',
104
            data: 'sellDate',
105
            locale: 'en-US',
106
            dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
107
            className: 'htRight',
108
          },
109
          {
110
            title: 'Time',
111
            type: 'intl-time',
112
            data: 'sellTime',
113
            locale: 'en-US',
114
            timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
115
            className: 'htRight',
116
          },
117
          {
118
            title: 'In stock',
119
            type: 'checkbox',
120
            data: 'inStock',
121
            className: 'htCenter',
122
          },
123
        ]}
124
        columnSorting={true}
125
        height="auto"
126
        stretchH="all"
127
        autoWrapRow={true}
128
        autoWrapCol={true}
129
        licenseKey="non-commercial-and-evaluation"
130
      />
131
    </>
132
  );
133
};
134

135
export default ExampleComponent;

1
import { useRef } from 'react';
2
import { HotTable, HotTableRef } from '@handsontable/react-wrapper';
3
import { registerAllModules } from 'handsontable/registry';
4

5
// register Handsontable's modules
6
registerAllModules();
7

8
const ExampleComponent = () => {
9
  const hotTableComponentRef = useRef<HotTableRef>(null);
10
  const sortAsc = () => {
11
    // get the `ColumnSorting` plugin
12
    const columnSorting = hotTableComponentRef.current?.hotInstance?.getPlugin('columnSorting');
13

14
    columnSorting?.sort({
15
      column: 0,
16
      sortOrder: 'asc',
17
    });
18
  };
19

20
  const unsort = () => {
21
    // get the `ColumnSorting` plugin
22
    const columnSorting = hotTableComponentRef.current?.hotInstance?.getPlugin('columnSorting');
23

24
    columnSorting?.clearSort();
25
  };
26

27
  return (
28
    <>
29
      <div className="example-controls-container">
30
        <div className="controls">
31
          <button onClick={sortAsc}>Sort by the "Brand" column, in ascending order</button>
32
          <button onClick={unsort}>Go back to the original order</button>
33
        </div>
34
      </div>
35
      <HotTable
36
        ref={hotTableComponentRef}
37
        data={[
38
          {
39
            brand: 'Jetpulse',
40
            model: 'Racing Socks',
41
            price: 30,
42
            sellDate: '2023-10-11',
43
            sellTime: '01:23',
44
            inStock: false,
45
          },
46
          {
47
            brand: 'Gigabox',
48
            model: 'HL Mountain Frame',
49
            price: 1890.9,
50
            sellDate: '2023-05-03',
51
            sellTime: '11:27',
52
            inStock: false,
53
          },
54
          {
55
            brand: 'Camido',
56
            model: 'Cycling Cap',
57
            price: 130.1,
58
            sellDate: '2023-03-27',
59
            sellTime: '03:17',
60
            inStock: true,
61
          },
62
          {
63
            brand: 'Chatterpoint',
64
            model: 'Road Tire Tube',
65
            price: 59,
66
            sellDate: '2023-08-28',
67
            sellTime: '08:01',
68
            inStock: true,
69
          },
70
          {
71
            brand: 'Eidel',
72
            model: 'HL Road Tire',
73
            price: 279.99,
74
            sellDate: '2023-10-02',
75
            sellTime: '13:23',
76
            inStock: true,
77
          },
78
        ]}
79
        columns={[
80
          {
81
            title: 'Brand',
82
            type: 'text',
83
            data: 'brand',
84
          },
85
          {
86
            title: 'Model',
87
            type: 'text',
88
            data: 'model',
89
          },
90
          {
91
            title: 'Price',
92
            type: 'numeric',
93
            data: 'price',
94
            locale: 'en-US',
95
            numericFormat: {
96
              style: 'currency',
97
              currency: 'USD',
98
              minimumFractionDigits: 2,
99
            },
100
          },
101
          {
102
            title: 'Date',
103
            type: 'intl-date',
104
            data: 'sellDate',
105
            locale: 'en-US',
106
            dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
107
            className: 'htRight',
108
          },
109
          {
110
            title: 'Time',
111
            type: 'intl-time',
112
            data: 'sellTime',
113
            locale: 'en-US',
114
            timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
115
            className: 'htRight',
116
          },
117
          {
118
            title: 'In stock',
119
            type: 'checkbox',
120
            data: 'inStock',
121
            className: 'htCenter',
122
          },
123
        ]}
124
        columnSorting={true}
125
        height="auto"
126
        stretchH="all"
127
        autoWrapRow={true}
128
        autoWrapCol={true}
129
        licenseKey="non-commercial-and-evaluation"
130
      />
131
    </>
132
  );
133
};
134

135
export default ExampleComponent;

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
<HotTable
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
<HotTable
2
  multiColumnSorting={true}
3
  columns={[
4
    {
5
      multiColumnSorting: {
6
        headerAction: false,
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 { HotTable } from '@handsontable/react-wrapper';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// register Handsontable's modules
5
registerAllModules();
6

7
const ExampleComponent = () => {
8
  return (
9
    <HotTable
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
    />
105
  );
106
};
107

108
export default ExampleComponent;

1
import { HotTable } from '@handsontable/react-wrapper';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// register Handsontable's modules
5
registerAllModules();
6

7
const ExampleComponent = () => {
8
  return (
9
    <HotTable
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
    />
105
  );
106
};
107

108
export default ExampleComponent;

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 { HotTable } from '@handsontable/react-wrapper';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// register Handsontable's modules
5
registerAllModules();
6

7
const ExampleComponent = () => {
8
  return (
9
    <HotTable
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
          {
100
            // at initialization, sort the data by the 'Brand' column, in ascending order
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
    />
117
  );
118
};
119

120
export default ExampleComponent;

1
import { HotTable } from '@handsontable/react-wrapper';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// register Handsontable's modules
5
registerAllModules();
6

7
const ExampleComponent = () => {
8
  return (
9
    <HotTable
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
          {
100
            // at initialization, sort the data by the 'Brand' column, in ascending order
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
    />
117
  );
118
};
119

120
export default ExampleComponent;

1
<HotTable
2
  multiColumnSorting={{
3
    initialConfig: [
4
      { column: 0, sortOrder: 'asc' },
5
      { column: 1, sortOrder: 'desc' },
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 hotTableComponentRef = useRef(null);
2
const multiColumnSorting = hotTableComponentRef.current.hotInstance.getPlugin('multiColumnSorting');
3

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

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

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

1
import { useRef } from 'react';
2
import { HotTable } from '@handsontable/react-wrapper';
3
import { registerAllModules } from 'handsontable/registry';
4

5
// register Handsontable's modules
6
registerAllModules();
7

8
const ExampleComponent = () => {
9
  const hotTableComponentRef = useRef(null);
10
  const sort = () => {
11
    // get the `MultiColumnSorting` plugin
12
    const multiColumnSorting = hotTableComponentRef.current?.hotInstance?.getPlugin('multiColumnSorting');
13

14
    multiColumnSorting?.sort([
15
      {
16
        column: 0,
17
        sortOrder: 'asc',
18
      },
19
      {
20
        column: 1,
21
        sortOrder: 'desc',
22
      },
23
    ]);
24
  };
25

26
  return (
27
    <>
28
      <HotTable
29
        ref={hotTableComponentRef}
30
        data={[
31
          {
32
            brand: 'Jetpulse',
33
            model: 'Racing Socks',
34
            price: 30,
35
            sellDate: '2023-10-11',
36
            sellTime: '01:23',
37
            inStock: false,
38
          },
39
          {
40
            brand: 'Jetpulse',
41
            model: 'HL Mountain Frame',
42
            price: 1890.9,
43
            sellDate: '2023-05-03',
44
            sellTime: '11:27',
45
            inStock: false,
46
          },
47
          {
48
            brand: 'Jetpulse',
49
            model: 'Cycling Cap',
50
            price: 130.1,
51
            sellDate: '2023-03-27',
52
            sellTime: '03:17',
53
            inStock: true,
54
          },
55
          {
56
            brand: 'Chatterpoint',
57
            model: 'Road Tire Tube',
58
            price: 59,
59
            sellDate: '2023-08-28',
60
            sellTime: '08:01',
61
            inStock: true,
62
          },
63
          {
64
            brand: 'Chatterpoint',
65
            model: 'HL Road Tire',
66
            price: 279.99,
67
            sellDate: '2023-10-02',
68
            sellTime: '13:23',
69
            inStock: true,
70
          },
71
        ]}
72
        columns={[
73
          {
74
            title: 'Brand',
75
            type: 'text',
76
            data: 'brand',
77
          },
78
          {
79
            title: 'Model',
80
            type: 'text',
81
            data: 'model',
82
          },
83
          {
84
            title: 'Price',
85
            type: 'numeric',
86
            data: 'price',
87
            locale: 'en-US',
88
            numericFormat: {
89
              style: 'currency',
90
              currency: 'USD',
91
              minimumFractionDigits: 2,
92
            },
93
          },
94
          {
95
            title: 'Date',
96
            type: 'intl-date',
97
            data: 'sellDate',
98
            locale: 'en-US',
99
            dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
100
            className: 'htRight',
101
          },
102
          {
103
            title: 'Time',
104
            type: 'intl-time',
105
            data: 'sellTime',
106
            locale: 'en-US',
107
            timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
108
            className: 'htRight',
109
          },
110
          {
111
            title: 'In stock',
112
            type: 'checkbox',
113
            data: 'inStock',
114
            className: 'htCenter',
115
          },
116
        ]}
117
        multiColumnSorting={true}
118
        height="auto"
119
        stretchH="all"
120
        autoWrapRow={true}
121
        autoWrapCol={true}
122
        licenseKey="non-commercial-and-evaluation"
123
      />
124
      <div className="controls">
125
        <button onClick={sort}>Sort</button>
126
      </div>
127
    </>
128
  );
129
};
130

131
export default ExampleComponent;

1
import { useRef } from 'react';
2
import { HotTable, HotTableRef } from '@handsontable/react-wrapper';
3
import { registerAllModules } from 'handsontable/registry';
4

5
// register Handsontable's modules
6
registerAllModules();
7

8
const ExampleComponent = () => {
9
  const hotTableComponentRef = useRef<HotTableRef>(null);
10
  const sort = () => {
11
    // get the `MultiColumnSorting` plugin
12
    const multiColumnSorting = hotTableComponentRef.current?.hotInstance?.getPlugin('multiColumnSorting');
13

14
    multiColumnSorting?.sort([
15
      {
16
        column: 0,
17
        sortOrder: 'asc',
18
      },
19
      {
20
        column: 1,
21
        sortOrder: 'desc',
22
      },
23
    ]);
24
  };
25

26
  return (
27
    <>
28
      <HotTable
29
        ref={hotTableComponentRef}
30
        data={[
31
          {
32
            brand: 'Jetpulse',
33
            model: 'Racing Socks',
34
            price: 30,
35
            sellDate: '2023-10-11',
36
            sellTime: '01:23',
37
            inStock: false,
38
          },
39
          {
40
            brand: 'Jetpulse',
41
            model: 'HL Mountain Frame',
42
            price: 1890.9,
43
            sellDate: '2023-05-03',
44
            sellTime: '11:27',
45
            inStock: false,
46
          },
47
          {
48
            brand: 'Jetpulse',
49
            model: 'Cycling Cap',
50
            price: 130.1,
51
            sellDate: '2023-03-27',
52
            sellTime: '03:17',
53
            inStock: true,
54
          },
55
          {
56
            brand: 'Chatterpoint',
57
            model: 'Road Tire Tube',
58
            price: 59,
59
            sellDate: '2023-08-28',
60
            sellTime: '08:01',
61
            inStock: true,
62
          },
63
          {
64
            brand: 'Chatterpoint',
65
            model: 'HL Road Tire',
66
            price: 279.99,
67
            sellDate: '2023-10-02',
68
            sellTime: '13:23',
69
            inStock: true,
70
          },
71
        ]}
72
        columns={[
73
          {
74
            title: 'Brand',
75
            type: 'text',
76
            data: 'brand',
77
          },
78
          {
79
            title: 'Model',
80
            type: 'text',
81
            data: 'model',
82
          },
83
          {
84
            title: 'Price',
85
            type: 'numeric',
86
            data: 'price',
87
            locale: 'en-US',
88
            numericFormat: {
89
              style: 'currency',
90
              currency: 'USD',
91
              minimumFractionDigits: 2,
92
            },
93
          },
94
          {
95
            title: 'Date',
96
            type: 'intl-date',
97
            data: 'sellDate',
98
            locale: 'en-US',
99
            dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
100
            className: 'htRight',
101
          },
102
          {
103
            title: 'Time',
104
            type: 'intl-time',
105
            data: 'sellTime',
106
            locale: 'en-US',
107
            timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
108
            className: 'htRight',
109
          },
110
          {
111
            title: 'In stock',
112
            type: 'checkbox',
113
            data: 'inStock',
114
            className: 'htCenter',
115
          },
116
        ]}
117
        multiColumnSorting={true}
118
        height="auto"
119
        stretchH="all"
120
        autoWrapRow={true}
121
        autoWrapCol={true}
122
        licenseKey="non-commercial-and-evaluation"
123
      />
124
      <div className="controls">
125
        <button onClick={sort}>Sort</button>
126
      </div>
127
    </>
128
  );
129
};
130

131
export default ExampleComponent;

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 { HotTable } from '@handsontable/react-wrapper';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// register Handsontable's modules
5
registerAllModules();
6

7
const ExampleComponent = () => {
8
  return (
9
    <HotTable
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
      columnSorting={{
98
        initialConfig: {
99
          column: 1,
100
          sortOrder: 'desc',
101
        },
102
      }}
103
      className="custom-sort-icon-example-1"
104
      height="auto"
105
      stretchH="all"
106
      autoWrapRow={true}
107
      autoWrapCol={true}
108
      licenseKey="non-commercial-and-evaluation"
109
    />
110
  );
111
};
112

113
export default ExampleComponent;

1
import { HotTable } from '@handsontable/react-wrapper';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// register Handsontable's modules
5
registerAllModules();
6

7
const ExampleComponent = () => {
8
  return (
9
    <HotTable
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
      columnSorting={{
98
        initialConfig: {
99
          column: 1,
100
          sortOrder: 'desc',
101
        },
102
      }}
103
      className="custom-sort-icon-example-1"
104
      height="auto"
105
      stretchH="all"
106
      autoWrapRow={true}
107
      autoWrapCol={true}
108
      licenseKey="non-commercial-and-evaluation"
109
    />
110
  );
111
};
112

113
export default ExampleComponent;

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 { HotTable } from '@handsontable/react-wrapper';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// register Handsontable's modules
5
registerAllModules();
6

7
const ExampleComponent = () => {
8
  return (
9
    <HotTable
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
      multiColumnSorting={{
108
        initialConfig: [
109
          {
110
            column: 0,
111
            sortOrder: 'asc',
112
          },
113
          {
114
            column: 1,
115
            sortOrder: 'desc',
116
          },
117
          {
118
            column: 2,
119
            sortOrder: 'asc',
120
          },
121
          {
122
            column: 3,
123
            sortOrder: 'desc',
124
          },
125
          {
126
            column: 4,
127
            sortOrder: 'asc',
128
          },
129
          {
130
            column: 5,
131
            sortOrder: 'desc',
132
          },
133
          {
134
            column: 6,
135
            sortOrder: 'asc',
136
          },
137
        ],
138
      }}
139
      className="custom-sort-icon-example-3"
140
      height="auto"
141
      stretchH="all"
142
      autoWrapRow={true}
143
      autoWrapCol={true}
144
      licenseKey="non-commercial-and-evaluation"
145
    />
146
  );
147
};
148

149
export default ExampleComponent;

1
import { HotTable } from '@handsontable/react-wrapper';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// register Handsontable's modules
5
registerAllModules();
6

7
const ExampleComponent = () => {
8
  return (
9
    <HotTable
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
      multiColumnSorting={{
108
        initialConfig: [
109
          {
110
            column: 0,
111
            sortOrder: 'asc',
112
          },
113
          {
114
            column: 1,
115
            sortOrder: 'desc',
116
          },
117
          {
118
            column: 2,
119
            sortOrder: 'asc',
120
          },
121
          {
122
            column: 3,
123
            sortOrder: 'desc',
124
          },
125
          {
126
            column: 4,
127
            sortOrder: 'asc',
128
          },
129
          {
130
            column: 5,
131
            sortOrder: 'desc',
132
          },
133
          {
134
            column: 6,
135
            sortOrder: 'asc',
136
          },
137
        ],
138
      }}
139
      className="custom-sort-icon-example-3"
140
      height="auto"
141
      stretchH="all"
142
      autoWrapRow={true}
143
      autoWrapCol={true}
144
      licenseKey="non-commercial-and-evaluation"
145
    />
146
  );
147
};
148

149
export default ExampleComponent;

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