Drag to scroll

Drag any cell selection or fill handle outside the visible viewport to scroll the grid automatically while extending the selection.

Overview

The DragToScroll plugin watches for mouse drags that move outside the grid’s visible area. When the cursor crosses a viewport edge, the plugin scrolls the grid in that direction and extends the active selection to follow — exactly as spreadsheet applications behave.

The plugin is enabled by default. It activates during two types of drags:

Cell selection drag — click a cell, hold, and drag beyond the edge to extend the selection.
Fill handle drag — drag the fill handle (the small square in the bottom-right corner of a selection) beyond the edge to autofill into additional rows or columns.

Scroll speed follows a logarithmic curve: it starts slow when the cursor is just past the edge, then accelerates as the cursor moves farther away. This gives you precise control for small selections and fast navigation for large ones.

Enable drag to scroll

The plugin is enabled by default. To enable it explicitly, set dragToScroll to true:

1
dragToScroll: true,

To see drag-to-scroll in action, click any cell in the grid below, hold the mouse button, and drag past any edge of the viewport.

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

4
registerAllModules();
5

6
// Build column headers: 'Cost Center' + 49 monthly labels (Jan 2021 … Jan 2025)
7
const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
8
const colHeaders = ['Cost Center'];
9
let year = 2021;
10
let monthIndex = 0;
11

12
while (colHeaders.length < 50) {
13
  colHeaders.push(`${months[monthIndex]} ${year}`);
14
  monthIndex += 1;
15

16
  if (monthIndex >= months.length) {
17
    monthIndex = 0;
18
    year += 1;
19
  }
20
}
21

22
// Build 50 rows of budget data
23
const data = [];
24

25
for (let row = 0; row < 50; row++) {
26
  const rowData = [`CC-${1000 + row}`];
27

28
  for (let col = 0; col < 49; col++) {
29
    rowData.push(2000 + row * 100 + col * 50);
30
  }
31

32
  data.push(rowData);
33
}
34

35
const ExampleComponent = () => {
36
  return (
37
    <HotTable
38
      data={data}
39
      colHeaders={colHeaders}
40
      width={500}
41
      height={220}
42
      rowHeaders={true}
43
      dragToScroll={true}
44
      licenseKey="non-commercial-and-evaluation"
45
    />
46
  );
47
};
48

49
export default ExampleComponent;

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

4
registerAllModules();
5

6
// Build column headers: 'Cost Center' + 49 monthly labels (Jan 2021 … Jan 2025)
7
const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
8
const colHeaders: string[] = ['Cost Center'];
9
let year = 2021;
10
let monthIndex = 0;
11

12
while (colHeaders.length < 50) {
13
  colHeaders.push(`${months[monthIndex]} ${year}`);
14
  monthIndex += 1;
15

16
  if (monthIndex >= months.length) {
17
    monthIndex = 0;
18
    year += 1;
19
  }
20
}
21

22
// Build 50 rows of budget data
23
const data: (string | number)[][] = [];
24

25
for (let row = 0; row < 50; row++) {
26
  const rowData: (string | number)[] = [`CC-${1000 + row}`];
27

28
  for (let col = 0; col < 49; col++) {
29
    rowData.push(2000 + row * 100 + col * 50);
30
  }
31

32
  data.push(rowData);
33
}
34

35
const ExampleComponent = () => {
36
  return (
37
    <HotTable
38
      data={data}
39
      colHeaders={colHeaders}
40
      width={500}
41
      height={220}
42
      rowHeaders={true}
43
      dragToScroll={true}
44
      licenseKey="non-commercial-and-evaluation"
45
    />
46
  );
47
};
48

49
export default ExampleComponent;

Configure scroll speed

Pass an object to dragToScroll to control how quickly the viewport scrolls:

1
dragToScroll: {
2
  interval: {
3
    min: 20,
4
    max: 500,
5
  },
6
  rampDistance: 120,
7
},

The three parameters work together to shape the acceleration curve:

Parameter	Type	Default	Description
`interval.min`	`number`	`20`	Minimum scroll interval in milliseconds. This is the fastest the scroll gets — reached when the cursor is at `rampDistance` pixels outside the edge. A lower value produces faster peak scrolling.
`interval.max`	`number`	`500`	Maximum scroll interval in milliseconds. This is the slowest the scroll starts — applied when the cursor first crosses the viewport edge. A higher value produces a more gradual start.
`rampDistance`	`number`	`120`	Distance in pixels from the viewport edge over which the interval decreases from `max` to `min`. A shorter distance causes the scroll to reach peak speed more quickly.

The interval decreases on a logarithmic scale as the cursor moves away from the viewport edge. This means the biggest speed increase happens close to the edge, and the rate of acceleration gradually falls off farther out.

Chart showing scroll interval decreasing logarithmically from interval.max at the viewport edge to interval.min at rampDistance pixels outside

Use the sliders below to adjust all three parameters. The grid reloads with the new settings so you can drag a selection outside the viewport to feel the difference.

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

5
registerAllModules();
6

7
// Build column headers: 'Cost Center' + 49 monthly labels (Jan 2021 … Jan 2025)
8
const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
9
const colHeaders = ['Cost Center'];
10
let year = 2021;
11
let monthIndex = 0;
12

13
while (colHeaders.length < 50) {
14
  colHeaders.push(`${months[monthIndex]} ${year}`);
15
  monthIndex += 1;
16

17
  if (monthIndex >= months.length) {
18
    monthIndex = 0;
19
    year += 1;
20
  }
21
}
22

23
// Build 50 rows of budget data
24
const data = [];
25

26
for (let row = 0; row < 50; row++) {
27
  const rowData = [`CC-${1000 + row}`];
28

29
  for (let col = 0; col < 49; col++) {
30
    rowData.push(2000 + row * 100 + col * 50);
31
  }
32

33
  data.push(rowData);
34
}
35

36
function Slider({ label, unit, min, max, step, value, onChange }) {
37
  return (
38
    <label style={{ display: 'flex', flexDirection: 'column', gap: 4, font: '13px/1.4 sans-serif', color: '#334155' }}>
39
      <b style={{ fontFamily: 'monospace' }}>{label}: {value} {unit}</b>
40
      <input
41
        type="range"
42
        min={min}
43
        max={max}
44
        step={step}
45
        value={value}
46
        onChange={(event) => onChange(Number(event.target.value))}
47
        style={{ width: 200, cursor: 'pointer' }}
48
      />
49
    </label>
50
  );
51
}
52

53
const ExampleComponent = () => {
54
  const [intervalMin, setIntervalMin] = useState(20);
55
  const [intervalMax, setIntervalMax] = useState(500);
56
  const [rampDistance, setRampDistance] = useState(120);
57

58
  return (
59
    <div>
60
      <div style={{ display: 'flex', gap: 28, flexWrap: 'wrap', marginBottom: 16 }}>
61
        <Slider label="interval.min" unit="ms" min={10}  max={200}  step={10} value={intervalMin}  onChange={setIntervalMin} />
62
        <Slider label="interval.max" unit="ms" min={100} max={1000} step={50} value={intervalMax}  onChange={setIntervalMax} />
63
        <Slider label="rampDistance" unit="px" min={20}  max={300}  step={10} value={rampDistance} onChange={setRampDistance} />
64
      </div>
65
      <HotTable
66
        data={data}
67
        colHeaders={colHeaders}
68
        width={500}
69
        height={220}
70
        rowHeaders={true}
71
        dragToScroll={{ interval: { min: intervalMin, max: intervalMax }, rampDistance }}
72
        licenseKey="non-commercial-and-evaluation"
73
      />
74
    </div>
75
  );
76
};
77

78
export default ExampleComponent;

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

5
registerAllModules();
6

7
// Build column headers: 'Cost Center' + 49 monthly labels (Jan 2021 … Jan 2025)
8
const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
9
const colHeaders: string[] = ['Cost Center'];
10
let year = 2021;
11
let monthIndex = 0;
12

13
while (colHeaders.length < 50) {
14
  colHeaders.push(`${months[monthIndex]} ${year}`);
15
  monthIndex += 1;
16

17
  if (monthIndex >= months.length) {
18
    monthIndex = 0;
19
    year += 1;
20
  }
21
}
22

23
// Build 50 rows of budget data
24
const data: (string | number)[][] = [];
25

26
for (let row = 0; row < 50; row++) {
27
  const rowData: (string | number)[] = [`CC-${1000 + row}`];
28

29
  for (let col = 0; col < 49; col++) {
30
    rowData.push(2000 + row * 100 + col * 50);
31
  }
32

33
  data.push(rowData);
34
}
35

36
function Slider({ label, unit, min, max, step, value, onChange }: {
37
  label: string; unit: string; min: number; max: number; step: number;
38
  value: number; onChange: (value: number) => void;
39
}) {
40
  return (
41
    <label style={{ display: 'flex', flexDirection: 'column', gap: 4, font: '13px/1.4 sans-serif', color: '#334155' }}>
42
      <b style={{ fontFamily: 'monospace' }}>{label}: {value} {unit}</b>
43
      <input
44
        type="range"
45
        min={min}
46
        max={max}
47
        step={step}
48
        value={value}
49
        onChange={(event) => onChange(Number(event.target.value))}
50
        style={{ width: 200, cursor: 'pointer' }}
51
      />
52
    </label>
53
  );
54
}
55

56
const ExampleComponent = () => {
57
  const [intervalMin, setIntervalMin] = useState(20);
58
  const [intervalMax, setIntervalMax] = useState(500);
59
  const [rampDistance, setRampDistance] = useState(120);
60

61
  return (
62
    <div>
63
      <div style={{ display: 'flex', gap: 28, flexWrap: 'wrap', marginBottom: 16 }}>
64
        <Slider label="interval.min" unit="ms" min={10}  max={200}  step={10} value={intervalMin}   onChange={setIntervalMin} />
65
        <Slider label="interval.max" unit="ms" min={100} max={1000} step={50} value={intervalMax}   onChange={setIntervalMax} />
66
        <Slider label="rampDistance" unit="px" min={20}  max={300}  step={10} value={rampDistance}  onChange={setRampDistance} />
67
      </div>
68
      <HotTable
69
        data={data}
70
        colHeaders={colHeaders}
71
        width={500}
72
        height={220}
73
        rowHeaders={true}
74
        dragToScroll={{ interval: { min: intervalMin, max: intervalMax }, rampDistance }}
75
        licenseKey="non-commercial-and-evaluation"
76
      />
77
    </div>
78
  );
79
};
80

81
export default ExampleComponent;

Disable drag to scroll

Set dragToScroll to false to turn off the plugin entirely. The viewport will not scroll when the cursor leaves it during a drag.

1
dragToScroll: false,

Configuration options

dragToScroll

Plugins

DragToScroll

Drag to scroll

Overview

Enable drag to scroll

Configure scroll speed

Disable drag to scroll

Related API reference