Column Group Panel

Module Extensions

HTMLRevoGridElement (Extended from global)

interface HTMLRevoGridElement {
  /**
       * Configuration for the column group panel.
       */
      columnGroupPanel?: ColumnGroupPanelConfig;
  /**
       * Kebab-case alias for framework bindings.
       */
      'column-group-panel'?: ColumnGroupPanelConfig
}

---

AdditionalData (Extended from @revolist/revogrid)

interface AdditionalData {
  /**
       * Additional data property for column group panel
       * @deprecated Use `grid.columnGroupPanel` instead.
       *
       * @example
       * ```typescript
       * const grid = document.createElement('revo-grid');
       * grid.additionalData = {
       *   columnGroupPanel: {
       *     emptyPanelText: 'Drop columns here to create groups'
       *   }
       * };
       * ```
       */
      columnGroupPanel?: ColumnGroupPanelConfig;
  /**
       * Legacy additional data property for column group panel.
       * @deprecated Use `grid.columnGroupPanel` instead.
       */
      columnGroupingPanel?: ColumnGroupPanelConfig
}

Plugin API

ColumnGroupPanelConfig

Configuration options for the ColumnGroupPanelPlugin

interface ColumnGroupPanelConfig {
  /**
     * Text to display in the group panel when no columns are grouped
     * @default 'Drag columns here to group by row.'
     */
    emptyPanelText?: string
}

---

ColumnGroupPanelPlugin

The ColumnGroupPanelPlugin is a plugin for RevoGrid that introduces a user-friendly interface for grouping columns. It enables users to drag and drop columns into a designated panel to create groupings, facilitating data organization and management.

Features:

• Creates a visual group panel in the grid header for column grouping.
• Supports drag-and-drop functionality to add, reorder, or remove column groupings.
• Updates the grid’s grouping state dynamically as users interact with the panel.
• Integrates drag events to enhance user interactions with column headers.

Usage:

• Instantiate ColumnGroupPanelPlugin and add it to the RevoGrid plugins array.
• Drag columns into the group panel to group them or manage existing groupings through the UI.

Example

import { ColumnGroupPanelPlugin } from '@revolist/revogrid-pro'

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

Configuration

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

grid.additionalData = {
  columnGroupPanel: {
    emptyPanelText: 'Drop columns here to create groups'
  }
};

This plugin is ideal for users who need to organize grid data by grouping columns, providing an intuitive interface for managing complex data sets.

Dependencies

• Config integration core-grouping: Writes grid grouping props through the core grouping API.

class ColumnGroupPanelPlugin {}