Rows pagination

Split large data sets into pages to improve usability and rendering performance. Pagination operates fully on the client side and automatically recomputes the total page count whenever rows are added, removed, filtered, or otherwise modified.

Pagination demo

Use the controls below the grid to switch between pages.

1
/* file: app.component.ts */
2
import { Component } from '@angular/core';
3
import { GridSettings, HotTableModule} 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: true,
13
  imports: [HotTableModule],
14
})
15
export class AppComponent {
100 collapsed lines
16
  readonly hotData = [
17
    { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },
18
    { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },
19
    { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },
20
    { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },
21
    { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },
22
    { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },
23
    { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },
24
    { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },
25
    { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },
26
    { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },
27
    { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },
28
    { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },
29
    { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },
30
    { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },
31
    { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },
32
    { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },
33
    { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },
34
    { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },
35
    { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },
36
    { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },
37
    { model: 'Aero Bottle', price: 1334.03, sellDate: '2025-01-24', sellTime: '03:29', inStock: false },
38
    { model: 'Road Tire Tube', price: 1841.17, sellDate: '2025-05-22', sellTime: '01:45', inStock: false },
39
    { model: 'Aero Bottle', price: 1622.05, sellDate: '2025-01-13', sellTime: '08:30', inStock: true },
40
    { model: 'Comfort Saddle', price: 1456.24, sellDate: '2025-07-20', sellTime: '03:39', inStock: false },
41
    { model: 'Windbreaker Jacket', price: 1736.96, sellDate: '2025-09-25', sellTime: '00:43', inStock: true },
42
    { model: 'Fitness Watch', price: 1075.31, sellDate: '2025-11-07', sellTime: '17:47', inStock: true },
43
    { model: 'Cycling Cap', price: 726.01, sellDate: '2025-10-28', sellTime: '12:44', inStock: true },
44
    { model: 'Road Tire Tube', price: 601.99, sellDate: '2025-09-22', sellTime: '00:26', inStock: true },
45
    { model: 'Speed Gloves', price: 1758.26, sellDate: '2025-10-04', sellTime: '04:59', inStock: true },
46
    { model: 'Speed Gloves', price: 564.35, sellDate: '2025-07-10', sellTime: '18:21', inStock: true },
47
    { model: 'Hydration Pack', price: 954.84, sellDate: '2025-11-02', sellTime: '00:59', inStock: false },
48
    { model: 'Cycling Cap', price: 1511.5, sellDate: '2025-02-11', sellTime: '02:38', inStock: false },
49
    { model: 'HL Road Tire', price: 269.6, sellDate: '2025-06-18', sellTime: '04:58', inStock: false },
50
    { model: 'Road Tire Tube', price: 435.07, sellDate: '2025-07-22', sellTime: '23:12', inStock: false },
51
    { model: 'Fitness Watch', price: 1187.8, sellDate: '2025-08-13', sellTime: '10:19', inStock: true },
52
    { model: 'Racing Socks', price: 770.19, sellDate: '2025-02-02', sellTime: '20:37', inStock: true },
53
    { model: 'Carbon Handlebar', price: 60.41, sellDate: '2025-12-27', sellTime: '20:30', inStock: true },
54
    { model: 'Racing Socks', price: 944.21, sellDate: '2025-05-23', sellTime: '18:43', inStock: false },
55
    { model: 'Racing Socks', price: 621.96, sellDate: '2025-12-12', sellTime: '04:59', inStock: false },
56
    { model: 'HL Road Tire', price: 774.91, sellDate: '2025-06-02', sellTime: '03:48', inStock: true },
57
    { model: 'LED Bike Light', price: 1205.29, sellDate: '2025-04-15', sellTime: '22:08', inStock: false },
58
    { model: 'Racing Socks', price: 388.19, sellDate: '2025-05-24', sellTime: '08:36', inStock: true },
59
    { model: 'Windbreaker Jacket', price: 267.88, sellDate: '2025-05-25', sellTime: '15:00', inStock: true },
60
    { model: 'LED Bike Light', price: 283.72, sellDate: '2025-09-26', sellTime: '02:16', inStock: true },
61
    { model: 'Comfort Saddle', price: 1782.91, sellDate: '2025-03-07', sellTime: '09:43', inStock: false },
62
    { model: 'Trail Helmet', price: 1943.46, sellDate: '2025-06-05', sellTime: '01:49', inStock: true },
63
    { model: 'Speed Gloves', price: 1737.8, sellDate: '2025-09-18', sellTime: '14:21', inStock: true },
64
    { model: 'Road Tire Tube', price: 354.89, sellDate: '2025-08-11', sellTime: '02:03', inStock: true },
65
    { model: 'Hydration Pack', price: 1490.45, sellDate: '2025-12-04', sellTime: '02:23', inStock: true },
66
    { model: 'LED Bike Light', price: 844.48, sellDate: '2025-09-22', sellTime: '02:29', inStock: true },
67
    { model: 'Road Tire Tube', price: 1965.77, sellDate: '2025-02-10', sellTime: '23:52', inStock: false },
68
    { model: 'Action Camera', price: 522.33, sellDate: '2025-11-11', sellTime: '16:50', inStock: false },
69
    { model: 'Comfort Saddle', price: 109.4, sellDate: '2025-05-13', sellTime: '11:41', inStock: true },
70
    { model: 'Hydration Pack', price: 1067.76, sellDate: '2025-08-07', sellTime: '05:04', inStock: false },
71
    { model: 'Speed Gloves', price: 1738.77, sellDate: '2025-01-28', sellTime: '08:38', inStock: false },
72
    { model: 'Aero Bottle', price: 1600.35, sellDate: '2025-01-29', sellTime: '00:36', inStock: false },
73
    { model: 'Speed Gloves', price: 524.91, sellDate: '2025-12-15', sellTime: '12:56', inStock: true },
74
    { model: 'Windbreaker Jacket', price: 1780.51, sellDate: '2025-09-23', sellTime: '05:02', inStock: false },
75
    { model: 'Comfort Saddle', price: 1955.0, sellDate: '2025-09-29', sellTime: '13:03', inStock: false },
76
    { model: 'Speed Gloves', price: 957.4, sellDate: '2025-08-06', sellTime: '03:19', inStock: true },
77
    { model: 'Fitness Watch', price: 193.72, sellDate: '2025-04-01', sellTime: '19:49', inStock: false },
78
    { model: 'Speed Gloves', price: 677.94, sellDate: '2025-10-11', sellTime: '22:25', inStock: false },
79
    { model: 'LED Bike Light', price: 1155.9, sellDate: '2025-03-02', sellTime: '11:36', inStock: false },
80
    { model: 'LED Bike Light', price: 586.82, sellDate: '2025-11-22', sellTime: '20:29', inStock: false },
81
    { model: 'Action Camera', price: 406.41, sellDate: '2025-10-25', sellTime: '11:10', inStock: false },
82
    { model: 'Road Tire Tube', price: 595.55, sellDate: '2025-05-24', sellTime: '01:30', inStock: false },
83
    { model: 'Racing Socks', price: 1078.63, sellDate: '2025-04-28', sellTime: '02:57', inStock: true },
84
    { model: 'Cycling Cap', price: 1781.04, sellDate: '2025-10-07', sellTime: '06:58', inStock: false },
85
    { model: 'Trail Helmet', price: 181.8, sellDate: '2025-10-02', sellTime: '20:04', inStock: false },
86
    { model: 'HL Mountain Frame', price: 489.39, sellDate: '2025-07-20', sellTime: '10:51', inStock: true },
87
    { model: 'HL Road Tire', price: 1964.04, sellDate: '2025-07-10', sellTime: '15:01', inStock: true },
88
    { model: 'Action Camera', price: 1321.19, sellDate: '2025-02-02', sellTime: '13:39', inStock: true },
89
    { model: 'Trail Helmet', price: 1311.09, sellDate: '2025-12-27', sellTime: '14:45', inStock: false },
90
    { model: 'Windbreaker Jacket', price: 1573.57, sellDate: '2025-09-20', sellTime: '20:31', inStock: false },
91
    { model: 'Speed Gloves', price: 338.01, sellDate: '2025-10-22', sellTime: '18:56', inStock: false },
92
    { model: 'Carbon Handlebar', price: 309.18, sellDate: '2025-11-10', sellTime: '15:20', inStock: true },
93
    { model: 'LED Bike Light', price: 1289.0, sellDate: '2025-08-22', sellTime: '15:34', inStock: true },
94
    { model: 'Action Camera', price: 1655.66, sellDate: '2025-06-12', sellTime: '15:38', inStock: false },
95
    { model: 'Hydration Pack', price: 1126.33, sellDate: '2025-09-15', sellTime: '06:29', inStock: false },
96
    { model: 'Racing Socks', price: 157.45, sellDate: '2025-01-26', sellTime: '19:25', inStock: true },
97
    { model: 'Aero Bottle', price: 1707.67, sellDate: '2025-02-02', sellTime: '17:34', inStock: true },
98
    { model: 'Road Tire Tube', price: 601.95, sellDate: '2025-04-14', sellTime: '08:02', inStock: true },
99
    { model: 'HL Road Tire', price: 118.42, sellDate: '2025-02-08', sellTime: '06:08', inStock: false },
100
    { model: 'Racing Socks', price: 1721.99, sellDate: '2025-10-13', sellTime: '09:01', inStock: true },
101
    { model: 'Action Camera', price: 1620.39, sellDate: '2025-07-18', sellTime: '05:53', inStock: false },
102
    { model: 'Trail Helmet', price: 1051.16, sellDate: '2025-01-21', sellTime: '09:44', inStock: true },
103
    { model: 'Fitness Watch', price: 1534.64, sellDate: '2025-02-27', sellTime: '09:19', inStock: true },
104
    { model: 'Comfort Saddle', price: 984.12, sellDate: '2025-03-16', sellTime: '07:24', inStock: false },
105
    { model: 'Comfort Saddle', price: 1316.13, sellDate: '2025-02-11', sellTime: '11:01', inStock: true },
106
    { model: 'Carbon Handlebar', price: 774.69, sellDate: '2025-10-17', sellTime: '11:38', inStock: false },
107
    { model: 'Road Tire Tube', price: 1887.19, sellDate: '2025-10-19', sellTime: '06:02', inStock: true },
108
    { model: 'Cycling Cap', price: 519.44, sellDate: '2025-10-21', sellTime: '03:54', inStock: true },
109
    { model: 'Trail Helmet', price: 1149.2, sellDate: '2025-04-24', sellTime: '04:40', inStock: false },
110
    { model: 'Carbon Handlebar', price: 915.24, sellDate: '2025-07-10', sellTime: '05:22', inStock: true },
111
    { model: 'Comfort Saddle', price: 1625.63, sellDate: '2025-03-31', sellTime: '23:55', inStock: true },
112
    { model: 'Racing Socks', price: 143.76, sellDate: '2025-12-02', sellTime: '07:25', inStock: true },
113
    { model: 'Cycling Cap', price: 981.24, sellDate: '2025-08-09', sellTime: '19:52', inStock: false },
114
    { model: 'Comfort Saddle', price: 779.4, sellDate: '2025-06-12', sellTime: '17:08', inStock: true },
115
    { model: 'Carbon Handlebar', price: 1512.24, sellDate: '2025-07-27', sellTime: '07:02', inStock: true },
116
    { model: 'Cycling Cap', price: 444.79, sellDate: '2025-09-11', sellTime: '10:05', inStock: false }
117
  ];
118

119
  readonly hotSettings: GridSettings = {
120
    pagination: true,
121
    autoRowSize: true,
47 collapsed lines
122
    columns: [
123
      {
124
        title: 'Model',
125
        type: 'text',
126
        data: 'model',
127
        width: 150,
128
        headerClassName: 'htLeft',
129
      },
130
      {
131
        title: 'Price',
132
        type: 'numeric',
133
        data: 'price',
134
        width: 80,
135
        locale: 'en-US',
136
        numericFormat: {
137
          style: 'currency',
138
          currency: 'USD',
139
          minimumFractionDigits: 2,
140
        },
141
        className: 'htRight',
142
        headerClassName: 'htRight',
143
      },
144
      {
145
        title: 'Date',
146
        type: 'intl-date',
147
        data: 'sellDate',
148
        width: 130,
149
        locale: 'en-US',
150
        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
151
        className: 'htRight',
152
        headerClassName: 'htRight',
153

154
      },
155
      {
156
        title: 'Time',
157
        type: 'intl-time',
158
        data: 'sellTime',
159
        width: 90,
160
        locale: 'en-US',
161
        timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
162
        className: 'htRight',
163
        headerClassName: 'htRight',
164
      },
165
      {
166
        title: 'In stock',
167
        type: 'checkbox',
168
        data: 'inStock',
169
        className: 'htCenter',
170
        headerClassName: 'htCenter',
171
      },
172
    ],
173
    width: '100%',
174
    height: 300,
175
    stretchH: 'all',
176
    contextMenu: true,
177
    rowHeaders: true,
178
    colHeaders: true,
179
    autoWrapRow: true,
180
    autoWrapCol: true,
181
  };
182
}
183
/* end-file */
184

185

186

187
/* file: app.config.ts */
188
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
189
import { registerAllModules } from 'handsontable/registry';
190
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';
191

192
// register Handsontable's modules
193
registerAllModules();
194

195
export const appConfig: ApplicationConfig = {
196
  providers: [
197
    provideZoneChangeDetection({ eventCoalescing: true }),
198
    {
199
      provide: HOT_GLOBAL_CONFIG,
200
      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,
201
    },
202
  ],
203
};
204
/* end-file */

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

Enable pagination

To enable pagination set the pagination option to true.

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

Defining the option as true is equivalent to defining the following options:

1
const configurationOptions = {
2
  pagination: {
3
    pageSize: 10,
4
    pageSizeList: ['auto', 5, 10, 20, 50, 100],
5
    initialPage: 1,
6
    showPageSize: true,
7
    showCounter: true,
8
    showNavigation: true,
9
    uiContainer: null,
10
  },
11
};

Configure pagination

You can customize pagination using available settings, such as showing or hiding specific UI sections like the page size selector, page counter, or page navigation.

Control aspects such as the number of rows per page, the initial page on load, or whether the grid should automatically adjust page size based on the container’s height.

You can configure the following options:

1
const configurationOptions = {
2
  pagination: {
3
    // Set number of rows per page. If the value is `auto` then the
4
    // page size is calculated
5
    // based on available height.
6
    pageSize: 20,
7
    // Provide a list of selectable page sizes
8
    pageSizeList: ['auto', 10, 20, 50],
9
    // Set the initial page when the grid loads
10
    initialPage: 2,
11
    // Show or hide the page size section
12
    showPageSize: false,
13
    // Show or hide the page counter section
14
    showCounter: true,
15
    // Show or hide the page navigation section
16
    showNavigation: true,
17
    // Custom container where the pagination UI will be injected
18
    // (optional)
19
    uiContainer: null,
20
  }
21
};

In the data grid below, several pagination options are applied to provide a customized experience. The demo allows you to resize the table container and observe how the auto page size feature (pageSize: 'auto') dynamically adjusts the number of visible rows to fit the available space.

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

5
@Component({
6
  standalone: true,
7
  imports: [HotTableModule],
8
  selector: 'app-example2',
9
  template: `
10
    <hot-table
11
      [settings]="hotSettings!" [data]="hotData">
12
    </hot-table>
13
  `,
14
  styles: `
15
    :host ::ng-deep {
100 collapsed lines
16
      .ht-root-wrapper {
17
        border: 1px dashed var(--sl-color-accent);
18
        border-radius: 4px;
19
        height: 300px;
20
        min-height: 120px;
21
        max-height: 600px;
22
        resize: vertical;
23
        overflow: auto;
24
      }
25
    }
26
  `,
27
})
28
export class AppComponent {
29
  readonly hotData = [
30
    { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },
31
    { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },
32
    { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },
33
    { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },
34
    { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },
35
    { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },
36
    { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },
37
    { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },
38
    { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },
39
    { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },
40
    { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },
41
    { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },
42
    { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },
43
    { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },
44
    { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },
45
    { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },
46
    { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },
47
    { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },
48
    { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },
49
    { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },
50
    { model: 'Aero Bottle', price: 1334.03, sellDate: '2025-01-24', sellTime: '03:29', inStock: false },
51
    { model: 'Road Tire Tube', price: 1841.17, sellDate: '2025-05-22', sellTime: '01:45', inStock: false },
52
    { model: 'Aero Bottle', price: 1622.05, sellDate: '2025-01-13', sellTime: '08:30', inStock: true },
53
    { model: 'Comfort Saddle', price: 1456.24, sellDate: '2025-07-20', sellTime: '03:39', inStock: false },
54
    { model: 'Windbreaker Jacket', price: 1736.96, sellDate: '2025-09-25', sellTime: '00:43', inStock: true },
55
    { model: 'Fitness Watch', price: 1075.31, sellDate: '2025-11-07', sellTime: '17:47', inStock: true },
56
    { model: 'Cycling Cap', price: 726.01, sellDate: '2025-10-28', sellTime: '12:44', inStock: true },
57
    { model: 'Road Tire Tube', price: 601.99, sellDate: '2025-09-22', sellTime: '00:26', inStock: true },
58
    { model: 'Speed Gloves', price: 1758.26, sellDate: '2025-10-04', sellTime: '04:59', inStock: true },
59
    { model: 'Speed Gloves', price: 564.35, sellDate: '2025-07-10', sellTime: '18:21', inStock: true },
60
    { model: 'Hydration Pack', price: 954.84, sellDate: '2025-11-02', sellTime: '00:59', inStock: false },
61
    { model: 'Cycling Cap', price: 1511.5, sellDate: '2025-02-11', sellTime: '02:38', inStock: false },
62
    { model: 'HL Road Tire', price: 269.6, sellDate: '2025-06-18', sellTime: '04:58', inStock: false },
63
    { model: 'Road Tire Tube', price: 435.07, sellDate: '2025-07-22', sellTime: '23:12', inStock: false },
64
    { model: 'Fitness Watch', price: 1187.8, sellDate: '2025-08-13', sellTime: '10:19', inStock: true },
65
    { model: 'Racing Socks', price: 770.19, sellDate: '2025-02-02', sellTime: '20:37', inStock: true },
66
    { model: 'Carbon Handlebar', price: 60.41, sellDate: '2025-12-27', sellTime: '20:30', inStock: true },
67
    { model: 'Racing Socks', price: 944.21, sellDate: '2025-05-23', sellTime: '18:43', inStock: false },
68
    { model: 'Racing Socks', price: 621.96, sellDate: '2025-12-12', sellTime: '04:59', inStock: false },
69
    { model: 'HL Road Tire', price: 774.91, sellDate: '2025-06-02', sellTime: '03:48', inStock: true },
70
    { model: 'LED Bike Light', price: 1205.29, sellDate: '2025-04-15', sellTime: '22:08', inStock: false },
71
    { model: 'Racing Socks', price: 388.19, sellDate: '2025-05-24', sellTime: '08:36', inStock: true },
72
    { model: 'Windbreaker Jacket', price: 267.88, sellDate: '2025-05-25', sellTime: '15:00', inStock: true },
73
    { model: 'LED Bike Light', price: 283.72, sellDate: '2025-09-26', sellTime: '02:16', inStock: true },
74
    { model: 'Comfort Saddle', price: 1782.91, sellDate: '2025-03-07', sellTime: '09:43', inStock: false },
75
    { model: 'Trail Helmet', price: 1943.46, sellDate: '2025-06-05', sellTime: '01:49', inStock: true },
76
    { model: 'Speed Gloves', price: 1737.8, sellDate: '2025-09-18', sellTime: '14:21', inStock: true },
77
    { model: 'Road Tire Tube', price: 354.89, sellDate: '2025-08-11', sellTime: '02:03', inStock: true },
78
    { model: 'Hydration Pack', price: 1490.45, sellDate: '2025-12-04', sellTime: '02:23', inStock: true },
79
    { model: 'LED Bike Light', price: 844.48, sellDate: '2025-09-22', sellTime: '02:29', inStock: true },
80
    { model: 'Road Tire Tube', price: 1965.77, sellDate: '2025-02-10', sellTime: '23:52', inStock: false },
81
    { model: 'Action Camera', price: 522.33, sellDate: '2025-11-11', sellTime: '16:50', inStock: false },
82
    { model: 'Comfort Saddle', price: 109.4, sellDate: '2025-05-13', sellTime: '11:41', inStock: true },
83
    { model: 'Hydration Pack', price: 1067.76, sellDate: '2025-08-07', sellTime: '05:04', inStock: false },
84
    { model: 'Speed Gloves', price: 1738.77, sellDate: '2025-01-28', sellTime: '08:38', inStock: false },
85
    { model: 'Aero Bottle', price: 1600.35, sellDate: '2025-01-29', sellTime: '00:36', inStock: false },
86
    { model: 'Speed Gloves', price: 524.91, sellDate: '2025-12-15', sellTime: '12:56', inStock: true },
87
    { model: 'Windbreaker Jacket', price: 1780.51, sellDate: '2025-09-23', sellTime: '05:02', inStock: false },
88
    { model: 'Comfort Saddle', price: 1955.0, sellDate: '2025-09-29', sellTime: '13:03', inStock: false },
89
    { model: 'Speed Gloves', price: 957.4, sellDate: '2025-08-06', sellTime: '03:19', inStock: true },
90
    { model: 'Fitness Watch', price: 193.72, sellDate: '2025-04-01', sellTime: '19:49', inStock: false },
91
    { model: 'Speed Gloves', price: 677.94, sellDate: '2025-10-11', sellTime: '22:25', inStock: false },
92
    { model: 'LED Bike Light', price: 1155.9, sellDate: '2025-03-02', sellTime: '11:36', inStock: false },
93
    { model: 'LED Bike Light', price: 586.82, sellDate: '2025-11-22', sellTime: '20:29', inStock: false },
94
    { model: 'Action Camera', price: 406.41, sellDate: '2025-10-25', sellTime: '11:10', inStock: false },
95
    { model: 'Road Tire Tube', price: 595.55, sellDate: '2025-05-24', sellTime: '01:30', inStock: false },
96
    { model: 'Racing Socks', price: 1078.63, sellDate: '2025-04-28', sellTime: '02:57', inStock: true },
97
    { model: 'Cycling Cap', price: 1781.04, sellDate: '2025-10-07', sellTime: '06:58', inStock: false },
98
    { model: 'Trail Helmet', price: 181.8, sellDate: '2025-10-02', sellTime: '20:04', inStock: false },
99
    { model: 'HL Mountain Frame', price: 489.39, sellDate: '2025-07-20', sellTime: '10:51', inStock: true },
100
    { model: 'HL Road Tire', price: 1964.04, sellDate: '2025-07-10', sellTime: '15:01', inStock: true },
101
    { model: 'Action Camera', price: 1321.19, sellDate: '2025-02-02', sellTime: '13:39', inStock: true },
102
    { model: 'Trail Helmet', price: 1311.09, sellDate: '2025-12-27', sellTime: '14:45', inStock: false },
103
    { model: 'Windbreaker Jacket', price: 1573.57, sellDate: '2025-09-20', sellTime: '20:31', inStock: false },
104
    { model: 'Speed Gloves', price: 338.01, sellDate: '2025-10-22', sellTime: '18:56', inStock: false },
105
    { model: 'Carbon Handlebar', price: 309.18, sellDate: '2025-11-10', sellTime: '15:20', inStock: true },
106
    { model: 'LED Bike Light', price: 1289.0, sellDate: '2025-08-22', sellTime: '15:34', inStock: true },
107
    { model: 'Action Camera', price: 1655.66, sellDate: '2025-06-12', sellTime: '15:38', inStock: false },
108
    { model: 'Hydration Pack', price: 1126.33, sellDate: '2025-09-15', sellTime: '06:29', inStock: false },
109
    { model: 'Racing Socks', price: 157.45, sellDate: '2025-01-26', sellTime: '19:25', inStock: true },
110
    { model: 'Aero Bottle', price: 1707.67, sellDate: '2025-02-02', sellTime: '17:34', inStock: true },
111
    { model: 'Road Tire Tube', price: 601.95, sellDate: '2025-04-14', sellTime: '08:02', inStock: true },
112
    { model: 'HL Road Tire', price: 118.42, sellDate: '2025-02-08', sellTime: '06:08', inStock: false },
113
    { model: 'Racing Socks', price: 1721.99, sellDate: '2025-10-13', sellTime: '09:01', inStock: true },
114
    { model: 'Action Camera', price: 1620.39, sellDate: '2025-07-18', sellTime: '05:53', inStock: false },
115
    { model: 'Trail Helmet', price: 1051.16, sellDate: '2025-01-21', sellTime: '09:44', inStock: true },
116
    { model: 'Fitness Watch', price: 1534.64, sellDate: '2025-02-27', sellTime: '09:19', inStock: true },
117
    { model: 'Comfort Saddle', price: 984.12, sellDate: '2025-03-16', sellTime: '07:24', inStock: false },
118
    { model: 'Comfort Saddle', price: 1316.13, sellDate: '2025-02-11', sellTime: '11:01', inStock: true },
119
    { model: 'Carbon Handlebar', price: 774.69, sellDate: '2025-10-17', sellTime: '11:38', inStock: false },
120
    { model: 'Road Tire Tube', price: 1887.19, sellDate: '2025-10-19', sellTime: '06:02', inStock: true },
121
    { model: 'Cycling Cap', price: 519.44, sellDate: '2025-10-21', sellTime: '03:54', inStock: true },
122
    { model: 'Trail Helmet', price: 1149.2, sellDate: '2025-04-24', sellTime: '04:40', inStock: false },
123
    { model: 'Carbon Handlebar', price: 915.24, sellDate: '2025-07-10', sellTime: '05:22', inStock: true },
124
    { model: 'Comfort Saddle', price: 1625.63, sellDate: '2025-03-31', sellTime: '23:55', inStock: true },
125
    { model: 'Racing Socks', price: 143.76, sellDate: '2025-12-02', sellTime: '07:25', inStock: true },
126
    { model: 'Cycling Cap', price: 981.24, sellDate: '2025-08-09', sellTime: '19:52', inStock: false },
127
    { model: 'Comfort Saddle', price: 779.4, sellDate: '2025-06-12', sellTime: '17:08', inStock: true },
128
    { model: 'Carbon Handlebar', price: 1512.24, sellDate: '2025-07-27', sellTime: '07:02', inStock: true },
129
    { model: 'Cycling Cap', price: 444.79, sellDate: '2025-09-11', sellTime: '10:05', inStock: false }
130
  ];
131

132
  readonly hotSettings: GridSettings = {
133
    pagination: {
134
      pageSize: 'auto',
135
      pageSizeList: ['auto', 5, 10, 20, 50, 100],
136
      initialPage: 2,
137
      showPageSize: true,
138
      showCounter: false,
139
      showNavigation: true,
140
    },
141
    autoRowSize: true,
47 collapsed lines
142
    columns: [
143
      {
144
        title: 'Model',
145
        type: 'text',
146
        data: 'model',
147
        width: 150,
148
        headerClassName: 'htLeft',
149
      },
150
      {
151
        title: 'Price',
152
        type: 'numeric',
153
        data: 'price',
154
        width: 80,
155
        locale: 'en-US',
156
        numericFormat: {
157
          style: 'currency',
158
          currency: 'USD',
159
          minimumFractionDigits: 2,
160
        },
161
        className: 'htRight',
162
        headerClassName: 'htRight',
163
      },
164
      {
165
        title: 'Date',
166
        type: 'intl-date',
167
        data: 'sellDate',
168
        width: 130,
169
        locale: 'en-US',
170
        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
171
        className: 'htRight',
172
        headerClassName: 'htRight',
173

174
      },
175
      {
176
        title: 'Time',
177
        type: 'intl-time',
178
        data: 'sellTime',
179
        width: 90,
180
        locale: 'en-US',
181
        timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
182
        className: 'htRight',
183
        headerClassName: 'htRight',
184
      },
185
      {
186
        title: 'In stock',
187
        type: 'checkbox',
188
        data: 'inStock',
189
        className: 'htCenter',
190
        headerClassName: 'htCenter',
191
      },
192
    ],
193
    width: '100%',
194
    height: '100%',
195
    stretchH: 'all',
196
    contextMenu: true,
197
    dropdownMenu: true,
198
    filters: true,
199
    columnSorting: true,
200
    rowHeaders: true,
201
    colHeaders: true,
202
    autoWrapRow: true,
203
    autoWrapCol: true,
204
  };
205
}
206
/* end-file */
207

208

209

210
/* file: app.config.ts */
211
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
212
import { registerAllModules } from 'handsontable/registry';
213
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';
214

215
// register Handsontable's modules
216
registerAllModules();
217

218
export const appConfig: ApplicationConfig = {
219
  providers: [
220
    provideZoneChangeDetection({ eventCoalescing: true }),
221
    {
222
      provide: HOT_GLOBAL_CONFIG,
223
      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,
224
    },
225
  ],
226
};
227
/* end-file */

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

Control pagination programmatically

Build your own pagination UI using API methods such as setPage(), nextPage(), prevPage(), and more. For a complete list of available methods and hooks, see the Pagination plugin API reference.

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

6
@Component({
7
  standalone: true,
8
  imports: [HotTableModule],
9
  selector: 'app-example3',
10
  template: `
11
    <div class="example-controls-container">
12
      <div class="controls">
13
        <button [disabled]="isFirstPage" (click)="goToFirstPage()">First page</button>
14
        <button [disabled]="isFirstPage" (click)="goToPrevPage()">Previous page</button>
15
        <button [disabled]="isLastPage" (click)="goToNextPage()">Next page</button>
16
        <button [disabled]="isLastPage" (click)="goToLastPage()">Last page</button>
17
        <label for="pageNumber">Page:
18
          <input type="number" id="pageNumber" [value]="currentPage" [min]="1" [max]="totalPages" (input)="onPageNumberChange($event)">
19
        </label>
20
        <output>{{ firstVisibleRow }} - {{ lastVisibleRow }} of {{ totalRows }} rows</output>
21
      </div>
22
    </div>
23
    <hot-table
24
      #hotTable
25
      [settings]="hotSettings!" [data]="hotData">
26
    </hot-table>
27
  `,
28
})
29
export class AppComponent implements AfterViewInit {
30
  @ViewChild('hotTable') hotTable!: HotTableComponent;
31

32
  private paginationPlugin: any;
33

34
  currentPage = 1;
35
  totalPages = 1;
36
  isFirstPage = true;
37
  isLastPage = false;
38
  firstVisibleRow = 1;
39
  lastVisibleRow = 1;
40
  totalRows = 1;
41

100 collapsed lines
42
  readonly hotData = [
43
    { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },
44
    { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },
45
    { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },
46
    { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },
47
    { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },
48
    { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },
49
    { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },
50
    { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },
51
    { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },
52
    { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },
53
    { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },
54
    { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },
55
    { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },
56
    { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },
57
    { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },
58
    { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },
59
    { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },
60
    { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },
61
    { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },
62
    { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },
63
    { model: 'Aero Bottle', price: 1334.03, sellDate: '2025-01-24', sellTime: '03:29', inStock: false },
64
    { model: 'Road Tire Tube', price: 1841.17, sellDate: '2025-05-22', sellTime: '01:45', inStock: false },
65
    { model: 'Aero Bottle', price: 1622.05, sellDate: '2025-01-13', sellTime: '08:30', inStock: true },
66
    { model: 'Comfort Saddle', price: 1456.24, sellDate: '2025-07-20', sellTime: '03:39', inStock: false },
67
    { model: 'Windbreaker Jacket', price: 1736.96, sellDate: '2025-09-25', sellTime: '00:43', inStock: true },
68
    { model: 'Fitness Watch', price: 1075.31, sellDate: '2025-11-07', sellTime: '17:47', inStock: true },
69
    { model: 'Cycling Cap', price: 726.01, sellDate: '2025-10-28', sellTime: '12:44', inStock: true },
70
    { model: 'Road Tire Tube', price: 601.99, sellDate: '2025-09-22', sellTime: '00:26', inStock: true },
71
    { model: 'Speed Gloves', price: 1758.26, sellDate: '2025-10-04', sellTime: '04:59', inStock: true },
72
    { model: 'Speed Gloves', price: 564.35, sellDate: '2025-07-10', sellTime: '18:21', inStock: true },
73
    { model: 'Hydration Pack', price: 954.84, sellDate: '2025-11-02', sellTime: '00:59', inStock: false },
74
    { model: 'Cycling Cap', price: 1511.5, sellDate: '2025-02-11', sellTime: '02:38', inStock: false },
75
    { model: 'HL Road Tire', price: 269.6, sellDate: '2025-06-18', sellTime: '04:58', inStock: false },
76
    { model: 'Road Tire Tube', price: 435.07, sellDate: '2025-07-22', sellTime: '23:12', inStock: false },
77
    { model: 'Fitness Watch', price: 1187.8, sellDate: '2025-08-13', sellTime: '10:19', inStock: true },
78
    { model: 'Racing Socks', price: 770.19, sellDate: '2025-02-02', sellTime: '20:37', inStock: true },
79
    { model: 'Carbon Handlebar', price: 60.41, sellDate: '2025-12-27', sellTime: '20:30', inStock: true },
80
    { model: 'Racing Socks', price: 944.21, sellDate: '2025-05-23', sellTime: '18:43', inStock: false },
81
    { model: 'Racing Socks', price: 621.96, sellDate: '2025-12-12', sellTime: '04:59', inStock: false },
82
    { model: 'HL Road Tire', price: 774.91, sellDate: '2025-06-02', sellTime: '03:48', inStock: true },
83
    { model: 'LED Bike Light', price: 1205.29, sellDate: '2025-04-15', sellTime: '22:08', inStock: false },
84
    { model: 'Racing Socks', price: 388.19, sellDate: '2025-05-24', sellTime: '08:36', inStock: true },
85
    { model: 'Windbreaker Jacket', price: 267.88, sellDate: '2025-05-25', sellTime: '15:00', inStock: true },
86
    { model: 'LED Bike Light', price: 283.72, sellDate: '2025-09-26', sellTime: '02:16', inStock: true },
87
    { model: 'Comfort Saddle', price: 1782.91, sellDate: '2025-03-07', sellTime: '09:43', inStock: false },
88
    { model: 'Trail Helmet', price: 1943.46, sellDate: '2025-06-05', sellTime: '01:49', inStock: true },
89
    { model: 'Speed Gloves', price: 1737.8, sellDate: '2025-09-18', sellTime: '14:21', inStock: true },
90
    { model: 'Road Tire Tube', price: 354.89, sellDate: '2025-08-11', sellTime: '02:03', inStock: true },
91
    { model: 'Hydration Pack', price: 1490.45, sellDate: '2025-12-04', sellTime: '02:23', inStock: true },
92
    { model: 'LED Bike Light', price: 844.48, sellDate: '2025-09-22', sellTime: '02:29', inStock: true },
93
    { model: 'Road Tire Tube', price: 1965.77, sellDate: '2025-02-10', sellTime: '23:52', inStock: false },
94
    { model: 'Action Camera', price: 522.33, sellDate: '2025-11-11', sellTime: '16:50', inStock: false },
95
    { model: 'Comfort Saddle', price: 109.4, sellDate: '2025-05-13', sellTime: '11:41', inStock: true },
96
    { model: 'Hydration Pack', price: 1067.76, sellDate: '2025-08-07', sellTime: '05:04', inStock: false },
97
    { model: 'Speed Gloves', price: 1738.77, sellDate: '2025-01-28', sellTime: '08:38', inStock: false },
98
    { model: 'Aero Bottle', price: 1600.35, sellDate: '2025-01-29', sellTime: '00:36', inStock: false },
99
    { model: 'Speed Gloves', price: 524.91, sellDate: '2025-12-15', sellTime: '12:56', inStock: true },
100
    { model: 'Windbreaker Jacket', price: 1780.51, sellDate: '2025-09-23', sellTime: '05:02', inStock: false },
101
    { model: 'Comfort Saddle', price: 1955.0, sellDate: '2025-09-29', sellTime: '13:03', inStock: false },
102
    { model: 'Speed Gloves', price: 957.4, sellDate: '2025-08-06', sellTime: '03:19', inStock: true },
103
    { model: 'Fitness Watch', price: 193.72, sellDate: '2025-04-01', sellTime: '19:49', inStock: false },
104
    { model: 'Speed Gloves', price: 677.94, sellDate: '2025-10-11', sellTime: '22:25', inStock: false },
105
    { model: 'LED Bike Light', price: 1155.9, sellDate: '2025-03-02', sellTime: '11:36', inStock: false },
106
    { model: 'LED Bike Light', price: 586.82, sellDate: '2025-11-22', sellTime: '20:29', inStock: false },
107
    { model: 'Action Camera', price: 406.41, sellDate: '2025-10-25', sellTime: '11:10', inStock: false },
108
    { model: 'Road Tire Tube', price: 595.55, sellDate: '2025-05-24', sellTime: '01:30', inStock: false },
109
    { model: 'Racing Socks', price: 1078.63, sellDate: '2025-04-28', sellTime: '02:57', inStock: true },
110
    { model: 'Cycling Cap', price: 1781.04, sellDate: '2025-10-07', sellTime: '06:58', inStock: false },
111
    { model: 'Trail Helmet', price: 181.8, sellDate: '2025-10-02', sellTime: '20:04', inStock: false },
112
    { model: 'HL Mountain Frame', price: 489.39, sellDate: '2025-07-20', sellTime: '10:51', inStock: true },
113
    { model: 'HL Road Tire', price: 1964.04, sellDate: '2025-07-10', sellTime: '15:01', inStock: true },
114
    { model: 'Action Camera', price: 1321.19, sellDate: '2025-02-02', sellTime: '13:39', inStock: true },
115
    { model: 'Trail Helmet', price: 1311.09, sellDate: '2025-12-27', sellTime: '14:45', inStock: false },
116
    { model: 'Windbreaker Jacket', price: 1573.57, sellDate: '2025-09-20', sellTime: '20:31', inStock: false },
117
    { model: 'Speed Gloves', price: 338.01, sellDate: '2025-10-22', sellTime: '18:56', inStock: false },
118
    { model: 'Carbon Handlebar', price: 309.18, sellDate: '2025-11-10', sellTime: '15:20', inStock: true },
119
    { model: 'LED Bike Light', price: 1289.0, sellDate: '2025-08-22', sellTime: '15:34', inStock: true },
120
    { model: 'Action Camera', price: 1655.66, sellDate: '2025-06-12', sellTime: '15:38', inStock: false },
121
    { model: 'Hydration Pack', price: 1126.33, sellDate: '2025-09-15', sellTime: '06:29', inStock: false },
122
    { model: 'Racing Socks', price: 157.45, sellDate: '2025-01-26', sellTime: '19:25', inStock: true },
123
    { model: 'Aero Bottle', price: 1707.67, sellDate: '2025-02-02', sellTime: '17:34', inStock: true },
124
    { model: 'Road Tire Tube', price: 601.95, sellDate: '2025-04-14', sellTime: '08:02', inStock: true },
125
    { model: 'HL Road Tire', price: 118.42, sellDate: '2025-02-08', sellTime: '06:08', inStock: false },
126
    { model: 'Racing Socks', price: 1721.99, sellDate: '2025-10-13', sellTime: '09:01', inStock: true },
127
    { model: 'Action Camera', price: 1620.39, sellDate: '2025-07-18', sellTime: '05:53', inStock: false },
128
    { model: 'Trail Helmet', price: 1051.16, sellDate: '2025-01-21', sellTime: '09:44', inStock: true },
129
    { model: 'Fitness Watch', price: 1534.64, sellDate: '2025-02-27', sellTime: '09:19', inStock: true },
130
    { model: 'Comfort Saddle', price: 984.12, sellDate: '2025-03-16', sellTime: '07:24', inStock: false },
131
    { model: 'Comfort Saddle', price: 1316.13, sellDate: '2025-02-11', sellTime: '11:01', inStock: true },
132
    { model: 'Carbon Handlebar', price: 774.69, sellDate: '2025-10-17', sellTime: '11:38', inStock: false },
133
    { model: 'Road Tire Tube', price: 1887.19, sellDate: '2025-10-19', sellTime: '06:02', inStock: true },
134
    { model: 'Cycling Cap', price: 519.44, sellDate: '2025-10-21', sellTime: '03:54', inStock: true },
135
    { model: 'Trail Helmet', price: 1149.2, sellDate: '2025-04-24', sellTime: '04:40', inStock: false },
136
    { model: 'Carbon Handlebar', price: 915.24, sellDate: '2025-07-10', sellTime: '05:22', inStock: true },
137
    { model: 'Comfort Saddle', price: 1625.63, sellDate: '2025-03-31', sellTime: '23:55', inStock: true },
138
    { model: 'Racing Socks', price: 143.76, sellDate: '2025-12-02', sellTime: '07:25', inStock: true },
139
    { model: 'Cycling Cap', price: 981.24, sellDate: '2025-08-09', sellTime: '19:52', inStock: false },
140
    { model: 'Comfort Saddle', price: 779.4, sellDate: '2025-06-12', sellTime: '17:08', inStock: true },
141
    { model: 'Carbon Handlebar', price: 1512.24, sellDate: '2025-07-27', sellTime: '07:02', inStock: true },
142
    { model: 'Cycling Cap', price: 444.79, sellDate: '2025-09-11', sellTime: '10:05', inStock: false }
143
  ];
144

145
  readonly hotSettings: GridSettings = {
146
    pagination: {
147
      pageSize: 25,
148
      initialPage: 1,
149
      showPageSize: false,
150
      showCounter: false,
151
      showNavigation: false,
152
    },
153
    autoRowSize: true,
47 collapsed lines
154
    columns: [
155
      {
156
        title: 'Model',
157
        type: 'text',
158
        data: 'model',
159
        width: 150,
160
        headerClassName: 'htLeft',
161
      },
162
      {
163
        title: 'Price',
164
        type: 'numeric',
165
        data: 'price',
166
        width: 80,
167
        locale: 'en-US',
168
        numericFormat: {
169
          style: 'currency',
170
          currency: 'USD',
171
          minimumFractionDigits: 2,
172
        },
173
        className: 'htRight',
174
        headerClassName: 'htRight',
175
      },
176
      {
177
        title: 'Date',
178
        type: 'intl-date',
179
        data: 'sellDate',
180
        width: 130,
181
        locale: 'en-US',
182
        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
183
        className: 'htRight',
184
        headerClassName: 'htRight',
185

186
      },
187
      {
188
        title: 'Time',
189
        type: 'intl-time',
190
        data: 'sellTime',
191
        width: 90,
192
        locale: 'en-US',
193
        timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
194
        className: 'htRight',
195
        headerClassName: 'htRight',
196
      },
197
      {
198
        title: 'In stock',
199
        type: 'checkbox',
200
        data: 'inStock',
201
        className: 'htCenter',
202
        headerClassName: 'htCenter',
203
      },
204
    ],
205
    width: '100%',
206
    height: 300,
207
    stretchH: 'all',
208
    contextMenu: true,
209
    rowHeaders: true,
210
    colHeaders: true,
211
    autoWrapRow: true,
212
    autoWrapCol: true,
213
  };
214

215
  ngAfterViewInit() {
216
    const hotInstance = this.hotTable.hotInstance;
217

218
    if (hotInstance) {
219
      this.paginationPlugin = hotInstance.getPlugin('pagination');
220

221
      // defer the state update to the next change detection cycle
222
      setTimeout(() => {
223
        this.updateState();
224
      });
225

226
      hotInstance.addHook('afterPageChange', () => {
227
        this.updateState();
228
      });
229
    }
230
  }
231

232
  private updateState() {
233
    const {
234
      currentPage,
235
      totalPages,
236
      firstVisibleRowIndex,
237
      lastVisibleRowIndex,
238
      totalRenderedRows,
239
    } = this.paginationPlugin.getPaginationData();
240

241
    this.currentPage = currentPage;
242
    this.totalPages = totalPages;
243
    this.isFirstPage = currentPage === 1;
244
    this.isLastPage = currentPage === totalPages;
245
    this.firstVisibleRow = firstVisibleRowIndex + 1;
246
    this.lastVisibleRow = lastVisibleRowIndex + 1;
247
    this.totalRows = totalRenderedRows;
248
  }
249

250
  goToFirstPage() {
251
    this.paginationPlugin.firstPage();
252
  }
253

254
  goToPrevPage() {
255
    this.paginationPlugin.prevPage();
256
  }
257

258
  goToNextPage() {
259
    this.paginationPlugin.nextPage();
260
  }
261

262
  goToLastPage() {
263
    this.paginationPlugin.lastPage();
264
  }
265

266
  onPageNumberChange(event: Event) {
267
    const target = event.target as HTMLInputElement;
268
    const pageNumber = parseInt(target.value, 10);
269

270
    if (!isNaN(pageNumber)) {
271
      this.paginationPlugin.setPage(pageNumber);
272
    }
273
  }
274
}
275
/* end-file */
276

277

278

279
/* file: app.config.ts */
280
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
281
import { registerAllModules } from 'handsontable/registry';
282
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';
283

284
// register Handsontable's modules
285
registerAllModules();
286

287
export const appConfig: ApplicationConfig = {
288
  providers: [
289
    provideZoneChangeDetection({ eventCoalescing: true }),
290
    {
291
      provide: HOT_GLOBAL_CONFIG,
292
      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,
293
    },
294
  ],
295
};
296
/* end-file */

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

Choose where to display the pagination UI

By default, the pagination UI is displayed at the bottom of the grid. You can change the place of the pagination component by setting the uiContainer option to a custom container element.

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

6
@Component({
7
  selector: 'app-example4',
8
  template: `
9
    <hot-table
10
      #hotTable
11
      [settings]="hotSettings!" [data]="hotData">
12
    </hot-table>
13
    <p>As you can see, the pagination component is detached from the grid and displayed in a custom container.</p>
14
    <div #customContainer id="example4-custom-container"></div>
15
  `,
100 collapsed lines
16
  styles: `
17
    #example4-custom-container {
18
      margin-top: 10px;
19
    }
20

21
    #example4-custom-container .ht-pagination {
22
      border-radius: 4px;
23
    }
24

25
    :host ::ng-deep {
26
      .ht-pagination {
27
        border-radius: 4px;
28
      }
29
    }
30
  `,
31
  standalone: true,
32
  imports: [HotTableModule],
33
})
34
export class AppComponent implements AfterViewInit {
35
  @ViewChild('hotTable') hotTable!: HotTableComponent;
36
  @ViewChild('customContainer', { read: ElementRef }) customContainer!: ElementRef;
37

38
  readonly hotData = [
39
    { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },
40
    { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },
41
    { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },
42
    { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },
43
    { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },
44
    { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },
45
    { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },
46
    { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },
47
    { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },
48
    { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },
49
    { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },
50
    { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },
51
    { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },
52
    { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },
53
    { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },
54
    { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },
55
    { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },
56
    { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },
57
    { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },
58
    { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },
59
    { model: 'Aero Bottle', price: 1334.03, sellDate: '2025-01-24', sellTime: '03:29', inStock: false },
60
    { model: 'Road Tire Tube', price: 1841.17, sellDate: '2025-05-22', sellTime: '01:45', inStock: false },
61
    { model: 'Aero Bottle', price: 1622.05, sellDate: '2025-01-13', sellTime: '08:30', inStock: true },
62
    { model: 'Comfort Saddle', price: 1456.24, sellDate: '2025-07-20', sellTime: '03:39', inStock: false },
63
    { model: 'Windbreaker Jacket', price: 1736.96, sellDate: '2025-09-25', sellTime: '00:43', inStock: true },
64
    { model: 'Fitness Watch', price: 1075.31, sellDate: '2025-11-07', sellTime: '17:47', inStock: true },
65
    { model: 'Cycling Cap', price: 726.01, sellDate: '2025-10-28', sellTime: '12:44', inStock: true },
66
    { model: 'Road Tire Tube', price: 601.99, sellDate: '2025-09-22', sellTime: '00:26', inStock: true },
67
    { model: 'Speed Gloves', price: 1758.26, sellDate: '2025-10-04', sellTime: '04:59', inStock: true },
68
    { model: 'Speed Gloves', price: 564.35, sellDate: '2025-07-10', sellTime: '18:21', inStock: true },
69
    { model: 'Hydration Pack', price: 954.84, sellDate: '2025-11-02', sellTime: '00:59', inStock: false },
70
    { model: 'Cycling Cap', price: 1511.5, sellDate: '2025-02-11', sellTime: '02:38', inStock: false },
71
    { model: 'HL Road Tire', price: 269.6, sellDate: '2025-06-18', sellTime: '04:58', inStock: false },
72
    { model: 'Road Tire Tube', price: 435.07, sellDate: '2025-07-22', sellTime: '23:12', inStock: false },
73
    { model: 'Fitness Watch', price: 1187.8, sellDate: '2025-08-13', sellTime: '10:19', inStock: true },
74
    { model: 'Racing Socks', price: 770.19, sellDate: '2025-02-02', sellTime: '20:37', inStock: true },
75
    { model: 'Carbon Handlebar', price: 60.41, sellDate: '2025-12-27', sellTime: '20:30', inStock: true },
76
    { model: 'Racing Socks', price: 944.21, sellDate: '2025-05-23', sellTime: '18:43', inStock: false },
77
    { model: 'Racing Socks', price: 621.96, sellDate: '2025-12-12', sellTime: '04:59', inStock: false },
78
    { model: 'HL Road Tire', price: 774.91, sellDate: '2025-06-02', sellTime: '03:48', inStock: true },
79
    { model: 'LED Bike Light', price: 1205.29, sellDate: '2025-04-15', sellTime: '22:08', inStock: false },
80
    { model: 'Racing Socks', price: 388.19, sellDate: '2025-05-24', sellTime: '08:36', inStock: true },
81
    { model: 'Windbreaker Jacket', price: 267.88, sellDate: '2025-05-25', sellTime: '15:00', inStock: true },
82
    { model: 'LED Bike Light', price: 283.72, sellDate: '2025-09-26', sellTime: '02:16', inStock: true },
83
    { model: 'Comfort Saddle', price: 1782.91, sellDate: '2025-03-07', sellTime: '09:43', inStock: false },
84
    { model: 'Trail Helmet', price: 1943.46, sellDate: '2025-06-05', sellTime: '01:49', inStock: true },
85
    { model: 'Speed Gloves', price: 1737.8, sellDate: '2025-09-18', sellTime: '14:21', inStock: true },
86
    { model: 'Road Tire Tube', price: 354.89, sellDate: '2025-08-11', sellTime: '02:03', inStock: true },
87
    { model: 'Hydration Pack', price: 1490.45, sellDate: '2025-12-04', sellTime: '02:23', inStock: true },
88
    { model: 'LED Bike Light', price: 844.48, sellDate: '2025-09-22', sellTime: '02:29', inStock: true },
89
    { model: 'Road Tire Tube', price: 1965.77, sellDate: '2025-02-10', sellTime: '23:52', inStock: false },
90
    { model: 'Action Camera', price: 522.33, sellDate: '2025-11-11', sellTime: '16:50', inStock: false },
91
    { model: 'Comfort Saddle', price: 109.4, sellDate: '2025-05-13', sellTime: '11:41', inStock: true },
92
    { model: 'Hydration Pack', price: 1067.76, sellDate: '2025-08-07', sellTime: '05:04', inStock: false },
93
    { model: 'Speed Gloves', price: 1738.77, sellDate: '2025-01-28', sellTime: '08:38', inStock: false },
94
    { model: 'Aero Bottle', price: 1600.35, sellDate: '2025-01-29', sellTime: '00:36', inStock: false },
95
    { model: 'Speed Gloves', price: 524.91, sellDate: '2025-12-15', sellTime: '12:56', inStock: true },
96
    { model: 'Windbreaker Jacket', price: 1780.51, sellDate: '2025-09-23', sellTime: '05:02', inStock: false },
97
    { model: 'Comfort Saddle', price: 1955.0, sellDate: '2025-09-29', sellTime: '13:03', inStock: false },
98
    { model: 'Speed Gloves', price: 957.4, sellDate: '2025-08-06', sellTime: '03:19', inStock: true },
99
    { model: 'Fitness Watch', price: 193.72, sellDate: '2025-04-01', sellTime: '19:49', inStock: false },
100
    { model: 'Speed Gloves', price: 677.94, sellDate: '2025-10-11', sellTime: '22:25', inStock: false },
101
    { model: 'LED Bike Light', price: 1155.9, sellDate: '2025-03-02', sellTime: '11:36', inStock: false },
102
    { model: 'LED Bike Light', price: 586.82, sellDate: '2025-11-22', sellTime: '20:29', inStock: false },
103
    { model: 'Action Camera', price: 406.41, sellDate: '2025-10-25', sellTime: '11:10', inStock: false },
104
    { model: 'Road Tire Tube', price: 595.55, sellDate: '2025-05-24', sellTime: '01:30', inStock: false },
105
    { model: 'Racing Socks', price: 1078.63, sellDate: '2025-04-28', sellTime: '02:57', inStock: true },
106
    { model: 'Cycling Cap', price: 1781.04, sellDate: '2025-10-07', sellTime: '06:58', inStock: false },
107
    { model: 'Trail Helmet', price: 181.8, sellDate: '2025-10-02', sellTime: '20:04', inStock: false },
108
    { model: 'HL Mountain Frame', price: 489.39, sellDate: '2025-07-20', sellTime: '10:51', inStock: true },
109
    { model: 'HL Road Tire', price: 1964.04, sellDate: '2025-07-10', sellTime: '15:01', inStock: true },
110
    { model: 'Action Camera', price: 1321.19, sellDate: '2025-02-02', sellTime: '13:39', inStock: true },
111
    { model: 'Trail Helmet', price: 1311.09, sellDate: '2025-12-27', sellTime: '14:45', inStock: false },
112
    { model: 'Windbreaker Jacket', price: 1573.57, sellDate: '2025-09-20', sellTime: '20:31', inStock: false },
113
    { model: 'Speed Gloves', price: 338.01, sellDate: '2025-10-22', sellTime: '18:56', inStock: false },
114
    { model: 'Carbon Handlebar', price: 309.18, sellDate: '2025-11-10', sellTime: '15:20', inStock: true },
115
    { model: 'LED Bike Light', price: 1289.0, sellDate: '2025-08-22', sellTime: '15:34', inStock: true },
116
    { model: 'Action Camera', price: 1655.66, sellDate: '2025-06-12', sellTime: '15:38', inStock: false },
117
    { model: 'Hydration Pack', price: 1126.33, sellDate: '2025-09-15', sellTime: '06:29', inStock: false },
118
    { model: 'Racing Socks', price: 157.45, sellDate: '2025-01-26', sellTime: '19:25', inStock: true },
119
    { model: 'Aero Bottle', price: 1707.67, sellDate: '2025-02-02', sellTime: '17:34', inStock: true },
120
    { model: 'Road Tire Tube', price: 601.95, sellDate: '2025-04-14', sellTime: '08:02', inStock: true },
121
    { model: 'HL Road Tire', price: 118.42, sellDate: '2025-02-08', sellTime: '06:08', inStock: false },
122
    { model: 'Racing Socks', price: 1721.99, sellDate: '2025-10-13', sellTime: '09:01', inStock: true },
123
    { model: 'Action Camera', price: 1620.39, sellDate: '2025-07-18', sellTime: '05:53', inStock: false },
124
    { model: 'Trail Helmet', price: 1051.16, sellDate: '2025-01-21', sellTime: '09:44', inStock: true },
125
    { model: 'Fitness Watch', price: 1534.64, sellDate: '2025-02-27', sellTime: '09:19', inStock: true },
126
    { model: 'Comfort Saddle', price: 984.12, sellDate: '2025-03-16', sellTime: '07:24', inStock: false },
127
    { model: 'Comfort Saddle', price: 1316.13, sellDate: '2025-02-11', sellTime: '11:01', inStock: true },
128
    { model: 'Carbon Handlebar', price: 774.69, sellDate: '2025-10-17', sellTime: '11:38', inStock: false },
129
    { model: 'Road Tire Tube', price: 1887.19, sellDate: '2025-10-19', sellTime: '06:02', inStock: true },
130
    { model: 'Cycling Cap', price: 519.44, sellDate: '2025-10-21', sellTime: '03:54', inStock: true },
131
    { model: 'Trail Helmet', price: 1149.2, sellDate: '2025-04-24', sellTime: '04:40', inStock: false },
132
    { model: 'Carbon Handlebar', price: 915.24, sellDate: '2025-07-10', sellTime: '05:22', inStock: true },
133
    { model: 'Comfort Saddle', price: 1625.63, sellDate: '2025-03-31', sellTime: '23:55', inStock: true },
134
    { model: 'Racing Socks', price: 143.76, sellDate: '2025-12-02', sellTime: '07:25', inStock: true },
135
    { model: 'Cycling Cap', price: 981.24, sellDate: '2025-08-09', sellTime: '19:52', inStock: false },
136
    { model: 'Comfort Saddle', price: 779.4, sellDate: '2025-06-12', sellTime: '17:08', inStock: true },
137
    { model: 'Carbon Handlebar', price: 1512.24, sellDate: '2025-07-27', sellTime: '07:02', inStock: true },
138
    { model: 'Cycling Cap', price: 444.79, sellDate: '2025-09-11', sellTime: '10:05', inStock: false }
139
  ];
140

141
  readonly hotSettings: GridSettings = {
142
    pagination: true,
143
    autoRowSize: true,
47 collapsed lines
144
    columns: [
145
      {
146
        title: 'Model',
147
        type: 'text',
148
        data: 'model',
149
        width: 150,
150
        headerClassName: 'htLeft',
151
      },
152
      {
153
        title: 'Price',
154
        type: 'numeric',
155
        data: 'price',
156
        width: 80,
157
        locale: 'en-US',
158
        numericFormat: {
159
          style: 'currency',
160
          currency: 'USD',
161
          minimumFractionDigits: 2,
162
        },
163
        className: 'htRight',
164
        headerClassName: 'htRight',
165
      },
166
      {
167
        title: 'Date',
168
        type: 'intl-date',
169
        data: 'sellDate',
170
        width: 130,
171
        locale: 'en-US',
172
        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
173
        className: 'htRight',
174
        headerClassName: 'htRight',
175

176
      },
177
      {
178
        title: 'Time',
179
        type: 'intl-time',
180
        data: 'sellTime',
181
        width: 90,
182
        locale: 'en-US',
183
        timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
184
        className: 'htRight',
185
        headerClassName: 'htRight',
186
      },
187
      {
188
        title: 'In stock',
189
        type: 'checkbox',
190
        data: 'inStock',
191
        className: 'htCenter',
192
        headerClassName: 'htCenter',
193
      },
194
    ],
195
    width: '100%',
196
    height: 300,
197
    stretchH: 'all',
198
    contextMenu: true,
199
    rowHeaders: true,
200
    colHeaders: true,
201
    autoWrapRow: true,
202
    autoWrapCol: true,
203
  };
204

205
  ngAfterViewInit() {
206
    const hotInstance = this.hotTable.hotInstance;
207

208
    if (hotInstance) {
209
      hotInstance.updateSettings({
210
        pagination: {
211
          uiContainer: this.customContainer.nativeElement,
212
        }
213
      });
214
    }
215
  }
216
}
217
/* end-file */
218

219

220

221
/* file: app.config.ts */
222
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
223
import { registerAllModules } from 'handsontable/registry';
224
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';
225

226
// register Handsontable's modules
227
registerAllModules();
228

229
export const appConfig: ApplicationConfig = {
230
  providers: [
231
    provideZoneChangeDetection({ eventCoalescing: true }),
232
    {
233
      provide: HOT_GLOBAL_CONFIG,
234
      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,
235
    },
236
  ],
237
};
238
/* end-file */

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

Modify paged data

Sometimes you need to modify data only on the currently visible page. Core method like setDataAtCell operates on all rows, including those hidden by pagination. To modify data only on the current page, you can use the getPaginationData method to get the pagination state and use it in conjunction with Core method.

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

6
@Component({
7
  standalone: true,
8
  imports: [HotTableModule],
9
  selector: 'app-example5',
10
  template: `
11
    <div class="example-controls-container">
12
      <div class="controls">
13
        <button (click)="clearColumn()">Clear the second column of the current page</button>
14
      </div>
15
    </div>
16
    <hot-table
17
      #hotTable
18
      [settings]="hotSettings!" [data]="hotData">
19
    </hot-table>
20
  `,
21
})
22
export class AppComponent {
23
  @ViewChild('hotTable') hotTable!: HotTableComponent;
24

100 collapsed lines
25
  readonly hotData = [
26
    { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },
27
    { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },
28
    { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },
29
    { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },
30
    { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },
31
    { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },
32
    { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },
33
    { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },
34
    { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },
35
    { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },
36
    { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },
37
    { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },
38
    { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },
39
    { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },
40
    { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },
41
    { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },
42
    { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },
43
    { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },
44
    { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },
45
    { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },
46
    { model: 'Aero Bottle', price: 1334.03, sellDate: '2025-01-24', sellTime: '03:29', inStock: false },
47
    { model: 'Road Tire Tube', price: 1841.17, sellDate: '2025-05-22', sellTime: '01:45', inStock: false },
48
    { model: 'Aero Bottle', price: 1622.05, sellDate: '2025-01-13', sellTime: '08:30', inStock: true },
49
    { model: 'Comfort Saddle', price: 1456.24, sellDate: '2025-07-20', sellTime: '03:39', inStock: false },
50
    { model: 'Windbreaker Jacket', price: 1736.96, sellDate: '2025-09-25', sellTime: '00:43', inStock: true },
51
    { model: 'Fitness Watch', price: 1075.31, sellDate: '2025-11-07', sellTime: '17:47', inStock: true },
52
    { model: 'Cycling Cap', price: 726.01, sellDate: '2025-10-28', sellTime: '12:44', inStock: true },
53
    { model: 'Road Tire Tube', price: 601.99, sellDate: '2025-09-22', sellTime: '00:26', inStock: true },
54
    { model: 'Speed Gloves', price: 1758.26, sellDate: '2025-10-04', sellTime: '04:59', inStock: true },
55
    { model: 'Speed Gloves', price: 564.35, sellDate: '2025-07-10', sellTime: '18:21', inStock: true },
56
    { model: 'Hydration Pack', price: 954.84, sellDate: '2025-11-02', sellTime: '00:59', inStock: false },
57
    { model: 'Cycling Cap', price: 1511.5, sellDate: '2025-02-11', sellTime: '02:38', inStock: false },
58
    { model: 'HL Road Tire', price: 269.6, sellDate: '2025-06-18', sellTime: '04:58', inStock: false },
59
    { model: 'Road Tire Tube', price: 435.07, sellDate: '2025-07-22', sellTime: '23:12', inStock: false },
60
    { model: 'Fitness Watch', price: 1187.8, sellDate: '2025-08-13', sellTime: '10:19', inStock: true },
61
    { model: 'Racing Socks', price: 770.19, sellDate: '2025-02-02', sellTime: '20:37', inStock: true },
62
    { model: 'Carbon Handlebar', price: 60.41, sellDate: '2025-12-27', sellTime: '20:30', inStock: true },
63
    { model: 'Racing Socks', price: 944.21, sellDate: '2025-05-23', sellTime: '18:43', inStock: false },
64
    { model: 'Racing Socks', price: 621.96, sellDate: '2025-12-12', sellTime: '04:59', inStock: false },
65
    { model: 'HL Road Tire', price: 774.91, sellDate: '2025-06-02', sellTime: '03:48', inStock: true },
66
    { model: 'LED Bike Light', price: 1205.29, sellDate: '2025-04-15', sellTime: '22:08', inStock: false },
67
    { model: 'Racing Socks', price: 388.19, sellDate: '2025-05-24', sellTime: '08:36', inStock: true },
68
    { model: 'Windbreaker Jacket', price: 267.88, sellDate: '2025-05-25', sellTime: '15:00', inStock: true },
69
    { model: 'LED Bike Light', price: 283.72, sellDate: '2025-09-26', sellTime: '02:16', inStock: true },
70
    { model: 'Comfort Saddle', price: 1782.91, sellDate: '2025-03-07', sellTime: '09:43', inStock: false },
71
    { model: 'Trail Helmet', price: 1943.46, sellDate: '2025-06-05', sellTime: '01:49', inStock: true },
72
    { model: 'Speed Gloves', price: 1737.8, sellDate: '2025-09-18', sellTime: '14:21', inStock: true },
73
    { model: 'Road Tire Tube', price: 354.89, sellDate: '2025-08-11', sellTime: '02:03', inStock: true },
74
    { model: 'Hydration Pack', price: 1490.45, sellDate: '2025-12-04', sellTime: '02:23', inStock: true },
75
    { model: 'LED Bike Light', price: 844.48, sellDate: '2025-09-22', sellTime: '02:29', inStock: true },
76
    { model: 'Road Tire Tube', price: 1965.77, sellDate: '2025-02-10', sellTime: '23:52', inStock: false },
77
    { model: 'Action Camera', price: 522.33, sellDate: '2025-11-11', sellTime: '16:50', inStock: false },
78
    { model: 'Comfort Saddle', price: 109.4, sellDate: '2025-05-13', sellTime: '11:41', inStock: true },
79
    { model: 'Hydration Pack', price: 1067.76, sellDate: '2025-08-07', sellTime: '05:04', inStock: false },
80
    { model: 'Speed Gloves', price: 1738.77, sellDate: '2025-01-28', sellTime: '08:38', inStock: false },
81
    { model: 'Aero Bottle', price: 1600.35, sellDate: '2025-01-29', sellTime: '00:36', inStock: false },
82
    { model: 'Speed Gloves', price: 524.91, sellDate: '2025-12-15', sellTime: '12:56', inStock: true },
83
    { model: 'Windbreaker Jacket', price: 1780.51, sellDate: '2025-09-23', sellTime: '05:02', inStock: false },
84
    { model: 'Comfort Saddle', price: 1955.0, sellDate: '2025-09-29', sellTime: '13:03', inStock: false },
85
    { model: 'Speed Gloves', price: 957.4, sellDate: '2025-08-06', sellTime: '03:19', inStock: true },
86
    { model: 'Fitness Watch', price: 193.72, sellDate: '2025-04-01', sellTime: '19:49', inStock: false },
87
    { model: 'Speed Gloves', price: 677.94, sellDate: '2025-10-11', sellTime: '22:25', inStock: false },
88
    { model: 'LED Bike Light', price: 1155.9, sellDate: '2025-03-02', sellTime: '11:36', inStock: false },
89
    { model: 'LED Bike Light', price: 586.82, sellDate: '2025-11-22', sellTime: '20:29', inStock: false },
90
    { model: 'Action Camera', price: 406.41, sellDate: '2025-10-25', sellTime: '11:10', inStock: false },
91
    { model: 'Road Tire Tube', price: 595.55, sellDate: '2025-05-24', sellTime: '01:30', inStock: false },
92
    { model: 'Racing Socks', price: 1078.63, sellDate: '2025-04-28', sellTime: '02:57', inStock: true },
93
    { model: 'Cycling Cap', price: 1781.04, sellDate: '2025-10-07', sellTime: '06:58', inStock: false },
94
    { model: 'Trail Helmet', price: 181.8, sellDate: '2025-10-02', sellTime: '20:04', inStock: false },
95
    { model: 'HL Mountain Frame', price: 489.39, sellDate: '2025-07-20', sellTime: '10:51', inStock: true },
96
    { model: 'HL Road Tire', price: 1964.04, sellDate: '2025-07-10', sellTime: '15:01', inStock: true },
97
    { model: 'Action Camera', price: 1321.19, sellDate: '2025-02-02', sellTime: '13:39', inStock: true },
98
    { model: 'Trail Helmet', price: 1311.09, sellDate: '2025-12-27', sellTime: '14:45', inStock: false },
99
    { model: 'Windbreaker Jacket', price: 1573.57, sellDate: '2025-09-20', sellTime: '20:31', inStock: false },
100
    { model: 'Speed Gloves', price: 338.01, sellDate: '2025-10-22', sellTime: '18:56', inStock: false },
101
    { model: 'Carbon Handlebar', price: 309.18, sellDate: '2025-11-10', sellTime: '15:20', inStock: true },
102
    { model: 'LED Bike Light', price: 1289.0, sellDate: '2025-08-22', sellTime: '15:34', inStock: true },
103
    { model: 'Action Camera', price: 1655.66, sellDate: '2025-06-12', sellTime: '15:38', inStock: false },
104
    { model: 'Hydration Pack', price: 1126.33, sellDate: '2025-09-15', sellTime: '06:29', inStock: false },
105
    { model: 'Racing Socks', price: 157.45, sellDate: '2025-01-26', sellTime: '19:25', inStock: true },
106
    { model: 'Aero Bottle', price: 1707.67, sellDate: '2025-02-02', sellTime: '17:34', inStock: true },
107
    { model: 'Road Tire Tube', price: 601.95, sellDate: '2025-04-14', sellTime: '08:02', inStock: true },
108
    { model: 'HL Road Tire', price: 118.42, sellDate: '2025-02-08', sellTime: '06:08', inStock: false },
109
    { model: 'Racing Socks', price: 1721.99, sellDate: '2025-10-13', sellTime: '09:01', inStock: true },
110
    { model: 'Action Camera', price: 1620.39, sellDate: '2025-07-18', sellTime: '05:53', inStock: false },
111
    { model: 'Trail Helmet', price: 1051.16, sellDate: '2025-01-21', sellTime: '09:44', inStock: true },
112
    { model: 'Fitness Watch', price: 1534.64, sellDate: '2025-02-27', sellTime: '09:19', inStock: true },
113
    { model: 'Comfort Saddle', price: 984.12, sellDate: '2025-03-16', sellTime: '07:24', inStock: false },
114
    { model: 'Comfort Saddle', price: 1316.13, sellDate: '2025-02-11', sellTime: '11:01', inStock: true },
115
    { model: 'Carbon Handlebar', price: 774.69, sellDate: '2025-10-17', sellTime: '11:38', inStock: false },
116
    { model: 'Road Tire Tube', price: 1887.19, sellDate: '2025-10-19', sellTime: '06:02', inStock: true },
117
    { model: 'Cycling Cap', price: 519.44, sellDate: '2025-10-21', sellTime: '03:54', inStock: true },
118
    { model: 'Trail Helmet', price: 1149.2, sellDate: '2025-04-24', sellTime: '04:40', inStock: false },
119
    { model: 'Carbon Handlebar', price: 915.24, sellDate: '2025-07-10', sellTime: '05:22', inStock: true },
120
    { model: 'Comfort Saddle', price: 1625.63, sellDate: '2025-03-31', sellTime: '23:55', inStock: true },
121
    { model: 'Racing Socks', price: 143.76, sellDate: '2025-12-02', sellTime: '07:25', inStock: true },
122
    { model: 'Cycling Cap', price: 981.24, sellDate: '2025-08-09', sellTime: '19:52', inStock: false },
123
    { model: 'Comfort Saddle', price: 779.4, sellDate: '2025-06-12', sellTime: '17:08', inStock: true },
124
    { model: 'Carbon Handlebar', price: 1512.24, sellDate: '2025-07-27', sellTime: '07:02', inStock: true },
125
    { model: 'Cycling Cap', price: 444.79, sellDate: '2025-09-11', sellTime: '10:05', inStock: false }
126
  ];
127

128
  readonly hotSettings: GridSettings = {
129
    pagination: true,
130
    autoRowSize: true,
47 collapsed lines
131
    columns: [
132
      {
133
        title: 'Model',
134
        type: 'text',
135
        data: 'model',
136
        width: 150,
137
        headerClassName: 'htLeft',
138
      },
139
      {
140
        title: 'Price',
141
        type: 'numeric',
142
        data: 'price',
143
        width: 80,
144
        locale: 'en-US',
145
        numericFormat: {
146
          style: 'currency',
147
          currency: 'USD',
148
          minimumFractionDigits: 2,
149
        },
150
        className: 'htRight',
151
        headerClassName: 'htRight',
152
      },
153
      {
154
        title: 'Date',
155
        type: 'intl-date',
156
        data: 'sellDate',
157
        width: 130,
158
        locale: 'en-US',
159
        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
160
        className: 'htRight',
161
        headerClassName: 'htRight',
162

163
      },
164
      {
165
        title: 'Time',
166
        type: 'intl-time',
167
        data: 'sellTime',
168
        width: 90,
169
        locale: 'en-US',
170
        timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
171
        className: 'htRight',
172
        headerClassName: 'htRight',
173
      },
174
      {
175
        title: 'In stock',
176
        type: 'checkbox',
177
        data: 'inStock',
178
        className: 'htCenter',
179
        headerClassName: 'htCenter',
180
      },
181
    ],
182
    width: '100%',
183
    height: 300,
184
    stretchH: 'all',
185
    contextMenu: true,
186
    rowHeaders: true,
187
    colHeaders: true,
188
    autoWrapRow: true,
189
    autoWrapCol: true,
190
  };
191

192
  clearColumn() {
193
    const hotInstance = this.hotTable.hotInstance;
194

195
    if (!hotInstance) {
196
      return;
197
    }
198

199
    const paginationPlugin = hotInstance.getPlugin('pagination');
200

201
    const {
202
      firstVisibleRowIndex,
203
      lastVisibleRowIndex,
204
    } = paginationPlugin.getPaginationData();
205

206
    if (firstVisibleRowIndex === -1 || lastVisibleRowIndex === -1) {
207
      return;
208
    }
209

210
    const data: [number, number, string][] = [];
211
    const columnIndex = 1;
212

213
    for (let row = firstVisibleRowIndex; row <= lastVisibleRowIndex; row++) {
214
      data.push([row, columnIndex, '']);
215
    }
216

217
    hotInstance.setDataAtCell(data);
218
  }
219
}
220
/* end-file */
221

222

223

224
/* file: app.config.ts */
225
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
226
import { registerAllModules } from 'handsontable/registry';
227
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';
228

229
// register Handsontable's modules
230
registerAllModules();
231

232
export const appConfig: ApplicationConfig = {
233
  providers: [
234
    provideZoneChangeDetection({ eventCoalescing: true }),
235
    {
236
      provide: HOT_GLOBAL_CONFIG,
237
      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,
238
    },
239
  ],
240
};
241
/* end-file */

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

Use pagination hooks

You can run your code before or after different stages of pagination, using the following Handsontable hooks:

Localize pagination

Translate default pagination labels - such as “Page size:”, “Page” and more - using the global translations mechanism. The pagination introduces the following keys to the language dictionary that you can use to translate the pagination UI:

PAGINATION_SECTION = 'Pagination'
PAGINATION_PAGE_SIZE_SECTION = 'Page size'
PAGINATION_PAGE_SIZE_AUTO = 'Auto'
PAGINATION_COUNTER_SECTION = '[start] - [end] of [total]'
PAGINATION_NAV_SECTION = 'Page [currentPage] of [totalPages]'
PAGINATION_FIRST_PAGE = 'Go to first page'
PAGINATION_PREV_PAGE = 'Go to previous page'
PAGINATION_NEXT_PAGE = 'Go to next page'
PAGINATION_LAST_PAGE = 'Go to last page'

To learn more about the translation mechanism, see the Languages guide.

The example below demonstrates how to customize the translation of the pagination counter and navigation sections.

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

7
const enUSDictionary = Handsontable.languages.getLanguageDictionary('en-US');
8
const C = (Handsontable.languages as any).dictionaryKeys as Record<string, string>;
9

10
Handsontable.languages.registerLanguageDictionary({
11
  ...enUSDictionary,
12
  languageCode: 'en-US-custom',
13
  [C['PAGINATION_COUNTER_SECTION']]: 'Currently displaying [start]-[end] (total: [total])',
14
  [C['PAGINATION_NAV_SECTION']]: '[currentPage] / [totalPages]',
15
});
100 collapsed lines
16

17
@Component({
18
  selector: 'app-example6',
19
  template: `
20
    <hot-table
21
      [settings]="hotSettings!" [data]="hotData">
22
    </hot-table>
23
  `,
24
  standalone: true,
25
  imports: [HotTableModule],
26
})
27
export class AppComponent {
28
  @ViewChild('hotTable') hotTable!: HotTableComponent;
29

30
  readonly hotData = [
31
    { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },
32
    { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },
33
    { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },
34
    { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },
35
    { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },
36
    { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },
37
    { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },
38
    { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },
39
    { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },
40
    { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },
41
    { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },
42
    { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },
43
    { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },
44
    { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },
45
    { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },
46
    { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },
47
    { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },
48
    { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },
49
    { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },
50
    { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },
51
    { model: 'Aero Bottle', price: 1334.03, sellDate: '2025-01-24', sellTime: '03:29', inStock: false },
52
    { model: 'Road Tire Tube', price: 1841.17, sellDate: '2025-05-22', sellTime: '01:45', inStock: false },
53
    { model: 'Aero Bottle', price: 1622.05, sellDate: '2025-01-13', sellTime: '08:30', inStock: true },
54
    { model: 'Comfort Saddle', price: 1456.24, sellDate: '2025-07-20', sellTime: '03:39', inStock: false },
55
    { model: 'Windbreaker Jacket', price: 1736.96, sellDate: '2025-09-25', sellTime: '00:43', inStock: true },
56
    { model: 'Fitness Watch', price: 1075.31, sellDate: '2025-11-07', sellTime: '17:47', inStock: true },
57
    { model: 'Cycling Cap', price: 726.01, sellDate: '2025-10-28', sellTime: '12:44', inStock: true },
58
    { model: 'Road Tire Tube', price: 601.99, sellDate: '2025-09-22', sellTime: '00:26', inStock: true },
59
    { model: 'Speed Gloves', price: 1758.26, sellDate: '2025-10-04', sellTime: '04:59', inStock: true },
60
    { model: 'Speed Gloves', price: 564.35, sellDate: '2025-07-10', sellTime: '18:21', inStock: true },
61
    { model: 'Hydration Pack', price: 954.84, sellDate: '2025-11-02', sellTime: '00:59', inStock: false },
62
    { model: 'Cycling Cap', price: 1511.5, sellDate: '2025-02-11', sellTime: '02:38', inStock: false },
63
    { model: 'HL Road Tire', price: 269.6, sellDate: '2025-06-18', sellTime: '04:58', inStock: false },
64
    { model: 'Road Tire Tube', price: 435.07, sellDate: '2025-07-22', sellTime: '23:12', inStock: false },
65
    { model: 'Fitness Watch', price: 1187.8, sellDate: '2025-08-13', sellTime: '10:19', inStock: true },
66
    { model: 'Racing Socks', price: 770.19, sellDate: '2025-02-02', sellTime: '20:37', inStock: true },
67
    { model: 'Carbon Handlebar', price: 60.41, sellDate: '2025-12-27', sellTime: '20:30', inStock: true },
68
    { model: 'Racing Socks', price: 944.21, sellDate: '2025-05-23', sellTime: '18:43', inStock: false },
69
    { model: 'Racing Socks', price: 621.96, sellDate: '2025-12-12', sellTime: '04:59', inStock: false },
70
    { model: 'HL Road Tire', price: 774.91, sellDate: '2025-06-02', sellTime: '03:48', inStock: true },
71
    { model: 'LED Bike Light', price: 1205.29, sellDate: '2025-04-15', sellTime: '22:08', inStock: false },
72
    { model: 'Racing Socks', price: 388.19, sellDate: '2025-05-24', sellTime: '08:36', inStock: true },
73
    { model: 'Windbreaker Jacket', price: 267.88, sellDate: '2025-05-25', sellTime: '15:00', inStock: true },
74
    { model: 'LED Bike Light', price: 283.72, sellDate: '2025-09-26', sellTime: '02:16', inStock: true },
75
    { model: 'Comfort Saddle', price: 1782.91, sellDate: '2025-03-07', sellTime: '09:43', inStock: false },
76
    { model: 'Trail Helmet', price: 1943.46, sellDate: '2025-06-05', sellTime: '01:49', inStock: true },
77
    { model: 'Speed Gloves', price: 1737.8, sellDate: '2025-09-18', sellTime: '14:21', inStock: true },
78
    { model: 'Road Tire Tube', price: 354.89, sellDate: '2025-08-11', sellTime: '02:03', inStock: true },
79
    { model: 'Hydration Pack', price: 1490.45, sellDate: '2025-12-04', sellTime: '02:23', inStock: true },
80
    { model: 'LED Bike Light', price: 844.48, sellDate: '2025-09-22', sellTime: '02:29', inStock: true },
81
    { model: 'Road Tire Tube', price: 1965.77, sellDate: '2025-02-10', sellTime: '23:52', inStock: false },
82
    { model: 'Action Camera', price: 522.33, sellDate: '2025-11-11', sellTime: '16:50', inStock: false },
83
    { model: 'Comfort Saddle', price: 109.4, sellDate: '2025-05-13', sellTime: '11:41', inStock: true },
84
    { model: 'Hydration Pack', price: 1067.76, sellDate: '2025-08-07', sellTime: '05:04', inStock: false },
85
    { model: 'Speed Gloves', price: 1738.77, sellDate: '2025-01-28', sellTime: '08:38', inStock: false },
86
    { model: 'Aero Bottle', price: 1600.35, sellDate: '2025-01-29', sellTime: '00:36', inStock: false },
87
    { model: 'Speed Gloves', price: 524.91, sellDate: '2025-12-15', sellTime: '12:56', inStock: true },
88
    { model: 'Windbreaker Jacket', price: 1780.51, sellDate: '2025-09-23', sellTime: '05:02', inStock: false },
89
    { model: 'Comfort Saddle', price: 1955.0, sellDate: '2025-09-29', sellTime: '13:03', inStock: false },
90
    { model: 'Speed Gloves', price: 957.4, sellDate: '2025-08-06', sellTime: '03:19', inStock: true },
91
    { model: 'Fitness Watch', price: 193.72, sellDate: '2025-04-01', sellTime: '19:49', inStock: false },
92
    { model: 'Speed Gloves', price: 677.94, sellDate: '2025-10-11', sellTime: '22:25', inStock: false },
93
    { model: 'LED Bike Light', price: 1155.9, sellDate: '2025-03-02', sellTime: '11:36', inStock: false },
94
    { model: 'LED Bike Light', price: 586.82, sellDate: '2025-11-22', sellTime: '20:29', inStock: false },
95
    { model: 'Action Camera', price: 406.41, sellDate: '2025-10-25', sellTime: '11:10', inStock: false },
96
    { model: 'Road Tire Tube', price: 595.55, sellDate: '2025-05-24', sellTime: '01:30', inStock: false },
97
    { model: 'Racing Socks', price: 1078.63, sellDate: '2025-04-28', sellTime: '02:57', inStock: true },
98
    { model: 'Cycling Cap', price: 1781.04, sellDate: '2025-10-07', sellTime: '06:58', inStock: false },
99
    { model: 'Trail Helmet', price: 181.8, sellDate: '2025-10-02', sellTime: '20:04', inStock: false },
100
    { model: 'HL Mountain Frame', price: 489.39, sellDate: '2025-07-20', sellTime: '10:51', inStock: true },
101
    { model: 'HL Road Tire', price: 1964.04, sellDate: '2025-07-10', sellTime: '15:01', inStock: true },
102
    { model: 'Action Camera', price: 1321.19, sellDate: '2025-02-02', sellTime: '13:39', inStock: true },
103
    { model: 'Trail Helmet', price: 1311.09, sellDate: '2025-12-27', sellTime: '14:45', inStock: false },
104
    { model: 'Windbreaker Jacket', price: 1573.57, sellDate: '2025-09-20', sellTime: '20:31', inStock: false },
105
    { model: 'Speed Gloves', price: 338.01, sellDate: '2025-10-22', sellTime: '18:56', inStock: false },
106
    { model: 'Carbon Handlebar', price: 309.18, sellDate: '2025-11-10', sellTime: '15:20', inStock: true },
107
    { model: 'LED Bike Light', price: 1289.0, sellDate: '2025-08-22', sellTime: '15:34', inStock: true },
108
    { model: 'Action Camera', price: 1655.66, sellDate: '2025-06-12', sellTime: '15:38', inStock: false },
109
    { model: 'Hydration Pack', price: 1126.33, sellDate: '2025-09-15', sellTime: '06:29', inStock: false },
110
    { model: 'Racing Socks', price: 157.45, sellDate: '2025-01-26', sellTime: '19:25', inStock: true },
111
    { model: 'Aero Bottle', price: 1707.67, sellDate: '2025-02-02', sellTime: '17:34', inStock: true },
112
    { model: 'Road Tire Tube', price: 601.95, sellDate: '2025-04-14', sellTime: '08:02', inStock: true },
113
    { model: 'HL Road Tire', price: 118.42, sellDate: '2025-02-08', sellTime: '06:08', inStock: false },
114
    { model: 'Racing Socks', price: 1721.99, sellDate: '2025-10-13', sellTime: '09:01', inStock: true },
115
    { model: 'Action Camera', price: 1620.39, sellDate: '2025-07-18', sellTime: '05:53', inStock: false },
116
    { model: 'Trail Helmet', price: 1051.16, sellDate: '2025-01-21', sellTime: '09:44', inStock: true },
117
    { model: 'Fitness Watch', price: 1534.64, sellDate: '2025-02-27', sellTime: '09:19', inStock: true },
118
    { model: 'Comfort Saddle', price: 984.12, sellDate: '2025-03-16', sellTime: '07:24', inStock: false },
119
    { model: 'Comfort Saddle', price: 1316.13, sellDate: '2025-02-11', sellTime: '11:01', inStock: true },
120
    { model: 'Carbon Handlebar', price: 774.69, sellDate: '2025-10-17', sellTime: '11:38', inStock: false },
121
    { model: 'Road Tire Tube', price: 1887.19, sellDate: '2025-10-19', sellTime: '06:02', inStock: true },
122
    { model: 'Cycling Cap', price: 519.44, sellDate: '2025-10-21', sellTime: '03:54', inStock: true },
123
    { model: 'Trail Helmet', price: 1149.2, sellDate: '2025-04-24', sellTime: '04:40', inStock: false },
124
    { model: 'Carbon Handlebar', price: 915.24, sellDate: '2025-07-10', sellTime: '05:22', inStock: true },
125
    { model: 'Comfort Saddle', price: 1625.63, sellDate: '2025-03-31', sellTime: '23:55', inStock: true },
126
    { model: 'Racing Socks', price: 143.76, sellDate: '2025-12-02', sellTime: '07:25', inStock: true },
127
    { model: 'Cycling Cap', price: 981.24, sellDate: '2025-08-09', sellTime: '19:52', inStock: false },
128
    { model: 'Comfort Saddle', price: 779.4, sellDate: '2025-06-12', sellTime: '17:08', inStock: true },
129
    { model: 'Carbon Handlebar', price: 1512.24, sellDate: '2025-07-27', sellTime: '07:02', inStock: true },
130
    { model: 'Cycling Cap', price: 444.79, sellDate: '2025-09-11', sellTime: '10:05', inStock: false }
131
  ];
132

133
  readonly hotSettings: GridSettings = {
134
    pagination: {
135
      showPageSize: false,
136
    },
137
    language: 'en-US-custom',
138
    autoRowSize: true,
47 collapsed lines
139
    columns: [
140
      {
141
        title: 'Model',
142
        type: 'text',
143
        data: 'model',
144
        width: 150,
145
        headerClassName: 'htLeft',
146
      },
147
      {
148
        title: 'Price',
149
        type: 'numeric',
150
        data: 'price',
151
        width: 80,
152
        locale: 'en-US',
153
        numericFormat: {
154
          style: 'currency',
155
          currency: 'USD',
156
          minimumFractionDigits: 2,
157
        },
158
        className: 'htRight',
159
        headerClassName: 'htRight',
160
      },
161
      {
162
        title: 'Date',
163
        type: 'intl-date',
164
        data: 'sellDate',
165
        width: 130,
166
        locale: 'en-US',
167
        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
168
        className: 'htRight',
169
        headerClassName: 'htRight',
170

171
      },
172
      {
173
        title: 'Time',
174
        type: 'intl-time',
175
        data: 'sellTime',
176
        width: 90,
177
        locale: 'en-US',
178
        timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
179
        className: 'htRight',
180
        headerClassName: 'htRight',
181
      },
182
      {
183
        title: 'In stock',
184
        type: 'checkbox',
185
        data: 'inStock',
186
        className: 'htCenter',
187
        headerClassName: 'htCenter',
188
      },
189
    ],
190
    width: '100%',
191
    height: 300,
192
    stretchH: 'all',
193
    contextMenu: true,
194
    rowHeaders: true,
195
    colHeaders: true,
196
    autoWrapRow: true,
197
    autoWrapCol: true,
198
  };
199
}
200
/* end-file */
201

202

203

204
/* file: app.config.ts */
205
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
206
import { registerAllModules } from 'handsontable/registry';
207
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';
208

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

212
export const appConfig: ApplicationConfig = {
213
  providers: [
214
    provideZoneChangeDetection({ eventCoalescing: true }),
215
    {
216
      provide: HOT_GLOBAL_CONFIG,
217
      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,
218
    },
219
  ],
220
};
221
/* end-file */

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

Customize pagination UI

You can customize the look of each pagination element by assigning new values to the CSS variables defined in our main, horizon and classic themes, aligning them with your app’s design guidelines. For a list of available variables, see the Handsontable Design System on Figma.

Within the plugin the following CSS variables are available:

--ht-pagination-bar-foreground-color: Controls the text color of pagination bar elements;
--ht-pagination-bar-background-color: Sets the background color of the pagination bar;
--ht-pagination-bar-horizontal-padding: Defines the left and right padding of the pagination bar;
--ht-pagination-bar-vertical-padding: Controls the top and bottom padding of the pagination bar;

Importing the pagination module

You can reduce the size of your bundle by importing and using only the modules that you need.

To use pagination, you need only the following modules:

The base module
The Pagination module

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

4
// import the Pagination plugin
5
import { registerPlugin, Pagination } from 'handsontable/plugins';
6

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

Known limitations

When pagination is enabled:

fixedRowsTop and fixedRowsBottom options should be disabled.
NestedRows and MergeCells plugins should be disabled.
The height option set as auto is not supported when the pageSize: 'auto' is set.
Pagination always displays a fixed number of rows per page (default is 10), regardless of data changes such as hiding, trimming, filtering, removing, adding, or pasting rows - unless pageSize: 'auto' is set.

Handsontable 16.1: Row Pagination, Loading Plugin, and Long-Term Support Policy

Configuration options

Hooks

beforePageSizeChange()

afterPageSizeChange()

afterPageSizeVisibilityChange()

afterPageCounterVisibilityChange()

afterPageNavigationVisibilityChange()

Plugins

Pagination

NestedRows

MergeCells

Result

After completing this guide, your grid divides rows into pages with built-in navigation controls. You can configure the page size, customize the UI position, control pagination programmatically, and react to page changes using hooks.

Troubleshooting

Didn’t find what you need? Try this:

View related topics

Report an issue

Start a discussion

Contact our technical support