gp-grid-logo
Guides

Column Dragging

Let users reorder columns in the React 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

import { Grid, type ColumnDefinition, type ColumnMovedEvent } from "@gp-grid/react";

const columns: ColumnDefinition[] = [
  { field: "id", cellDataType: "number", width: 80, movable: false },
  { field: "name", cellDataType: "text", width: 150 },
  { field: "email", cellDataType: "text", width: 250 },
];

function handleColumnMoved(event: ColumnMovedEvent) {
  console.log(event.columnId, event.fromViewIndex, event.toViewIndex);
}

function Example({ data }: { data: { id: number; name: string; email: string }[] }) {
  return (
    <div style={{ height: 400 }}>
      <Grid columns={columns} rowData={data} rowHeight={36} onColumnMoved={handleColumnMoved} />
    </div>
  );
}

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.

Highlighting

Highlight rows, columns, and individual cells inside the React grid using conditional rules, hover styling, and custom CSS class overrides per cell today.

Row Dragging

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