Skip to content
RevoGrid [Pro]

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';
}

Features

Section titled “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

Section titled “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:

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


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

Usage

Section titled “Usage”

To enable column group dragging:

  1. Set up your columns with groups
  2. Add the ColumnMoveAdvancedPlugin to your plugins array
  3. Drag group headers to move entire groups
const grid = document.createElement('revo-grid');
grid.plugins = [ColumnMoveAdvancedPlugin];


// Configure columns with groups
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' },
    ],
  },
  {
    name: 'Contact',
    children: [
      { prop: 'email', name: 'Email' },
      { prop: 'phone', name: 'Phone' },
      { prop: 'mobile', name: 'Mobile' },
    ],
  },
];


// Sample data
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',
  },
  // ... more rows
];

How It Works

Section titled “How It Works”

When you drag a group header:

  1. Group Detection: The plugin detects that you’re dragging a group header (not an individual column)
  2. Group Integrity: All columns within the group are moved together as a single unit
  3. Boundary Snapping: The drag handler snaps to group boundaries for intuitive positioning
  4. 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

Section titled “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
grid.addEventListener('columndragstart', (event) => {
  const { data } = event.detail;
  // Check if dragging a group
  if (data.children && data.indexes) {
    console.log('Dragging group:', data.name);
  }
});


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

Best Practices

Section titled “Best Practices”
  1. Use group headers for logical column organization
  2. Keep group names concise and descriptive
  3. Consider user workflow when organizing groups
  4. Test drag operations with nested groups to ensure proper behavior
  5. 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.