# Column Move With Groups
URL: https://pro.rv-grid.com/guides/columns/column-move-with-groups/
Source: src/content/docs/guides/columns/column-move-with-groups.mdx
Description: Move grouped column headers without breaking the column-group structure.
`ColumnMoveAdvancedPlugin` enables drag-and-drop for grouped column headers. It builds on RevoGrid's core column move behavior and adds the group-aware rules needed for `ColumnGrouping` columns.

Use it when your grid has nested column groups and users need to reorder whole header bands without manually rebuilding the `columns` array.

## Setup

Import the plugin from `@revolist/revogrid-pro` and register it in the grid `plugins` array.

```ts
import { ColumnMoveAdvancedPlugin } from '@revolist/revogrid-pro';

const grid = document.createElement('revo-grid');

grid.plugins = [ColumnMoveAdvancedPlugin];
grid.columns = [
  {
    name: 'Personal Information',
    children: [
      { prop: 'firstName', name: 'First Name' },
      { prop: 'lastName', name: 'Last Name' },
      { prop: 'age', name: 'Age' },
    ],
  },
  {
    name: 'Address',
    children: [
      { prop: 'street', name: 'Street' },
      { prop: 'city', name: 'City' },
      { prop: 'country', name: 'Country' },
    ],
  },
];
```

`ColumnMoveAdvancedPlugin` extends the core `ColumnMovePlugin` implementation, so you do not need a separate column-move plugin entry for the common setup.

## Column Groups

Groups use the standard RevoGrid `ColumnGrouping` shape: a header object with a `name` and a `children` array. Children can be regular columns or another nested group.

```ts
grid.columns = [
  {
    name: 'Customer',
    children: [
      { prop: 'name', name: 'Name' },
      {
        name: 'Contact',
        children: [
          { prop: 'email', name: 'Email' },
          { prop: 'phone', name: 'Phone' },
        ],
      },
    ],
  },
  {
    name: 'Location',
    children: [
      { prop: 'city', name: 'City' },
      { prop: 'country', name: 'Country' },
    ],
  },
];
```

Leaf columns keep their normal column behavior: data binding, templates, sorting, filtering, resizing, and editing still belong to the regular column definitions.

## Move Behavior

Dragging a group header moves all leaf columns owned by that group as one block. During the drag, the drop indicator snaps to valid group boundaries instead of arbitrary leaf-column positions.

When the move completes, the plugin remaps the internal group indexes for every group level. This is the part plain `ColumnMovePlugin` does not handle for grouped headers.

Dragging an individual leaf column still works, but the plugin keeps the column inside its current group at the active grouping depth. This prevents a single leaf column from being dropped into a different group and leaving the header tree inconsistent.

Move a group by dragging the group header. Move a single leaf column by dragging the leaf header. Leaf-column moves are constrained to the compatible group area.

## Events

The plugin uses the standard column drag event names.

| Event | When it fires | Cancelable |
| --- | --- | --- |
| `columndragstart` | Before drag state is created. The detail is the dragged column or group data. | Yes |
| `beforecolumndragend` | Before the order is committed. The detail includes `startPosition`, `newPosition`, and moved items. | Yes |
| `columndragend` | After a successful drag flow finishes. | No |

```ts
grid.addEventListener('columndragstart', (event) => {
  const data = event.detail;

  if ('children' in data) {
    console.log('Group drag started:', data.name);
  }
});

grid.addEventListener('beforecolumndragend', (event) => {
  const { startPosition, newPosition } = event.detail;

  if (!canMoveColumns(startPosition, newPosition)) {
    event.preventDefault();
  }
});
```

## Framework Usage

For framework wrappers, pass the plugin class through the wrapper's `plugins` prop or input.

```tsx
import { RevoGrid } from '@revolist/react-datagrid';
import { ColumnMoveAdvancedPlugin } from '@revolist/revogrid-pro';

export function CustomerGrid({ rows, columns }) {
  return (
    <RevoGrid
      source={rows}
      columns={columns}
      plugins={[ColumnMoveAdvancedPlugin]}
    />
  );
}
```

```vue
<script setup lang="ts">
import { ColumnMoveAdvancedPlugin } from '@revolist/revogrid-pro';

const plugins = [ColumnMoveAdvancedPlugin];
</script>

<template>
  <RevoGrid :source="rows" :columns="columns" :plugins="plugins" />
</template>
```

## Compatibility

- Works with the standard nested `ColumnGrouping` structure.
- Supports nested group levels by remapping indexes across all group levels after a group move.
- Preserves regular leaf-column drag behavior, constrained to compatible group boundaries.
- Ignores row-header drag attempts.
- Uses the same `columndragstart`, `beforecolumndragend`, and `columndragend` event names as core column moving.

Use [Multi Row Headers](/guides/columns/multi-row-header/) when you need spreadsheet-style multi-level header spanning. Use [Column Collapse](/guides/columns/column-collapse/) when the same grouped headers should collapse or expand.
