React Data GridRow moving

Change the order of rows, either manually (dragging them to another location), or programmatically (using Handsontable's API methods).

Enable the ManualRowMove plugin
Drag and move actions of manualRowMove plugin
Related API reference

Enable the `ManualRowMove` plugin

To enable row moving, set the manualRowMove option to true.

A draggable move handle appears above the selected row header. You can click and drag it to any location in the row header body.

{
  "name": "handsontable",
  "version": "1.0.0",
  "description": "",
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "hyperformula": "^2.4.0",
    "handsontable": "14.6",
    "@handsontable/react": "14.6"
  },
  
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Handsontable</title>
  </head>

  <body>
    <noscript> You need to enable JavaScript to run this app. </noscript>
    <div id="root"></div>
  </body>
</html>

import React, { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import "./styles.css";
import ExampleComponent from "./ExampleComponent";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <ExampleComponent />
  </StrictMode>
);

import React from "react";
import { HotTable } from '@handsontable/react';
import { registerAllModules } from 'handsontable/registry';
import 'handsontable/dist/handsontable.full.min.css';

// register Handsontable's modules
registerAllModules();

// generate an array of arrays with dummy data
const data = new Array(200) // number of rows
  .fill(0)
  .map((_, row) =>
    new Array(20) // number of columns
      .fill(0)
      .map((_, column) => `${row}, ${column}`)
  );

const ExampleComponent = () => {
  return (
    <HotTable
      data={data}
      width="100%"
      height={320}
      rowHeaders={true}
      colHeaders={true}
      colWidths={100}
      manualRowMove={true}
      autoWrapRow={true}
      autoWrapCol={true}
      licenseKey="non-commercial-and-evaluation"
    />
  );
};

export default ExampleComponent;

import { HotTable } from '@handsontable/react';
import { registerAllModules } from 'handsontable/registry';
import 'handsontable/dist/handsontable.full.min.css';

// register Handsontable's modules
registerAllModules();

// generate an array of arrays with dummy data
const data = new Array(200) // number of rows
  .fill(0)
  .map((_, row) =>
    new Array(20) // number of columns
      .fill(0)
      .map((_, column) => `${row}, ${column}`)
  );

const ExampleComponent = () => {
  return (
    <HotTable
      data={data}
      width="100%"
      height={320}
      rowHeaders={true}
      colHeaders={true}
      colWidths={100}
      manualRowMove={true}
      autoWrapRow={true}
      autoWrapCol={true}
      licenseKey="non-commercial-and-evaluation"
    />
  );
};



ReactDOM.render(<ExampleComponent />, document.getElementById("example1"));

<script src="https://cdn.jsdelivr.net/npm/handsontable@14.6/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@14.6/dist/handsontable.full.min.css" /> 
<script src="https://cdn.jsdelivr.net/npm/react@17/umd/react.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom@17/umd/react-dom.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@handsontable/react@14.6/dist/react-handsontable.min.js"></script>
<script src="https://handsontable.com/docs/14.6/scripts/fixer.js"></script>

<div id="example1" class="hot "></div>

Drag and move actions of `manualRowMove` plugin

There are significant differences between the plugin's dragRows and moveRows API functions. Both of them change the order of rows, but they rely on different kinds of indexes. The differences between them are shown in the diagrams below.

Both of these methods trigger the beforeRowMove and afterRowMove hooks, but only dragRows passes the dropIndex argument to them.

The dragRows method has a dropIndex parameter, which points to where the elements are being dropped.

dragRows method

The moveRows method has a finalIndex parameter, which points to where the elements will be placed after the moving action - finalIndex being the index of the first moved element.

moveRows method

The moveRows function cannot perform some actions, e.g., more than one element can't be moved to the last position. In this scenario, the move will be cancelled. The Plugin's isMovePossible API method and the movePossible parameters beforeRowMove and afterRowMove hooks help in determine such situations.

Options:
- manualRowMove
Core methods:
- toVisualRow
Hooks:
- afterRowMove
- beforeRowMove
Plugins:
- ManualRowMove

React Data GridRow moving

Enable the ManualRowMove plugin

Drag and move actions of manualRowMove plugin

Related API reference

Enable the `ManualRowMove` plugin

Drag and move actions of `manualRowMove` plugin