# Column Group Panel
URL: https://pro.rv-grid.com/api/column-group-panel/
Source: src/content/docs/api/column-group-panel.md
## Module Extensions

### `HTMLRevoGridElement` (Extended from `global`)

```ts
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`)

```ts
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

```ts
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
```typescript
import { ColumnGroupPanelPlugin } from '@revolist/revogrid-pro'

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

### Configuration
```typescript
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.

```ts
class ColumnGroupPanelPlugin {}
```
