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.
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.
"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>
);
}
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.
"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>
);
}
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.
"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 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.