Row Dragging

LyteNyte Grid enables powerful row dragging capabilities that allow users to manipulate data through intuitive drag interactions. You can drag single or multiple rows within the same grid, between different grids, or to external drop zones. The framework provides the functionality without imposing default behaviors, giving you complete control over how drag interactions are handled in your application.

Row Dragging Single Row

To enable row dragging, set the rowDragEnabled property to true in your grid state. This displays a marker column with drag handles, making all rows draggable by default. If you need selective dragging functionality, implement the rowDragPredicate function to dynamically control which rows can be dragged based on your business logic.

Row Dragging

"use client";
 
import {
  LyteNyteGrid,
  useLyteNytePro,
  useClientDataSource,
} from "@1771technologies/lytenyte-pro";
import "@1771technologies/lytenyte-pro/grid.css";
import { ColumnProReact } from "@1771technologies/lytenyte-pro/types";
import { bankDataSmall } from "@1771technologies/sample-data/bank-data-smaller";
import { useId } from "react";
 
const columns: ColumnProReact[] = [
  { id: "age", type: "number" },
  { id: "job" },
  { id: "balance", type: "number" },
  { id: "education" },
  { id: "marital" },
  { id: "default" },
  { id: "housing" },
  { id: "loan" },
  { id: "contact" },
  { id: "day", type: "number" },
  { id: "month" },
  { id: "duration" },
  { id: "campaign" },
  { id: "pdays" },
  { id: "previous" },
  { id: "poutcome" },
  { id: "y" },
];
 
export function RowDragging() {
  const ds = useClientDataSource({
    data: bankDataSmall,
  });
 
  const grid = useLyteNytePro({
    gridId: useId(),
    rowDataSource: ds,
 
    rowDragEnabled: true,
    columns,
  });
 
  grid.useEvent("onRowDragDrop", (p) => {
    alert(`You dragged row at index ${p.rows[0].rowIndex} over ${p.overIndex}`);
  });
 
  return (
    <div>
      <div style={{ height: 500, display: "flex", flexDirection: "column" }}>
        <div style={{ flex: "1" }}>
          <LyteNyteGrid grid={grid} />
        </div>
      </div>
    </div>
  );
}

Dragging Multiple Rows

LyteNyte Grid seamlessly integrates row dragging with row selection to support dragging multiple rows simultaneously. When you enable rowDragMultiRow and initiate a drag operation on a row, all currently selected rows are included in the drag operation. This feature is particularly useful for manipulating groups of related items. Try selecting multiple rows in the example below before dragging to see this in action.

Row Dragging Multiple

"use client";
 
import {
  LyteNyteGrid,
  useLyteNytePro,
  useClientDataSource,
} from "@1771technologies/lytenyte-pro";
import "@1771technologies/lytenyte-pro/grid.css";
import { ColumnProReact } from "@1771technologies/lytenyte-pro/types";
import { bankDataSmall } from "@1771technologies/sample-data/bank-data-smaller";
import { useId } from "react";
 
const columns: ColumnProReact[] = [
  { id: "age", type: "number" },
  { id: "job" },
  { id: "balance", type: "number" },
  { id: "education" },
  { id: "marital" },
  { id: "default" },
  { id: "housing" },
  { id: "loan" },
  { id: "contact" },
  { id: "day", type: "number" },
  { id: "month" },
  { id: "duration" },
  { id: "campaign" },
  { id: "pdays" },
  { id: "previous" },
  { id: "poutcome" },
  { id: "y" },
];
 
export function RowDraggingMultiple() {
  const ds = useClientDataSource({
    data: bankDataSmall,
  });
 
  const grid = useLyteNytePro({
    gridId: useId(),
    rowDataSource: ds,
 
    rowDragEnabled: true,
    rowDragMultiRow: true,
    rowSelectionMode: "multiple",
    rowSelectionMultiSelectOnClick: true,
    columns,
  });
 
  grid.useEvent("onRowDragDrop", (p) => {
    alert(`You dragged over ${p.overIndex}`);
  });
 
  return (
    <div>
      <div style={{ height: 500, display: "flex", flexDirection: "column" }}>
        <div style={{ flex: "1" }}>
          <LyteNyteGrid grid={grid} />
        </div>
      </div>
    </div>
  );
}

Row Dragging Between Grids

LyteNyte Grid supports cross-grid row dragging, allowing rows to be transferred between different grid instances. To implement this functionality, use the rowDragExternalGrids property, which accepts an array of external grid API objects. When configured, these external grids will receive notifications about drag operations occurring in the source grid.

Row Dragging Between Grids

"use client";
 
import {
  LyteNyteGrid,
  useLyteNytePro,
  useClientDataSource,
} from "@1771technologies/lytenyte-pro";
import "@1771technologies/lytenyte-pro/grid.css";
import { ColumnProReact } from "@1771technologies/lytenyte-pro/types";
import { bankDataSmall } from "@1771technologies/sample-data/bank-data-smaller";
import { useId } from "react";
 
const columns: ColumnProReact[] = [
  { id: "age", type: "number" },
  { id: "job" },
  { id: "balance", type: "number" },
  { id: "education" },
  { id: "marital" },
  { id: "default" },
  { id: "housing" },
  { id: "loan" },
  { id: "contact" },
  { id: "day", type: "number" },
  { id: "month" },
  { id: "duration" },
  { id: "campaign" },
  { id: "pdays" },
  { id: "previous" },
  { id: "poutcome" },
  { id: "y" },
];
 
export function RowDragginBetweenGrids() {
  const ds = useClientDataSource({
    data: bankDataSmall,
  });
 
  const grid2 = useLyteNytePro({
    gridId: useId(),
    rowDataSource: ds,
    columns,
  });
 
  const grid = useLyteNytePro({
    gridId: "First Grid",
    rowDataSource: ds,
 
    rowDragEnabled: true,
    rowDragMultiRow: true,
    rowSelectionMode: "multiple",
    rowSelectionMultiSelectOnClick: true,
    rowDragExternalGrids: [grid2.api],
    columns,
  });
 
  grid2.useEvent("onRowDragDrop", (p) => {
    alert(
      `You dragged over ${p.overIndex} from ${p
        .externalGridApi!.getState()
        .gridId.peek()}`
    );
  });
 
  return (
    <div>
      <div
        style={{
          height: 700,
          display: "flex",
          flexDirection: "column",
          gap: 24,
        }}
      >
        <div style={{ flex: "1" }}>
          <LyteNyteGrid grid={grid} />
        </div>
        <div style={{ flex: "1" }}>
          <LyteNyteGrid grid={grid2} />
        </div>
      </div>
    </div>
  );
}

Important: Row drag events are fired on the target grid (where rows are being dropped), not on the source grid (where the drag originated). For example, to handle rows being dropped from one grid to another, register the onRowDragDrop event listener on the destination grid, not the source grid.

See the code in the example above for a practical implementation.

Row Drag Events

Row drag events form the foundation of LyteNyte Grid's drag functionality. Since no default behaviors are defined, you must implement these event handlers to determine how drag interactions should be processed:

onRowDragStart: Triggered when a row drag operation begins.
onRowDragMove: Triggered during drag movement. As this event fires frequently, ensure your handlers are performance-optimized.
onRowDragCancel: Triggered when a drag operation is cancelled (e.g., by pressing the Escape key).
onRowDragEnd: Triggered when a drag operation concludes normally (not cancelled).
onRowDragDrop: Triggered when dragged rows are released over a valid drop zone.

With these comprehensive events, you can implement virtually any drag-and-drop interaction required by your application.

LyteNyte Grid's row dragging is built on the native HTML drag and drop API, enabling interoperability with external applications. However, be aware that when dragging to external applications, native events may behave differently than expected. Consider these nuances when designing cross-application drag-and-drop solutions.

PreviousRow Full Width

Next Cell Renderers