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
/* file: app.component.ts */
2
import { Component } from '@angular/core';
3
import { GridSettings } from '@handsontable/angular-wrapper';
4

5
@Component({
6
  selector: 'app-example1',
7
  template: `
8
    <hot-table
9
      [settings]="hotSettings!" [data]="hotData">
10
    </hot-table>
11
  `,
12
  standalone: false
13
})
14
export class AppComponent {
15

16
  readonly hotData = [
17
    {
18
      brand: 'Jetpulse',
19
      model: 'Racing Socks',
20
      price: 30,
21
      sellDate: '2023-10-11',
22
      sellTime: '01:23',
23
      inStock: false,
24
    },
25
    {
26
      brand: 'Gigabox',
27
      model: 'HL Mountain Frame',
28
      price: 1890.9,
29
      sellDate: '2023-05-03',
30
      sellTime: '11:27',
31
      inStock: false,
32
    },
33
    {
34
      brand: 'Camido',
35
      model: 'Cycling Cap',
36
      price: 130.1,
37
      sellDate: '2023-03-27',
38
      sellTime: '03:17',
39
      inStock: true,
40
    },
41
    {
42
      brand: 'Chatterpoint',
43
      model: 'Road Tire Tube',
44
      price: 59,
45
      sellDate: '2023-08-28',
46
      sellTime: '08:01',
47
      inStock: true,
48
    },
49
    {
50
      brand: 'Eidel',
51
      model: 'HL Road Tire',
52
      price: 279.99,
53
      sellDate: '2023-10-02',
54
      sellTime: '13:23',
55
      inStock: true,
56
    },
57
  ];
58

59
  readonly hotSettings: GridSettings = {
60
    columns: [
61
      {
62
        title: 'Brand',
63
        type: 'text',
64
        data: 'brand',
65
      },
66
      {
67
        title: 'Model',
68
        type: 'text',
69
        data: 'model',
70
      },
71
      {
72
        title: 'Price',
73
        type: 'numeric',
74
        data: 'price',
75
        locale: 'en-US',
76
        numericFormat: {
77
          style: 'currency',
78
          currency: 'USD',
79
          minimumFractionDigits: 2,
80
        },
81
      },
82
      {
83
        title: 'Date',
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',
92
        type: 'intl-time',
93
        data: 'sellTime',
94
        locale: 'en-US',
95
        timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
96
        className: 'htRight',
97
      },
98
      {
99
        title: 'In stock',
100
        type: 'checkbox',
101
        data: 'inStock',
102
        className: 'htCenter',
103
      },
104
    ],
105
    // enable sorting for all columns
106
    columnSorting: true,
107
    height: 'auto',
108
    stretchH: 'all',
109
    autoWrapRow: true,
110
    autoWrapCol: true,
111
  };
112
}
113
/* end-file */
114

115

116
/* file: app.module.ts */
117
import { NgModule, ApplicationConfig } from '@angular/core';
118
import { BrowserModule } from '@angular/platform-browser';
119
import { registerAllModules } from 'handsontable/registry';
120
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, HotTableModule } from '@handsontable/angular-wrapper';
121
import { CommonModule } from '@angular/common';
122
import { NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';
123

124
/* start:skip-in-compilation */
125
import { AppComponent } from './app.component';
126
/* end:skip-in-compilation */
127

128
// register Handsontable's modules
129
registerAllModules();
130

131
export const appConfig: ApplicationConfig = {
132
  providers: [
133
    {
134
      provide: HOT_GLOBAL_CONFIG,
135
      useValue: {
136
        license: NON_COMMERCIAL_LICENSE,
137
      } as HotGlobalConfig
138
    }
139
  ],
140
};
141

142
@NgModule({
143
  imports: [ BrowserModule, HotTableModule, CommonModule ],
144
  declarations: [ AppComponent ],
145
  providers: [...appConfig.providers],
146
  bootstrap: [ AppComponent ]
147
})
148

149
export class AppModule { }
150
/* end-file */

1
<div>
2
    <app-example1></app-example1>
3
</div>

Enable sorting

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

1
import {GridSettings, HotTableModule} from '@handsontable/angular-wrapper';
2

3
const configurationOptions: GridSettings = {
4
  columnSorting: true,
5
};

1
<hot-table [settings]="configurationOptions"></hot-table>

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
/* file: app.component.ts */
2
import { Component } from '@angular/core';
3
import { GridSettings } from '@handsontable/angular-wrapper';
4

5
@Component({
6
  selector: 'app-example2',
7
  template: `
8
    <hot-table
9
      [settings]="hotSettings!" [data]="hotData">
10
    </hot-table>
11
  `,
12
  standalone: false
13
})
14
export class AppComponent {
15

16
  readonly hotData = [
17
    {
18
      brand: 'Jetpulse',
19
      model: 'Racing Socks',
20
      price: 30,
21
      sellDate: '2023-10-11',
22
      sellTime: '01:23',
23
      inStock: false,
24
    },
25
    {
26
      brand: 'Gigabox',
27
      model: 'HL Mountain Frame',
28
      price: 1890.9,
29
      sellDate: '2023-05-03',
30
      sellTime: '11:27',
31
      inStock: false,
32
    },
33
    {
34
      brand: 'Camido',
35
      model: 'Cycling Cap',
36
      price: 130.1,
37
      sellDate: '2023-03-27',
38
      sellTime: '03:17',
39
      inStock: true,
40
    },
41
    {
42
      brand: 'Chatterpoint',
43
      model: 'Road Tire Tube',
44
      price: 59,
45
      sellDate: '2023-08-28',
46
      sellTime: '08:01',
47
      inStock: true,
48
    },
49
    {
50
      brand: 'Eidel',
51
      model: 'HL Road Tire',
52
      price: 279.99,
53
      sellDate: '2023-10-02',
54
      sellTime: '13:23',
55
      inStock: true,
56
    },
57
  ];
58

59
  readonly hotSettings: GridSettings = {
60
// enable sorting for all columns
61
    columnSorting: true,
62
    columns: [
63
      {
64
        title: 'Brand',
65
        type: 'text',
66
        data: 'brand',
67
        // disable sorting for the 'Brand' column
68
        columnSorting: {
69
          headerAction: false,
70
        },
71
      },
72
      {
73
        title: 'Model',
74
        type: 'text',
75
        data: 'model',
76
      },
77
      {
78
        title: 'Price',
79
        type: 'numeric',
80
        data: 'price',
81
        locale: 'en-US',
82
        numericFormat: {
83
          style: 'currency',
84
          currency: 'USD',
85
          minimumFractionDigits: 2,
86
        },
87
        // disable sorting for the 'Price' column
88
        columnSorting: {
89
          headerAction: false,
90
        },
91
      },
92
      {
93
        title: 'Date',
94
        type: 'intl-date',
95
        data: 'sellDate',
96
        locale: 'en-US',
97
        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
98
        className: 'htRight',
99
      },
100
      {
101
        title: 'Time',
102
        type: 'intl-time',
103
        data: 'sellTime',
104
        locale: 'en-US',
105
        timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
106
        className: 'htRight',
107
        // disable sorting for the 'Time' column
108
        columnSorting: {
109
          headerAction: false,
110
        },
111
      },
112
      {
113
        title: 'In stock',
114
        type: 'checkbox',
115
        data: 'inStock',
116
        className: 'htCenter',
117
      },
118
    ],
119
    height: 'auto',
120
    stretchH: 'all',
121
    autoWrapRow: true,
122
    autoWrapCol: true,
123
  };
124
}
125
/* end-file */
126

127

128
/* file: app.module.ts */
129
import { NgModule, ApplicationConfig } from '@angular/core';
130
import { BrowserModule } from '@angular/platform-browser';
131
import { registerAllModules } from 'handsontable/registry';
132
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, HotTableModule } from '@handsontable/angular-wrapper';
133
import { CommonModule } from '@angular/common';
134
import { NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';
135

136
/* start:skip-in-compilation */
137
import { AppComponent } from './app.component';
138
/* end:skip-in-compilation */
139

140
// register Handsontable's modules
141
registerAllModules();
142

143
export const appConfig: ApplicationConfig = {
144
  providers: [
145
    {
146
      provide: HOT_GLOBAL_CONFIG,
147
      useValue: {
148
        license: NON_COMMERCIAL_LICENSE,
149
      } as HotGlobalConfig
150
    }
151
  ],
152
};
153

154
@NgModule({
155
  imports: [ BrowserModule, HotTableModule, CommonModule ],
156
  declarations: [ AppComponent ],
157
  providers: [...appConfig.providers],
158
  bootstrap: [ AppComponent ]
159
})
160

161
export class AppModule { }
162
/* end-file */

1
<div>
2
  <app-example2></app-example2>
3
</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
import {GridSettings, HotTableModule} from '@handsontable/angular-wrapper';
2

3
const configurationOptions: GridSettings = {
4
  columnSorting: {
5
    headerAction: true,
6
    sortEmptyCells: false,
7
    indicator: true,
8
    initialConfig: {
9
      column: 1,
10
      sortOrder: 'desc',
11
    },
12
    compareFunctionFactory(sortOrder, columnMeta) {
13
      return function(value, nextValue) {
14
        // return -1, 0, or 1
15
      };
16
    },
17
  },
18
};

1
<hot-table [settings]="configurationOptions"></hot-table>

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

1
import {GridSettings, HotTableModule} from '@handsontable/angular-wrapper';
2

3
const configurationOptions: GridSettings = {
4
  columnSorting: true,
5
  columns: [
6
    {
7
      columnSorting: {
8
        indicator: false,
9
        headerAction: false,
10
      },
11
    },
12
  ],
13
};

1
<hot-table [settings]="configurationOptions"></hot-table>

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
/* file: app.component.ts */
2
import { Component } from '@angular/core';
3
import { GridSettings } from '@handsontable/angular-wrapper';
4

5
@Component({
6
  selector: 'app-example3',
7
  template: `
8
    <hot-table
9
      [settings]="hotSettings!" [data]="hotData">
10
    </hot-table>
11
  `,
12
  standalone: false
13
})
14
export class AppComponent {
15

16
  readonly hotData = [
17
    {
18
      model: 'Racing Socks',
19
      size: 'S',
20
      price: 30,
21
      sellDate: '2023-10-11',
22
      sellTime: '01:23',
23
      inStock: false,
24
      color: 'Black',
25
      email: '8576@all.xyz',
26
    },
27
    {
28
      model: 'HL Mountain Shirt',
29
      size: 'XS',
30
      price: 1890.9,
31
      sellDate: '2023-05-03',
32
      sellTime: '11:27',
33
      inStock: false,
34
      color: 'White',
35
      email: 'tayn@all.xyz',
36
    },
37
    {
38
      model: 'Cycling Cap',
39
      size: 'L',
40
      price: 130.1,
41
      sellDate: '2023-03-27',
42
      sellTime: '03:17',
43
      inStock: true,
44
      color: 'Green',
45
      email: '6lights@far.com',
46
    },
47
    {
48
      model: 'Ski Jacket',
49
      size: 'M',
50
      price: 59,
51
      sellDate: '2023-08-28',
52
      sellTime: '08:01',
53
      inStock: true,
54
      color: 'Blue',
55
      email: 'raj@fq1my2c.com',
56
    },
57
    {
58
      model: 'HL Goggles',
59
      size: 'XL',
60
      price: 279.99,
61
      sellDate: '2023-10-02',
62
      sellTime: '13:23',
63
      inStock: true,
64
      color: 'Black',
65
      email: 'da@pdc.ga',
66
    },
67
  ];
68

69
  readonly hotSettings: GridSettings = {
70
    columns: [
71
      {
72
        title: 'Model<br>(text)',
73
        // set the type of the 'Model' column
74
        type: 'text',
75
        data: 'model',
76
      },
77
      {
78
        title: 'Price<br>(numeric)',
79
        // set the type of the 'Price' column
80
        type: 'numeric',
81
        data: 'price',
82
        locale: 'en-US',
83
        numericFormat: {
84
          style: 'currency',
85
          currency: 'USD',
86
          minimumFractionDigits: 2,
87
        },
88
      },
89
      {
90
        title: 'Sold on<br>(date)',
91
        // set the type of the 'Date' column
92
        type: 'intl-date',
93
        data: 'sellDate',
94
        locale: 'en-US',
95
        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
96
        className: 'htRight',
97
      },
98
      {
99
        title: 'Time<br>(time)',
100
        // set the type of the 'Time' column
101
        type: 'intl-time',
102
        data: 'sellTime',
103
        locale: 'en-US',
104
        timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
105
        className: 'htRight',
106
      },
107
      {
108
        title: 'In stock<br>(checkbox)',
109
        // set the type of the 'In stock' column
110
        type: 'checkbox',
111
        data: 'inStock',
112
        className: 'htCenter',
113
      },
114
      {
115
        title: 'Size<br>(dropdown)',
116
        // set the type of the 'Size' column
117
        type: 'dropdown',
118
        data: 'size',
119
        source: ['XS', 'S', 'M', 'L', 'XL'],
120
        className: 'htCenter',
121
      },
122
      {
123
        title: 'Color<br>(autocomplete)',
124
        // set the type of the 'Size' column
125
        type: 'autocomplete',
126
        data: 'color',
127
        source: ['White', 'Black', 'Yellow', 'Blue', 'Green'],
128
        className: 'htCenter',
129
      },
130
      {
131
        title: 'Email<br>(password)',
132
        // set the type of the 'Email' column
133
        type: 'password',
134
        data: 'email',
135
      },
136
    ],
137
    columnSorting: true,
138
    height: 'auto',
139
    stretchH: 'all',
140
    autoWrapRow: true,
141
    autoWrapCol: true,
142
  };
143
}
144
/* end-file */
145

146

147
/* file: app.module.ts */
148
import { NgModule, ApplicationConfig } from '@angular/core';
149
import { BrowserModule } from '@angular/platform-browser';
150
import { registerAllModules } from 'handsontable/registry';
151
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, HotTableModule } from '@handsontable/angular-wrapper';
152
import { CommonModule } from '@angular/common';
153
import { NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';
154

155
/* start:skip-in-compilation */
156
import { AppComponent } from './app.component';
157
/* end:skip-in-compilation */
158

159
// register Handsontable's modules
160
registerAllModules();
161

162
export const appConfig: ApplicationConfig = {
163
  providers: [
164
    {
165
      provide: HOT_GLOBAL_CONFIG,
166
      useValue: {
167
        license: NON_COMMERCIAL_LICENSE,
168
      } as HotGlobalConfig
169
    }
170
  ],
171
};
172

173
@NgModule({
174
  imports: [ BrowserModule, HotTableModule, CommonModule ],
175
  declarations: [ AppComponent ],
176
  providers: [...appConfig.providers],
177
  bootstrap: [ AppComponent ]
178
})
179

180
export class AppModule { }
181
/* end-file */

1
<div>
2
  <app-example3></app-example3>
3
</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
import {GridSettings, HotTableModule} from '@handsontable/angular-wrapper';
2

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

1
<hot-table [settings]="configurationOptions"></hot-table>

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
import {GridSettings, HotTableModule} from '@handsontable/angular-wrapper';
2

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

1
<hot-table [settings]="configurationOptions"></hot-table>

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
import {GridSettings, HotTableModule} from '@handsontable/angular-wrapper';
2

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

1
<hot-table [settings]="configurationOptions"></hot-table>

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
/* file: app.component.ts */
2
import { Component } from '@angular/core';
3
import { GridSettings } from '@handsontable/angular-wrapper';
4

5
@Component({
6
  selector: 'app-example8',
7
  template: `
8
    <hot-table
9
      [settings]="hotSettings!" [data]="hotData">
10
    </hot-table>
11
  `,
12
  standalone: false
13
})
14
export class AppComponent {
15

16
  readonly hotData = [
17
    {
18
      brand: 'Brand',
19
      model: 'Model',
20
      price: 'Price',
21
      sellDate: 'Date',
22
      sellTime: 'Time',
23
      inStock: 'In stock',
24
    },
25
    {
26
      brand: 'Gigabox',
27
      model: 'HL Mountain Frame',
28
      price: 1890.9,
29
      sellDate: '2023-05-03',
30
      sellTime: '11:27',
31
      inStock: 11,
32
    },
33
    {
34
      brand: 'Camido',
35
      model: 'Cycling Cap',
36
      price: 130.1,
37
      sellDate: '2023-03-27',
38
      sellTime: '03:17',
39
      inStock: 0,
40
    },
41
    {
42
      brand: 'Chatterpoint',
43
      model: 'Road Tire Tube',
44
      price: 59,
45
      sellDate: '2023-08-28',
46
      sellTime: '08:01',
47
      inStock: 1,
48
    },
49
    {
50
      brand: 'Eidel',
51
      model: 'HL Road Tire',
52
      price: 279.99,
53
      sellDate: '2023-10-02',
54
      sellTime: '13:23',
55
      inStock: 3,
56
    },
57
    {
58
      brand: 'Jetpulse',
59
      model: 'Racing Socks',
60
      price: 30,
61
      sellDate: '2023-10-11',
62
      sellTime: '01:23',
63
      inStock: 5,
64
    },
65
    {
66
      brand: 'Gigabox',
67
      model: 'HL Mountain Frame',
68
      price: 1890.9,
69
      sellDate: '2023-05-03',
70
      sellTime: '11:27',
71
      inStock: 22,
72
    },
73
    {
74
      brand: 'Camido',
75
      model: 'Cycling Cap',
76
      price: 130.1,
77
      sellDate: '2023-03-27',
78
      sellTime: '03:17',
79
      inStock: 13,
80
    },
81
    {
82
      brand: 'Chatterpoint',
83
      model: 'Road Tire Tube',
84
      price: 59,
85
      sellDate: '2023-08-28',
86
      sellTime: '08:01',
87
      inStock: 0,
88
    },
89
    {
90
      brand: 'Eidel',
91
      model: 'HL Road Tire',
92
      price: 279.99,
93
      sellDate: '2023-10-02',
94
      sellTime: '13:23',
95
      inStock: 14,
96
    },
97
    {
98
      brand: 'Jetpulse',
99
      model: 'Racing Socks',
100
      price: 30,
101
      sellDate: '2023-10-11',
102
      sellTime: '01:23',
103
      inStock: 16,
104
    },
105
    {
106
      brand: 'Gigabox',
107
      model: 'HL Mountain Frame',
108
      price: 1890.9,
109
      sellDate: '2023-05-03',
110
      sellTime: '11:27',
111
      inStock: 18,
112
    },
113
    {
114
      brand: 'Camido',
115
      model: 'Cycling Cap',
116
      price: 130.1,
117
      sellDate: '2023-03-27',
118
      sellTime: '03:17',
119
      inStock: 3,
120
    },
121
    {
122
      brand: 'Chatterpoint',
123
      model: 'Road Tire Tube',
124
      price: 59,
125
      sellDate: '2023-08-28',
126
      sellTime: '08:01',
127
      inStock: 0,
128
    },
129
    {
130
      brand: 'Vinte',
131
      model: 'ML Road Frame-W',
132
      price: 30,
133
      sellDate: '2023-10-11',
134
      sellTime: '01:23',
135
      inStock: 2,
136
    },
137
    {},
138
  ];
139

140
  readonly hotSettings: GridSettings = {
141
    columns: [
142
      {
143
        type: 'text',
144
        data: 'brand',
145
      },
146
      {
147
        type: 'text',
148
        data: 'model',
149
      },
150
      {
151
        type: 'numeric',
152
        data: 'price',
153
        locale: 'en-US',
154
        numericFormat: {
155
          style: 'currency',
156
          currency: 'USD',
157
          minimumFractionDigits: 2,
158
        },
159
      },
160
      {
161
        type: 'intl-date',
162
        data: 'sellDate',
163
        locale: 'en-US',
164
        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
165
        className: 'htRight',
166
      },
167
      {
168
        type: 'intl-time',
169
        data: 'sellTime',
170
        locale: 'en-US',
171
        timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
172
        className: 'htRight',
173
      },
174
      {
175
        type: 'numeric',
176
        data: 'inStock',
177
        className: 'htCenter',
178
      },
179
    ],
180
    height: 200,
181
    stretchH: 'all',
182
    fixedRowsTop: 1,
183
    fixedRowsBottom: 1,
184
    colHeaders: true,
185
    columnSorting: true,
186
    // `afterColumnSort()` is a Handsontable hook: it's fired after each sorting
187
    afterColumnSort() {
188

189
      // @ts-ignore
190
      const lastRowIndex = hot.countRows() - 1;
191

192
      // after each sorting, take row 1 and change its index to 0
193
      // @ts-ignore
194
      hot.rowIndexMapper.moveIndexes(hot.toVisualRow(0), 0);
195
      // after each sorting, take row 16 and change its index to 15
196
      // @ts-ignore
197
      hot.rowIndexMapper.moveIndexes(hot.toVisualRow(lastRowIndex), lastRowIndex);
198
    },
199
    cells(row) {
200
      const lastRowIndex = this.instance.countRows() - 1;
201

202
      if (row === 0) {
203
        return {
204
          type: 'text',
205
          className: 'htCenter',
206
          readOnly: true,
207
        };
208
      }
209

210
      if (row === lastRowIndex) {
211
        return {
212
          type: 'numeric',
213
          className: 'htCenter',
214
        };
215
      }
216

217
      return {
218
        type: 'text',
219
      };
220
    },
221
    columnSummary: [
222
      {
223
        sourceColumn: 2,
224
        type: 'sum',
225
        reversedRowCoords: true,
226
        destinationRow: 0,
227
        destinationColumn: 2,
228
        forceNumeric: true,
229
        suppressDataTypeErrors: true,
230
      },
231
      {
232
        sourceColumn: 5,
233
        type: 'sum',
234
        reversedRowCoords: true,
235
        destinationRow: 0,
236
        destinationColumn: 5,
237
        forceNumeric: true,
238
        suppressDataTypeErrors: true,
239
      },
240
    ],
241
    autoWrapRow: true,
242
    autoWrapCol: true,
243
  };
244
}
245
/* end-file */
246

247

248
/* file: app.module.ts */
249
import { NgModule, ApplicationConfig } from '@angular/core';
250
import { BrowserModule } from '@angular/platform-browser';
251
import { registerAllModules } from 'handsontable/registry';
252
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, HotTableModule } from '@handsontable/angular-wrapper';
253
import { CommonModule } from '@angular/common';
254
import { NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';
255

256
/* start:skip-in-compilation */
257
import { AppComponent } from './app.component';
258
/* end:skip-in-compilation */
259

260
// register Handsontable's modules
261
registerAllModules();
262

263
export const appConfig: ApplicationConfig = {
264
  providers: [
265
    {
266
      provide: HOT_GLOBAL_CONFIG,
267
      useValue: {
268
        license: NON_COMMERCIAL_LICENSE,
269
      } as HotGlobalConfig
270
    }
271
  ],
272
};
273

274
@NgModule({
275
  imports: [ BrowserModule, HotTableModule, CommonModule ],
276
  declarations: [ AppComponent ],
277
  providers: [...appConfig.providers],
278
  bootstrap: [ AppComponent ]
279
})
280

281
export class AppModule { }
282
/* end-file */

1
<div>
2
    <app-example8></app-example8>
3
</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
@ViewChild(HotTableComponent, {static: false})
2
hotTable!: HotTableComponent;
3

4
ngAfterViewInit() {
5
  const hot = this.hotTable.hotInstance;
6

7
  // enable sorting for all columns
8
  hot.updateSettings({ columnSorting: true });
9

10
  // disable sorting for all columns
11
  hot.updateSettings({ columnSorting: false });
12

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

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
@ViewChild(HotTableComponent, {static: false})
2
hotTable!: HotTableComponent;
3

4
ngAfterViewInit() {
5
  const columnSorting = this.hotTable.hotInstance.getPlugin('columnSorting');
6

7
  // sort column 0 in ascending order
8
  columnSorting.sort({ column: 0, sortOrder: 'asc' });
9

10
  // return rows to their original order
11
  columnSorting.clearSort();
12
}

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

1
/* file: app.component.ts */
2
import {Component, ViewChild} from '@angular/core';
3
import {GridSettings, HotTableComponent } from '@handsontable/angular-wrapper';
4
import {ColumnSorting} from 'handsontable/plugins';
5

6
@Component({
7
  selector: 'app-example9',
8
  template: `
9
    <div class="example-controls-container">
10
      <div class="controls">
11
        <button (click)="sortAscBrand()">Sort by the "Brand" column, in ascending order</button>
12
        <button (click)="unsort()">Go back to the original order</button>
13
      </div>
14
    </div>
15

16
    <hot-table
17
      [settings]="hotSettings!" [data]="hotData">
18
    </hot-table>
19
  `,
20
  standalone: false
21
})
22
export class AppComponent {
23
  @ViewChild(HotTableComponent, {static: false}) hotTable!: HotTableComponent;
24

25
  readonly hotData = [
26
    {
27
      brand: 'Jetpulse',
28
      model: 'Racing Socks',
29
      price: 30,
30
      sellDate: '2023-10-11',
31
      sellTime: '01:23',
32
      inStock: false,
33
    },
34
    {
35
      brand: 'Gigabox',
36
      model: 'HL Mountain Frame',
37
      price: 1890.9,
38
      sellDate: '2023-05-03',
39
      sellTime: '11:27',
40
      inStock: false,
41
    },
42
    {
43
      brand: 'Camido',
44
      model: 'Cycling Cap',
45
      price: 130.1,
46
      sellDate: '2023-03-27',
47
      sellTime: '03:17',
48
      inStock: true,
49
    },
50
    {
51
      brand: 'Chatterpoint',
52
      model: 'Road Tire Tube',
53
      price: 59,
54
      sellDate: '2023-08-28',
55
      sellTime: '08:01',
56
      inStock: true,
57
    },
58
    {
59
      brand: 'Eidel',
60
      model: 'HL Road Tire',
61
      price: 279.99,
62
      sellDate: '2023-10-02',
63
      sellTime: '13:23',
64
      inStock: true,
65
    },
66
  ];
67

68
  readonly hotSettings: GridSettings = {
69
    columns: [
70
      {
71
        title: 'Brand',
72
        type: 'text',
73
        data: 'brand',
74
      },
75
      {
76
        title: 'Model',
77
        type: 'text',
78
        data: 'model',
79
      },
80
      {
81
        title: 'Price',
82
        type: 'numeric',
83
        data: 'price',
84
        locale: 'en-US',
85
        numericFormat: {
86
          style: 'currency',
87
          currency: 'USD',
88
          minimumFractionDigits: 2,
89
        },
90
      },
91
      {
92
        title: 'Date',
93
        type: 'intl-date',
94
        data: 'sellDate',
95
        locale: 'en-US',
96
        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
97
        className: 'htRight',
98
      },
99
      {
100
        title: 'Time',
101
        type: 'intl-time',
102
        data: 'sellTime',
103
        locale: 'en-US',
104
        timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
105
        className: 'htRight',
106
      },
107
      {
108
        title: 'In stock',
109
        type: 'checkbox',
110
        data: 'inStock',
111
        className: 'htCenter',
112
      },
113
    ],
114
    columnSorting: true,
115
    height: 'auto',
116
    stretchH: 'all',
117
    autoWrapRow: true,
118
    autoWrapCol: true,
119
  };
120

121
  getColumnSortingPlugin(): ColumnSorting {
122
    return this.hotTable.hotInstance!.getPlugin('columnSorting')
123
  }
124

125
  sortAscBrand() {
126
    this.getColumnSortingPlugin().sort({
127
      column: 0,
128
      sortOrder: 'asc',
129
    });
130
  }
131

132
  unsort() {
133
    this.getColumnSortingPlugin().clearSort();
134
  }
135
}
136
/* end-file */
137

138

139
/* file: app.module.ts */
140
import { NgModule, ApplicationConfig } from '@angular/core';
141
import { BrowserModule } from '@angular/platform-browser';
142
import { registerAllModules } from 'handsontable/registry';
143
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, HotTableModule } from '@handsontable/angular-wrapper';
144
import { CommonModule } from '@angular/common';
145
import { NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';
146

147
/* start:skip-in-compilation */
148
import { AppComponent } from './app.component';
149
/* end:skip-in-compilation */
150

151
// register Handsontable's modules
152
registerAllModules();
153

154
export const appConfig: ApplicationConfig = {
155
  providers: [
156
    {
157
      provide: HOT_GLOBAL_CONFIG,
158
      useValue: {
159
        license: NON_COMMERCIAL_LICENSE,
160
      } as HotGlobalConfig
161
    }
162
  ],
163
};
164

165
@NgModule({
166
  imports: [ BrowserModule, HotTableModule, CommonModule ],
167
  declarations: [ AppComponent ],
168
  providers: [...appConfig.providers],
169
  bootstrap: [ AppComponent ]
170
})
171

172
export class AppModule { }
173
/* end-file */

1
<div>
2
    <app-example9></app-example9>
3
</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
import {GridSettings, HotTableModule} from '@handsontable/angular-wrapper';
2

3
const configurationOptions: GridSettings = {
4
  multiColumnSorting: true,
5
};

1
<hot-table [settings]="configurationOptions"></hot-table>

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
import {GridSettings, HotTableModule} from '@handsontable/angular-wrapper';
2

3
const configurationOptions: GridSettings = {
4
  multiColumnSorting: true,
5
  columns: [
6
    {
7
      multiColumnSorting: {
8
        headerAction: false,
9
      },
10
    },
11
  ],
12
};

1
<hot-table [settings]="configurationOptions"></hot-table>

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
/* file: app.component.ts */
2
import { Component } from '@angular/core';
3
import { GridSettings } from '@handsontable/angular-wrapper';
4

5
@Component({
6
  selector: 'app-example4',
7
  template: `
8
    <hot-table
9
      [settings]="hotSettings!" [data]="hotData">
10
    </hot-table>
11
  `,
12
  standalone: false
13
})
14
export class AppComponent {
15

16
  readonly hotData = [
17
    {
18
      brand: 'Jetpulse',
19
      model: 'HL Mountain Frame',
20
      price: 1890.9,
21
      sellDate: '2023-10-11',
22
      sellTime: '01:23',
23
      inStock: false,
24
    },
25
    {
26
      brand: 'Jetpulse',
27
      model: 'HL Mountain Frame',
28
      price: 30,
29
      sellDate: '2023-05-03',
30
      sellTime: '11:27',
31
      inStock: false,
32
    },
33
    {
34
      brand: 'Jetpulse',
35
      model: 'Cycling Cap',
36
      price: 130.1,
37
      sellDate: '2023-03-27',
38
      sellTime: '03:17',
39
      inStock: true,
40
    },
41
    {
42
      brand: 'Chatterpoint',
43
      model: 'Road Tire Tube',
44
      price: 279.99,
45
      sellDate: '2023-08-28',
46
      sellTime: '08:01',
47
      inStock: true,
48
    },
49
    {
50
      brand: 'Chatterpoint',
51
      model: 'HL Road Tire',
52
      price: 59,
53
      sellDate: '2023-10-02',
54
      sellTime: '13:23',
55
      inStock: true,
56
    },
57
  ];
58

59
  readonly hotSettings: GridSettings = {
60
    columns: [
61
      {
62
        title: 'Brand',
63
        type: 'text',
64
        data: 'brand',
65
      },
66
      {
67
        title: 'Model',
68
        type: 'text',
69
        data: 'model',
70
      },
71
      {
72
        title: 'Price',
73
        type: 'numeric',
74
        data: 'price',
75
        locale: 'en-US',
76
        numericFormat: {
77
          style: 'currency',
78
          currency: 'USD',
79
          minimumFractionDigits: 2,
80
        },
81
      },
82
      {
83
        title: 'Date',
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',
92
        type: 'intl-time',
93
        data: 'sellTime',
94
        locale: 'en-US',
95
        timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
96
        className: 'htRight',
97
      },
98
      {
99
        title: 'In stock',
100
        type: 'checkbox',
101
        data: 'inStock',
102
        className: 'htCenter',
103
      },
104
    ],
105
    // enable sorting by multiple columns, for all columns
106
    multiColumnSorting: true,
107
    height: 'auto',
108
    stretchH: 'all',
109
    autoWrapRow: true,
110
    autoWrapCol: true,
111
  };
112
}
113
/* end-file */
114

115

116
/* file: app.module.ts */
117
import { NgModule, ApplicationConfig } from '@angular/core';
118
import { BrowserModule } from '@angular/platform-browser';
119
import { registerAllModules } from 'handsontable/registry';
120
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, HotTableModule } from '@handsontable/angular-wrapper';
121
import { CommonModule } from '@angular/common';
122
import { NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';
123

124
/* start:skip-in-compilation */
125
import { AppComponent } from './app.component';
126
/* end:skip-in-compilation */
127

128
// register Handsontable's modules
129
registerAllModules();
130

131
export const appConfig: ApplicationConfig = {
132
  providers: [
133
    {
134
      provide: HOT_GLOBAL_CONFIG,
135
      useValue: {
136
        license: NON_COMMERCIAL_LICENSE,
137
      } as HotGlobalConfig
138
    }
139
  ],
140
};
141

142
@NgModule({
143
  imports: [ BrowserModule, HotTableModule, CommonModule ],
144
  declarations: [ AppComponent ],
145
  providers: [...appConfig.providers],
146
  bootstrap: [ AppComponent ]
147
})
148

149
export class AppModule { }
150
/* end-file */

1
<div>
2
  <app-example4></app-example4>
3
</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
/* file: app.component.ts */
2
import { Component } from '@angular/core';
3
import { GridSettings } from '@handsontable/angular-wrapper';
4

5
@Component({
6
  selector: 'app-example5',
7
  template: `
8
    <hot-table
9
      [settings]="hotSettings!" [data]="hotData">
10
    </hot-table>
11
  `,
12
  standalone: false
13
})
14
export class AppComponent {
15

16
  readonly hotData = [
17
    {
18
      brand: 'Jetpulse',
19
      model: 'HL Mountain Frame',
20
      price: 30,
21
      sellDate: '2023-10-11',
22
      sellTime: '01:23',
23
      inStock: false,
24
    },
25
    {
26
      brand: 'Jetpulse',
27
      model: 'HL Mountain Frame',
28
      price: 1890.9,
29
      sellDate: '2023-05-03',
30
      sellTime: '11:27',
31
      inStock: false,
32
    },
33
    {
34
      brand: 'Jetpulse',
35
      model: 'Cycling Cap',
36
      price: 130.1,
37
      sellDate: '2023-03-27',
38
      sellTime: '03:17',
39
      inStock: true,
40
    },
41
    {
42
      brand: 'Chatterpoint',
43
      model: 'Road Tire Tube',
44
      price: 59,
45
      sellDate: '2023-08-28',
46
      sellTime: '08:01',
47
      inStock: true,
48
    },
49
    {
50
      brand: 'Chatterpoint',
51
      model: 'HL Road Tire',
52
      price: 279.99,
53
      sellDate: '2023-10-02',
54
      sellTime: '13:23',
55
      inStock: true,
56
    },
57
  ];
58

59
  readonly hotSettings: GridSettings = {
60
    columns: [
61
      {
62
        title: 'Brand',
63
        type: 'text',
64
        data: 'brand',
65
      },
66
      {
67
        title: 'Model',
68
        type: 'text',
69
        data: 'model',
70
      },
71
      {
72
        title: 'Price',
73
        type: 'numeric',
74
        data: 'price',
75
        locale: 'en-US',
76
        numericFormat: {
77
          style: 'currency',
78
          currency: 'USD',
79
          minimumFractionDigits: 2,
80
        },
81
      },
82
      {
83
        title: 'Date',
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',
92
        type: 'intl-time',
93
        data: 'sellTime',
94
        locale: 'en-US',
95
        timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
96
        className: 'htRight',
97
      },
98
      {
99
        title: 'In stock',
100
        type: 'checkbox',
101
        data: 'inStock',
102
        className: 'htCenter',
103
      },
104
    ],
105
    multiColumnSorting: {
106
      initialConfig: [
107
        // at initialization, sort the data by the 'Brand' column, in ascending order
108
        {
109
          column: 0,
110
          sortOrder: 'asc',
111
        },
112
        // at initialization, sort the data by the 'Model' column, in descending order
113
        {
114
          column: 1,
115
          sortOrder: 'desc',
116
        },
117
      ],
118
    },
119
    height: 'auto',
120
    stretchH: 'all',
121
    autoWrapRow: true,
122
    autoWrapCol: true,
123
  };
124
}
125
/* end-file */
126

127

128
/* file: app.module.ts */
129
import { NgModule, ApplicationConfig } from '@angular/core';
130
import { BrowserModule } from '@angular/platform-browser';
131
import { registerAllModules } from 'handsontable/registry';
132
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, HotTableModule } from '@handsontable/angular-wrapper';
133
import { CommonModule } from '@angular/common';
134
import { NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';
135

136
/* start:skip-in-compilation */
137
import { AppComponent } from './app.component';
138
/* end:skip-in-compilation */
139

140
// register Handsontable's modules
141
registerAllModules();
142

143
export const appConfig: ApplicationConfig = {
144
  providers: [
145
    {
146
      provide: HOT_GLOBAL_CONFIG,
147
      useValue: {
148
        license: NON_COMMERCIAL_LICENSE,
149
      } as HotGlobalConfig
150
    }
151
  ],
152
};
153

154
@NgModule({
155
  imports: [ BrowserModule, HotTableModule, CommonModule ],
156
  declarations: [ AppComponent ],
157
  providers: [...appConfig.providers],
158
  bootstrap: [ AppComponent ]
159
})
160

161
export class AppModule { }
162
/* end-file */

1
<div>
2
  <app-example5></app-example5>
3
</div>

1
import {GridSettings, HotTableModule} from '@handsontable/angular-wrapper';
2

3
const configurationOptions: GridSettings = {
4
  multiColumnSorting: {
5
    initialConfig: [
6
      { column: 0, sortOrder: 'asc' },
7
      { column: 1, sortOrder: 'desc' },
8
    ],
9
  },
10
};

1
<hot-table [settings]="configurationOptions"></hot-table>

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
@ViewChild(HotTableComponent, {static: false})
2
hotTable!: HotTableComponent;
3

4
ngAfterViewInit() {
5
  const multiColumnSorting = this.hotTable.hotInstance.getPlugin('multiColumnSorting');
6

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

13
  // return rows to their original order
14
  multiColumnSorting.clearSort();
15
}

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

1
/* file: app.component.ts */
2
import { Component, ViewChild } from '@angular/core';
3
import { GridSettings, HotTableComponent } from '@handsontable/angular-wrapper';
4
import { ColumnSorting } from 'handsontable/plugins';
5

6
@Component({
7
  selector: 'app-example10',
8
  template: `
9
    <div class="example-controls-container">
10
      <div class="controls">
11
        <button (click)="sort()">Sort</button>
12
        <button (click)="unsort()">Go back to the original order</button>
13
      </div>
14
    </div>
15

16
    <hot-table
17
      [settings]="hotSettings!" [data]="hotData">
18
    </hot-table>
19
  `,
20
  standalone: false
21
})
22
export class AppComponent {
23
  @ViewChild(HotTableComponent, {static: false}) hotTable!: HotTableComponent;
24

25
  readonly hotData = [
26
    {
27
      brand: 'Jetpulse',
28
      model: 'Racing Socks',
29
      price: 30,
30
      sellDate: '2023-10-11',
31
      sellTime: '01:23',
32
      inStock: false,
33
    },
34
    {
35
      brand: 'Jetpulse',
36
      model: 'HL Mountain Frame',
37
      price: 1890.9,
38
      sellDate: '2023-05-03',
39
      sellTime: '11:27',
40
      inStock: false,
41
    },
42
    {
43
      brand: 'Jetpulse',
44
      model: 'Cycling Cap',
45
      price: 130.1,
46
      sellDate: '2023-03-27',
47
      sellTime: '03:17',
48
      inStock: true,
49
    },
50
    {
51
      brand: 'Chatterpoint',
52
      model: 'Road Tire Tube',
53
      price: 59,
54
      sellDate: '2023-08-28',
55
      sellTime: '08:01',
56
      inStock: true,
57
    },
58
    {
59
      brand: 'Chatterpoint',
60
      model: 'HL Road Tire',
61
      price: 279.99,
62
      sellDate: '2023-10-02',
63
      sellTime: '13:23',
64
      inStock: true,
65
    },
66
  ];
67

68
  readonly hotSettings: GridSettings = {
69
    columns: [
70
      {
71
        title: 'Brand',
72
        type: 'text',
73
        data: 'brand',
74
      },
75
      {
76
        title: 'Model',
77
        type: 'text',
78
        data: 'model',
79
      },
80
      {
81
        title: 'Price',
82
        type: 'numeric',
83
        data: 'price',
84
        locale: 'en-US',
85
        numericFormat: {
86
          style: 'currency',
87
          currency: 'USD',
88
          minimumFractionDigits: 2,
89
        },
90
      },
91
      {
92
        title: 'Date',
93
        type: 'intl-date',
94
        data: 'sellDate',
95
        locale: 'en-US',
96
        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
97
        className: 'htRight',
98
      },
99
      {
100
        title: 'Time',
101
        type: 'intl-time',
102
        data: 'sellTime',
103
        locale: 'en-US',
104
        timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
105
        className: 'htRight',
106
      },
107
      {
108
        title: 'In stock',
109
        type: 'checkbox',
110
        data: 'inStock',
111
        className: 'htCenter',
112
      },
113
    ],
114
    multiColumnSorting: true,
115
    height: 'auto',
116
    stretchH: 'all',
117
    autoWrapRow: true,
118
    autoWrapCol: true,
119
  };
120

121
  getMultiColumnSortingPlugin(): ColumnSorting {
122
    return this.hotTable.hotInstance!.getPlugin('multiColumnSorting')
123
  }
124

125
  sort() {
126
    this.getMultiColumnSortingPlugin().sort([
127
      {
128
        column: 0,
129
        sortOrder: 'asc',
130
      },
131
      {
132
        column: 1,
133
        sortOrder: 'desc',
134
      },
135
    ]);
136
  }
137

138
  unsort() {
139
    this.getMultiColumnSortingPlugin().clearSort();
140
  }
141
}
142
/* end-file */
143

144

145
/* file: app.module.ts */
146
import { NgModule, ApplicationConfig } from '@angular/core';
147
import { BrowserModule } from '@angular/platform-browser';
148
import { registerAllModules } from 'handsontable/registry';
149
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, HotTableModule } from '@handsontable/angular-wrapper';
150
import { CommonModule } from '@angular/common';
151
import { NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';
152

153
/* start:skip-in-compilation */
154
import { AppComponent } from './app.component';
155
/* end:skip-in-compilation */
156

157
// register Handsontable's modules
158
registerAllModules();
159

160
export const appConfig: ApplicationConfig = {
161
  providers: [
162
    {
163
      provide: HOT_GLOBAL_CONFIG,
164
      useValue: {
165
        license: NON_COMMERCIAL_LICENSE,
166
      } as HotGlobalConfig
167
    }
168
  ],
169
};
170

171
@NgModule({
172
  imports: [ BrowserModule, HotTableModule, CommonModule ],
173
  declarations: [ AppComponent ],
174
  providers: [...appConfig.providers],
175
  bootstrap: [ AppComponent ]
176
})
177

178
export class AppModule { }
179
/* end-file */

1
<div>
2
    <app-example10></app-example10>
3
</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
/* file: app.component.ts */
2
import { Component } from '@angular/core';
3
import { GridSettings } from '@handsontable/angular-wrapper';
4

5
@Component({
6
  selector: 'app-example6',
7
  template: `
8
    <hot-table
9
      [settings]="hotSettings!" [data]="hotData">
10
    </hot-table>
11
  `,
12
  styles: `
13
    :host ::ng-deep {
14
      .custom-sort-icon-example-1 .columnSorting.sortAction.ascending::before {
15
        -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");
16
      }
17

18
      .custom-sort-icon-example-1 .columnSorting.sortAction.descending::before {
19
        -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");
20
      }
21
    }
22
  `,
23
  standalone: false
24
})
25
export class AppComponent {
26

27
  readonly hotData = [
28
    {
29
      brand: 'Jetpulse',
30
      model: 'Racing Socks',
31
      price: 30,
32
      sellDate: '2023-10-11',
33
      sellTime: '01:23',
34
      inStock: false,
35
    },
36
    {
37
      brand: 'Gigabox',
38
      model: 'HL Mountain Frame',
39
      price: 1890.9,
40
      sellDate: '2023-05-03',
41
      sellTime: '11:27',
42
      inStock: false,
43
    },
44
    {
45
      brand: 'Camido',
46
      model: 'Cycling Cap',
47
      price: 130.1,
48
      sellDate: '2023-03-27',
49
      sellTime: '03:17',
50
      inStock: true,
51
    },
52
    {
53
      brand: 'Chatterpoint',
54
      model: 'Road Tire Tube',
55
      price: 59,
56
      sellDate: '2023-08-28',
57
      sellTime: '08:01',
58
      inStock: true,
59
    },
60
    {
61
      brand: 'Eidel',
62
      model: 'HL Road Tire',
63
      price: 279.99,
64
      sellDate: '2023-10-02',
65
      sellTime: '13:23',
66
      inStock: true,
67
    },
68
  ];
69

70
  readonly hotSettings: GridSettings = {
71
    columns: [
72
      {
73
        title: 'Brand',
74
        type: 'text',
75
        data: 'brand',
76
      },
77
      {
78
        title: 'Model',
79
        type: 'text',
80
        data: 'model',
81
      },
82
      {
83
        title: 'Price',
84
        type: 'numeric',
85
        data: 'price',
86
        locale: 'en-US',
87
        numericFormat: {
88
          style: 'currency',
89
          currency: 'USD',
90
          minimumFractionDigits: 2,
91
        },
92
      },
93
      {
94
        title: 'Date',
95
        type: 'intl-date',
96
        data: 'sellDate',
97
        locale: 'en-US',
98
        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
99
        className: 'htRight',
100
      },
101
      {
102
        title: 'Time',
103
        type: 'intl-time',
104
        data: 'sellTime',
105
        locale: 'en-US',
106
        timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
107
        className: 'htRight',
108
      },
109
      {
110
        title: 'In stock',
111
        type: 'checkbox',
112
        data: 'inStock',
113
        className: 'htCenter',
114
      },
115
    ],
116
    className: 'custom-sort-icon-example-1',
117
    columnSorting: {
118
      initialConfig: {
119
        column: 1,
120
        sortOrder: 'desc',
121
      },
122
    },
123
    height: 'auto',
124
    stretchH: 'all',
125
    autoWrapRow: true,
126
    autoWrapCol: true,
127
  };
128
}
129
/* end-file */
130

131

132
/* file: app.module.ts */
133
import { NgModule, ApplicationConfig } from '@angular/core';
134
import { BrowserModule } from '@angular/platform-browser';
135
import { registerAllModules } from 'handsontable/registry';
136
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, HotTableModule } from '@handsontable/angular-wrapper';
137
import { CommonModule } from '@angular/common';
138
import { NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';
139

140
/* start:skip-in-compilation */
141
import { AppComponent } from './app.component';
142
/* end:skip-in-compilation */
143

144
// register Handsontable's modules
145
registerAllModules();
146

147
export const appConfig: ApplicationConfig = {
148
  providers: [
149
    {
150
      provide: HOT_GLOBAL_CONFIG,
151
      useValue: {
152
        license: NON_COMMERCIAL_LICENSE,
153
      } as HotGlobalConfig
154
    }
155
  ],
156
};
157

158
@NgModule({
159
  imports: [ BrowserModule, HotTableModule, CommonModule ],
160
  declarations: [ AppComponent ],
161
  providers: [...appConfig.providers],
162
  bootstrap: [ AppComponent ]
163
})
164

165
export class AppModule { }
166
/* end-file */

1
<div>
2
    <app-example6></app-example6>
3
</div>

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
/* file: app.component.ts */
2
import { Component } from '@angular/core';
3
import { GridSettings } from '@handsontable/angular-wrapper';
4

5
@Component({
6
  selector: 'app-example7',
7
  template: `
8
    <hot-table
9
      [settings]="hotSettings!" [data]="hotData">
10
    </hot-table>
11
  `,
12
  styles: `
13
    :host ::ng-deep {
14
      .custom-sort-icon-example-3 .handsontable span.colHeader.columnSorting.sort-1::after {
15
        content: '①';
16
      }
17

18
      .custom-sort-icon-example-3 .handsontable span.colHeader.columnSorting.sort-2::after {
19
        content: '②';
20
      }
21

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

26
      .custom-sort-icon-example-3 .handsontable span.colHeader.columnSorting.sort-4::after {
27
        content: '④';
28
      }
29

30
      .custom-sort-icon-example-3 .handsontable span.colHeader.columnSorting.sort-5::after {
31
        content: '⑤';
32
      }
33

34
      .custom-sort-icon-example-3 .handsontable span.colHeader.columnSorting.sort-6::after {
35
        content: '⑥';
36
      }
37

38
      .custom-sort-icon-example-3 .handsontable span.colHeader.columnSorting.sort-7::after {
39
        content: '⑦';
40
      }
41

42
      .custom-sort-icon-example-3 .handsontable span.colHeader.columnSorting::after {
43
        width: 10px;
44
        font-size: 10px;
45
      }
46

47
      .custom-sort-icon-example-3 .handsontable .columnSorting.sortAction:before {
48
        right: 5px;
49
      }
50
    }
51
  `,
52
  standalone: false
53
})
54
export class AppComponent {
55

56
  readonly hotData = [
57
    {
58
      brand: 'Jetpulse',
59
      model: 'Racing Socks',
60
      color: 'White',
61
      price: 30,
62
      sellDate: '2023-10-11',
63
      sellTime: '01:23',
64
      inStock: false,
65
    },
66
    {
67
      brand: 'Gigabox',
68
      model: 'HL Frame',
69
      color: 'Black',
70
      price: 1890.9,
71
      sellDate: '2023-05-03',
72
      sellTime: '11:27',
73
      inStock: false,
74
    },
75
    {
76
      brand: 'Camido',
77
      model: 'Cycling Cap',
78
      color: 'Red',
79
      price: 130.1,
80
      sellDate: '2023-03-27',
81
      sellTime: '03:17',
82
      inStock: true,
83
    },
84
    {
85
      brand: 'Chatterpoint',
86
      model: 'Road Tire Tube',
87
      color: 'Green',
88
      price: 59,
89
      sellDate: '2023-08-28',
90
      sellTime: '08:01',
91
      inStock: true,
92
    },
93
    {
94
      brand: 'Eidel',
95
      model: 'HL Road Tire',
96
      color: 'Blue',
97
      price: 279.99,
98
      sellDate: '2023-10-02',
99
      sellTime: '13:23',
100
      inStock: true,
101
    },
102
  ];
103

104
  readonly hotSettings: GridSettings = {
105
    columns: [
106
      {
107
        title: 'Brand',
108
        type: 'text',
109
        data: 'brand',
110
      },
111
      {
112
        title: 'Model',
113
        type: 'text',
114
        data: 'model',
115
      },
116
      {
117
        title: 'Color',
118
        type: 'text',
119
        data: 'color',
120
      },
121
      {
122
        title: 'Price',
123
        type: 'numeric',
124
        data: 'price',
125
        locale: 'en-US',
126
        numericFormat: {
127
          style: 'currency',
128
          currency: 'USD',
129
          minimumFractionDigits: 2,
130
        },
131
      },
132
      {
133
        title: 'Date',
134
        type: 'intl-date',
135
        data: 'sellDate',
136
        locale: 'en-US',
137
        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
138
        className: 'htRight',
139
      },
140
      {
141
        title: 'Time',
142
        type: 'intl-time',
143
        data: 'sellTime',
144
        locale: 'en-US',
145
        timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
146
        className: 'htRight',
147
      },
148
      {
149
        title: 'In stock',
150
        type: 'checkbox',
151
        data: 'inStock',
152
        className: 'htCenter',
153
      },
154
    ],
155
    className: 'custom-sort-icon-example-3',
156
    multiColumnSorting: {
157
      initialConfig: [
158
        {
159
          column: 0,
160
          sortOrder: 'asc',
161
        },
162
        {
163
          column: 1,
164
          sortOrder: 'desc',
165
        },
166
        {
167
          column: 2,
168
          sortOrder: 'asc',
169
        },
170
        {
171
          column: 3,
172
          sortOrder: 'desc',
173
        },
174
        {
175
          column: 4,
176
          sortOrder: 'asc',
177
        },
178
        {
179
          column: 5,
180
          sortOrder: 'desc',
181
        },
182
        {
183
          column: 6,
184
          sortOrder: 'asc',
185
        },
186
      ],
187
    },
188
    height: 'auto',
189
    stretchH: 'all',
190
    autoWrapRow: true,
191
    autoWrapCol: true,
192
  };
193
}
194
/* end-file */
195

196

197
/* file: app.module.ts */
198
import { NgModule, ApplicationConfig } from '@angular/core';
199
import { BrowserModule } from '@angular/platform-browser';
200
import { registerAllModules } from 'handsontable/registry';
201
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, HotTableModule } from '@handsontable/angular-wrapper';
202
import { CommonModule } from '@angular/common';
203
import { NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';
204

205
/* start:skip-in-compilation */
206
import { AppComponent } from './app.component';
207
/* end:skip-in-compilation */
208

209
// register Handsontable's modules
210
registerAllModules();
211

212
export const appConfig: ApplicationConfig = {
213
  providers: [
214
    {
215
      provide: HOT_GLOBAL_CONFIG,
216
      useValue: {
217
        license: NON_COMMERCIAL_LICENSE,
218
      } as HotGlobalConfig
219
    }
220
  ],
221
};
222

223
@NgModule({
224
  imports: [ BrowserModule, HotTableModule, CommonModule ],
225
  declarations: [ AppComponent ],
226
  providers: [...appConfig.providers],
227
  bootstrap: [ AppComponent ]
228
})
229

230
export class AppModule { }
231
/* end-file */

1
<div>
2
    <app-example7></app-example7>
3
</div>

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