Skip to main content

Enabling row reordering

The widget API allows reordering rows via drag-n-drop. You can either drag all rows or add drag handle for all or specific rows.

To enable reordering for all rows in a table, use the reorder property by setting it to true:

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

const { data, columns } = getData();

<Grid data={data} columns={columns} reorder /> // or reorder={true}

To add the drag handle to all rows, set 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
];

<Grid data={data} columns={columns} reorder />

To add the drag handle to specific rows, pass the row and column objects to the draggable function. Note that it will make reordering possible only for these selected rows.

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

const { data } = getData();

const columns = [
  { id: "id", header: "ID", draggable: (row) => row.id % 2 === 1, width: 50 },
  { id: "city", header: "City" },
  { id: "name", header: "Name" },
  // other columns 
];

<div style={{ padding: 20 }}>
  <h4>
    Restrictive drag handles (rows without drag handles cannot be moved)
  </h4>
  <div style={{ width: 800, height: 400 }}>
    <Grid data={data} columns={columns} reorder />
  </div>
</div>

Related articles: