Skip to main content

reorder

Description​

Optional. Enables row reordering via drag-n-drop

Usage​

reorder?: boolean;

Parameters​

By default, reorder is set to false (rows reordering is disabled). To enable row reordering via drag-n-drop, set the value to true. Reordering cannot be enabled for the tree mode (see the tree property).

Example​

import { getData } from "./common/data";
import { Grid } from "@svar-ui/react-grid";

const { data, columns } = getData();

function App() {
  return <Grid data={data} columns={columns} reorder />;
}

You can also add the drag handle to rows by setting the draggable parameter of the columns property to true:

import { Grid } from "@svar-ui/react-grid";
import { getData } from "../data";

const { data } = getData();

const columns = [
  { id: "id", header: "ID", draggable: true, width: 50 },
  { id: "city", header: "City" }
  // other columns
];

function App() {
  return <Grid data={data} columns={columns} reorder />;
}

Related articles: