Enabling row reordering

The component API allows reordering rows via drag-and-drop. You can either drag all rows or add drag handles 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";

export default function App() {
  const { data, columns } = getData();

  return (
    <Grid data={data} columns={columns} reorder />
    // or <Grid data={data} columns={columns} 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
];

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

To add the drag handle to specific rows, pass the row (and optionally the column) object 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 
];

export default function App() {
  return (
    <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 sample: Reordering rows

Related articles:

• move-item
• reorder