Examples
Row Dragging
Reorder rows by dragging
Row Dragging
gp-grid supports row reordering via drag and drop. You can designate a column as a drag handle or allow dragging from any cell.
Drag Handle Column
Set rowDrag: true on a column to make it act as a drag handle:
<script setup lang="ts">
import { Grid, createMutableClientDataSource, 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 = createMutableClientDataSource(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. Use dataSource.moveRow():
<script setup lang="ts">
const dataSource = createMutableClientDataSource(data, {
getRowId: (row) => row.id,
});
function handleRowDragEnd(sourceIndex: number, targetIndex: number) {
dataSource.moveRow(sourceIndex, targetIndex);
}
</script>Key Points
- Use
rowDrag: trueon a column for a dedicated drag handle - Use
:row-drag-entire-row="true"to drag from any cell - Always use a mutable data source for row reordering
- The drop indicator works correctly with virtual scrolling