Row Dragging (Vue)

Allow users to reorder rows in the Vue 3 grid via drag-and-drop, with handle-based dragging, drop indicators, and event hooks for persistence logic today.

gp-grid supports row reordering via drag and drop. You can designate a column as a drag handle or allow dragging from any cell.

Interactive Demo

Drag Handle Column

Set rowDrag: true on a column to make it act as a drag handle:

<script setup lang="ts">
import { Grid, useGridData, type ColumnDefinition } from "@gp-grid/vue";

const columns: ColumnDefinition[] = [
  { field: "id", cellDataType: "number", width: 40, rowDrag: true, sortable: false },
  { field: "task", cellDataType: "text", width: 200, headerName: "Task" },
  { field: "assignee", cellDataType: "text", width: 120, headerName: "Assignee" },
  { field: "status", cellDataType: "text", width: 100, headerName: "Status" },
];

const { dataSource } = useGridData(initialData, {
  getRowId: (row) => row.id,
});

function handleRowDragEnd(sourceIndex: number, targetIndex: number) {
  dataSource.moveRow(sourceIndex, targetIndex);
}
</script>

<template>
  <div style="height: 400px">
    <Grid
      :columns="columns"
      :data-source="dataSource"
      :row-height="36"
      @row-drag-end="handleRowDragEnd"
    />
  </div>
</template>

Entire Row Dragging

Set row-drag-entire-row to allow dragging from any cell:

<template>
  <Grid
    :columns="columns"
    :data-source="dataSource"
    :row-height="36"
    :row-drag-entire-row="true"
    @row-drag-end="handleRowDragEnd"
  />
</template>

Data Reordering

The consumer is responsible for reordering data. Call dataSource.moveRow() from the useGridData composable:

<script setup lang="ts">
const { dataSource } = useGridData(data, {
  getRowId: (row) => row.id,
});

function handleRowDragEnd(sourceIndex: number, targetIndex: number) {
  dataSource.moveRow(sourceIndex, targetIndex);
}
</script>

Key Points

Use rowDrag: true on a column for a dedicated drag handle
Use :row-drag-entire-row="true" to drag from any cell
Always use a mutable data source via useGridData for row reordering
The drop indicator works correctly with virtual scrolling