Skip to main content

draggableRows

Description​

Optional. Enables native HTML5 drag-and-drop for rows, allowing them to be dragged out of the grid

Usage​

draggableRows?: boolean | ((row: IRow) => boolean);

Parameters​

  • true - every row becomes natively draggable via the browser's HTML5 drag-and-drop API, so a row can be dragged out of the grid and dropped onto an external target (another list, card, custom drop zone, etc.)
  • false (default) - rows are not draggable
  • (row: IRow) => boolean - a function called for each row to decide individually whether that row can be dragged, e.g. to disable dragging for locked or read-only rows
note

draggableRows only makes rows natively draggable and fires the browser's dragstart event; it does not implement drag-and-drop behavior on its own. All drop handling (dragover, drop, accepting drags from outside, moving data in or out of the grid) must be implemented by the user, as shown in the example below.

Example​

import { useRef } from "react";
import { Grid } from "@svar-ui/react-grid";

const columns = [
    { id: "id", width: 50, header: "ID" },
    { id: "firstName", header: "First Name", width: 150 },
    { id: "lastName", header: "Last Name", width: 150 },
];

const data = [
    { id: 1, firstName: "Ernest", lastName: "Schuppe" },
    { id: 2, firstName: "Janis", lastName: "Vandervort" },
];

function Example() {
    const apiRef = useRef(null);

    function onGridDragStart(ev) {
        const row = apiRef.current.getRow(ev.target.dataset.id);
        ev.dataTransfer.setData("application/json", JSON.stringify(row));
        ev.dataTransfer.effectAllowed = "copy";
    }

    return (
        <div onDragStart={onGridDragStart}>
            <Grid
                ref={apiRef}
                data={data}
                columns={columns}
                draggableRows
            />
        </div>
    );
}

export default Example;

Related samples: