Column Group Drag

The Column Move Advanced plugin allows you to drag and drop entire column groups while maintaining group integrity. When you drag a group header, all columns within that group move together, and the plugin automatically updates group indexes at all levels.

Source code

import {
  ColumnMoveAdvancedPlugin,
  RowOddPlugin,
  columnTypeRenderer,
} from '@revolist/revogrid-pro';
import { defineCustomElements } from '@revolist/revogrid/loader';
defineCustomElements();

const grid = document.querySelector('revo-grid');
if (grid) {
  grid.colSize = 120;
  grid.source = [
    {
      firstName: 'John',
      lastName: 'Doe',
      age: 30,
      street: '123 Main St',
      city: 'New York',
      country: 'USA',
      email: '[email protected]',
      phone: '123-456-7890',
      mobile: '098-765-4321',
    },
    {
      firstName: 'Jane',
      lastName: 'Smith',
      age: 28,
      street: '456 Oak Ave',
      city: 'São Paulo',
      country: 'Brazil',
      email: '[email protected]',
      phone: '234-567-8901',
      mobile: '987-654-3210',
    },
    {
      firstName: 'Bob',
      lastName: 'Johnson',
      age: 35,
      street: '789 Pine Rd',
      city: 'Madrid',
      country: 'Spain',
      email: '[email protected]',
      phone: '345-678-9012',
      mobile: '876-543-2109',
    },
    {
      firstName: 'Alice',
      lastName: 'Williams',
      age: 32,
      street: '321 Elm St',
      city: 'London',
      country: 'UK',
      email: '[email protected]',
      phone: '456-789-0123',
      mobile: '765-432-1098',
    },
  ];

  grid.columns = [
    {
      name: 'Personal Information',
      columnTemplate: columnTypeRenderer,
      children: [
        {
          prop: 'firstName',
          name: 'First Name',
          size: 125,
        },
        {
          prop: 'lastName',
          name: 'Last Name',
        },
        {
          prop: 'age',
          name: 'Age',
        },
      ],
    },
    {
      name: 'Address',
      columnType: 'id',
      columnTemplate: columnTypeRenderer,
      children: [
        {
          prop: 'street',
          name: 'Street',
          size: 155,
        },
        {
          prop: 'city',
          name: 'City',
        },
        {
          prop: 'country',
          name: 'Country',
        },
      ],
    },
    {
      name: 'Contact',
      columnType: 'integer',
      columnTemplate: columnTypeRenderer,
      children: [
        {
          prop: 'email',
          name: 'Email',
        },
        {
          prop: 'phone',
          name: 'Phone',
        },
        {
          prop: 'mobile',
          name: 'Mobile',
        },
      ],
    },
  ];

  grid.plugins = [ColumnMoveAdvancedPlugin, RowOddPlugin];
  grid.theme = 'material';
}

import React from 'react';
import { RevoGrid } from '@revolist/react-datagrid';
import {
  ColumnMoveAdvancedPlugin,
  RowOddPlugin,
  columnTypeRenderer,
} from '@revolist/revogrid-pro';
import { currentTheme } from '../composables/useRandomData';

const ColumnMoveWithGroups: React.FC = () => {
  const { isDark } = currentTheme();

  const source = [
    {
      firstName: 'John',
      lastName: 'Doe',
      age: 30,
      street: '123 Main St',
      city: 'New York',
      country: 'USA',
      email: '[email protected]',
      phone: '123-456-7890',
      mobile: '098-765-4321',
    },
    {
      firstName: 'Jane',
      lastName: 'Smith',
      age: 28,
      street: '456 Oak Ave',
      city: 'São Paulo',
      country: 'Brazil',
      email: '[email protected]',
      phone: '234-567-8901',
      mobile: '987-654-3210',
    },
    {
      firstName: 'Bob',
      lastName: 'Johnson',
      age: 35,
      street: '789 Pine Rd',
      city: 'Madrid',
      country: 'Spain',
      email: '[email protected]',
      phone: '345-678-9012',
      mobile: '876-543-2109',
    },
    {
      firstName: 'Alice',
      lastName: 'Williams',
      age: 32,
      street: '321 Elm St',
      city: 'London',
      country: 'UK',
      email: '[email protected]',
      phone: '456-789-0123',
      mobile: '765-432-1098',
    },
  ];

  const columns = [
    {
      name: 'Personal Information',
      columnTemplate: columnTypeRenderer,
      children: [
        {
          prop: 'firstName',
          name: 'First Name',
          size: 125,
        },
        {
          prop: 'lastName',
          name: 'Last Name',
        },
        {
          prop: 'age',
          name: 'Age',
        },
      ],
    },
    {
      name: 'Address',
      columnType: 'id',
      columnTemplate: columnTypeRenderer,
      children: [
        {
          prop: 'street',
          name: 'Street',
          size: 155,
        },
        {
          prop: 'city',
          name: 'City',
        },
        {
          prop: 'country',
          name: 'Country',
        },
      ],
    },
    {
      name: 'Contact',
      columnType: 'integer',
      columnTemplate: columnTypeRenderer,
      children: [
        {
          prop: 'email',
          name: 'Email',
        },
        {
          prop: 'phone',
          name: 'Phone',
        },
        {
          prop: 'mobile',
          name: 'Mobile',
        },
      ],
    },
  ];

  const plugins = [ColumnMoveAdvancedPlugin, RowOddPlugin];

  return (
    <RevoGrid
      className="grow h-full cell-border"
      source={source}
      columns={columns}
      plugins={plugins}
      resize
      hide-attribution
      theme={isDark() ? 'darkMaterial' : 'material'}
      style={{ minHeight: '300px' }}
    />
  );
};

export default ColumnMoveWithGroups;

<template>
  <RevoGrid
    class="grow h-full cell-border"
    :theme="isDark ? 'darkMaterial' : 'material'"
    :columns="columns"
    :source="source"
    :plugins="plugins"
    hide-attribution
    style="min-height: 300px;"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import RevoGrid from '@revolist/vue3-datagrid';
import {
  ColumnMoveAdvancedPlugin,
  RowOddPlugin,
  columnTypeRenderer,
} from '@revolist/revogrid-pro';
import { currentThemeVue } from '../composables/useRandomData';

const { isDark } = currentThemeVue();

const source = ref([
  {
    firstName: 'John',
    lastName: 'Doe',
    age: 30,
    street: '123 Main St',
    city: 'New York',
    country: 'USA',
    email: '[email protected]',
    phone: '123-456-7890',
    mobile: '098-765-4321',
  },
  {
    firstName: 'Jane',
    lastName: 'Smith',
    age: 28,
    street: '456 Oak Ave',
    city: 'São Paulo',
    country: 'Brazil',
    email: '[email protected]',
    phone: '234-567-8901',
    mobile: '987-654-3210',
  },
  {
    firstName: 'Bob',
    lastName: 'Johnson',
    age: 35,
    street: '789 Pine Rd',
    city: 'Madrid',
    country: 'Spain',
    email: '[email protected]',
    phone: '345-678-9012',
    mobile: '876-543-2109',
  },
  {
    firstName: 'Alice',
    lastName: 'Williams',
    age: 32,
    street: '321 Elm St',
    city: 'London',
    country: 'UK',
    email: '[email protected]',
    phone: '456-789-0123',
    mobile: '765-432-1098',
  },
]);

const columns = ref([
  {
    name: 'Personal Information',
    columnTemplate: columnTypeRenderer,
    children: [
      {
        prop: 'firstName',
        name: 'First Name',
        size: 125,
      },
      {
        prop: 'lastName',
        name: 'Last Name',
      },
      {
        prop: 'age',
        name: 'Age',
      },
    ],
  },
  {
    name: 'Address',
    columnType: 'id',
    columnTemplate: columnTypeRenderer,
    children: [
      {
        prop: 'street',
        name: 'Street',
        size: 155,
      },
      {
        prop: 'city',
        name: 'City',
      },
      {
        prop: 'country',
        name: 'Country',
      },
    ],
  },
  {
    name: 'Contact',
    columnType: 'integer',
    columnTemplate: columnTypeRenderer,
    children: [
      {
        prop: 'email',
        name: 'Email',
      },
      {
        prop: 'phone',
        name: 'Phone',
      },
      {
        prop: 'mobile',
        name: 'Mobile',
      },
    ],
  },
]);

const plugins = [ColumnMoveAdvancedPlugin, RowOddPlugin];
</script>

import { Component } from '@angular/core';
import { RevoGrid } from '@revolist/angular-datagrid';
import {
  ColumnMoveAdvancedPlugin,
  RowOddPlugin,
  columnTypeRenderer,
} from '@revolist/revogrid-pro';

@Component({
  selector: 'app-column-move-with-groups',
  standalone: true,
  imports: [RevoGrid],
  template: `
    <revo-grid
      class="grow h-full cell-border"
      [source]="source"
      [columns]="columns"
      [plugins]="plugins"
      resize
      hide-attribution
      style="min-height: 300px;"
    ></revo-grid>
  `,
})
export class ColumnMoveWithGroupsComponent {
  source = [
    {
      firstName: 'John',
      lastName: 'Doe',
      age: 30,
      street: '123 Main St',
      city: 'New York',
      country: 'USA',
      email: '[email protected]',
      phone: '123-456-7890',
      mobile: '098-765-4321',
    },
    {
      firstName: 'Jane',
      lastName: 'Smith',
      age: 28,
      street: '456 Oak Ave',
      city: 'São Paulo',
      country: 'Brazil',
      email: '[email protected]',
      phone: '234-567-8901',
      mobile: '987-654-3210',
    },
    {
      firstName: 'Bob',
      lastName: 'Johnson',
      age: 35,
      street: '789 Pine Rd',
      city: 'Madrid',
      country: 'Spain',
      email: '[email protected]',
      phone: '345-678-9012',
      mobile: '876-543-2109',
    },
    {
      firstName: 'Alice',
      lastName: 'Williams',
      age: 32,
      street: '321 Elm St',
      city: 'London',
      country: 'UK',
      email: '[email protected]',
      phone: '456-789-0123',
      mobile: '765-432-1098',
    },
  ];

  columns = [
    {
      name: 'Personal Information',
      columnTemplate: columnTypeRenderer,
      children: [
        {
          prop: 'firstName',
          name: 'First Name',
          size: 125,
        },
        {
          prop: 'lastName',
          name: 'Last Name',
        },
        {
          prop: 'age',
          name: 'Age',
        },
      ],
    },
    {
      name: 'Address',
      columnType: 'id',
      columnTemplate: columnTypeRenderer,
      children: [
        {
          prop: 'street',
          name: 'Street',
          size: 155,
        },
        {
          prop: 'city',
          name: 'City',
        },
        {
          prop: 'country',
          name: 'Country',
        },
      ],
    },
    {
      name: 'Contact',
      columnType: 'integer',
      columnTemplate: columnTypeRenderer,
      children: [
        {
          prop: 'email',
          name: 'Email',
        },
        {
          prop: 'phone',
          name: 'Phone',
        },
        {
          prop: 'mobile',
          name: 'Mobile',
        },
      ],
    },
  ];

  plugins = [ColumnMoveAdvancedPlugin, RowOddPlugin] as any;
}

Features

Drag entire column groups as a single unit
Maintain group integrity during drag operations
Automatic group index remapping at all levels
Snap to group boundaries for intuitive positioning
Support for nested column groups
Works seamlessly with existing column move functionality

Installation

The Column Move Advanced plugin is included in the RevoGrid Pro package. To use it, simply import and add it to your grid’s plugins:

1
import { ColumnMoveAdvancedPlugin } from '@revolist/revogrid-pro';
2

3
const grid = document.createElement('revo-grid');
4
grid.plugins = [ColumnMoveAdvancedPlugin];

Usage

To enable column group dragging:

Set up your columns with groups
Add the ColumnMoveAdvancedPlugin to your plugins array
Drag group headers to move entire groups

1
const grid = document.createElement('revo-grid');
2
grid.plugins = [ColumnMoveAdvancedPlugin];
3

4
// Configure columns with groups
5
grid.columns = [
6
  {
7
    name: 'Personal Information',
8
    children: [
9
      { prop: 'firstName', name: 'First Name' },
10
      { prop: 'lastName', name: 'Last Name' },
11
      { prop: 'age', name: 'Age' },
12
    ],
13
  },
14
  {
15
    name: 'Address',
16
    children: [
17
      { prop: 'street', name: 'Street' },
18
      { prop: 'city', name: 'City' },
19
      { prop: 'country', name: 'Country' },
20
    ],
21
  },
22
  {
23
    name: 'Contact',
24
    children: [
25
      { prop: 'email', name: 'Email' },
26
      { prop: 'phone', name: 'Phone' },
27
      { prop: 'mobile', name: 'Mobile' },
28
    ],
29
  },
30
];
31

32
// Sample data
33
grid.source = [
34
  {
35
    firstName: 'John',
36
    lastName: 'Doe',
37
    age: 30,
38
    street: '123 Main St',
39
    city: 'New York',
40
    country: 'USA',
41
    email: '[email protected]',
42
    phone: '123-456-7890',
43
    mobile: '098-765-4321',
44
  },
45
  // ... more rows
46
];

How It Works

When you drag a group header:

Group Detection: The plugin detects that you’re dragging a group header (not an individual column)
Group Integrity: All columns within the group are moved together as a single unit
Boundary Snapping: The drag handler snaps to group boundaries for intuitive positioning
Index Remapping: After the move, all group indexes at all levels are automatically remapped to reflect the new positions

Important Note

When dragging a group, the plugin ensures that all columns in the group move together. You cannot drag individual columns out of a group using this plugin - the group integrity is maintained throughout the operation.

Events

The plugin emits standard column drag events:

columndragstart: Fired when dragging starts. You can prevent the drag by calling event.preventDefault()
beforecolumndragend: Fired before the drag operation completes. You can prevent the move by calling event.preventDefault()
columndragend: Fired when the drag operation completes

1
grid.addEventListener('columndragstart', (event) => {
2
  const { data } = event.detail;
3
  // Check if dragging a group
4
  if (data.children && data.indexes) {
5
    console.log('Dragging group:', data.name);
6
  }
7
});
8

9
grid.addEventListener('columndragend', (event) => {
10
  console.log('Drag completed');
11
});

Best Practices

Use group headers for logical column organization
Keep group names concise and descriptive
Consider user workflow when organizing groups
Test drag operations with nested groups to ensure proper behavior
Use event handlers to provide user feedback during drag operations

The Column Move Advanced plugin makes it easy to reorganize complex data grids with grouped columns while maintaining data structure integrity.