Guides
Column Dragging
Let users reorder columns in the Vue 3 grid by dragging their headers, with persistent ordering, locked columns, and a one-click reset-to-default action.
Drag column headers to change their order. The core keeps live state by column identity and leaves your definitions unchanged.
Interactive demo
Basic usage
<script setup lang="ts">
import { GpGrid, type ColumnDefinition, type ColumnMovedEvent } from "@gp-grid/vue";
const columns: ColumnDefinition[] = [
{ field: "id", cellDataType: "number", width: 80, movable: false },
{ field: "name", cellDataType: "text", width: 150 },
];
const data = [{ id: 1, name: "Alice" }];
function handleColumnMoved(event: ColumnMovedEvent) {
console.log(event.columnId, event.fromViewIndex, event.toViewIndex);
}
</script>
<template>
<div style="height: 400px">
<GpGrid :columns="columns" :row-data="data" :row-height="36" :on-column-moved="handleColumnMoved" />
</div>
</template>Set movable: false on a column to prevent dragging it. The callback reports the committed move; no columns-array reorder is required.
Persisting column state
Read core.columns.getState() to save order, widths, visibility, and pins. Restore with core.columns.resetState() followed by core.columns.setState(savedState). See column layout and the migration guide.