Drag Column and Row Header

Using SpreadJS, you can drag columns and rows using headers on the MouseDown event to move and insert columns and rows using the allowDragHeaderToMove enumeration option, whose default value is none. The enumeration accepts four values as described in the table below:

Enum Type	Value	Description
none	0	Specifies that row or column headers cannot be dragged to move.
column	1	Specifies that only column headers can be dragged to move.
row	2	Specifies that only row headers can be dragged to move.
both	3	Specifies that both column and row headers can be dragged to move.

The cursor changes to a grab-hand shape when the mouse is over a draggable header, indicating that dragging is possible, and when dragging begins, the cursor changes to a grabbing-hand shape.

The following GIF depicts how the rows and columns are dragged to another location.

dragdropcolheader

Using Code

Refer to the following code depicting both columns and rows can be dragged when allowDragHeaderToMove enum is set to both.

let dragcolumrowheader = spread.options.allowDragHeaderToMove.both;

Using Designer

You can also use this feature using SpreadJS Designer by selecting the desired enum value from the Drag Header to Move dropdown available in the Spread Settings dialog.

dragcolrowheader

Limitation

TableSheet, GanttSheet, and touch gestures do not support dragging headers to move rows and columns.

Using Code
Using Designer
Limitation