# Column Add Popup
URL: https://pro.rv-grid.com/api/column-add-popup/
Source: src/content/docs/api/column-add-popup.md
## Module Extensions

### `AdditionalData` (Extended from `@revolist/revogrid`)

```ts
interface AdditionalData {
  /**
       * Column add popup plugin configuration.
       *
       * @deprecated Prefer the direct `grid.columnAddPopup` property.
       */
      columnAddPopup?: ColumnAddPopupConfig
}
```

---

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

```ts
interface HTMLRevoGridElement {
  /**
       * Column add popup plugin configuration.
       */
      columnAddPopup?: ColumnAddPopupConfig
}
```

## Plugin API

### `ColumnAddPopupPlugin`

```ts
class ColumnAddPopupPlugin {
  open(trigger: HTMLElement, originalEvent: MouseEvent);

  destroy();
}
```

---

### `ColumnAddPopupTone`

```ts
export type ColumnAddPopupTone =
  | 'green'
  | 'blue'
  | 'cyan'
  | 'red'
  | 'orange'
  | 'yellow'
  | 'violet'
  | 'pink'
  | 'gray';
```

---

### `ColumnAddPopupItem`

```ts
interface ColumnAddPopupItem {
  id: string;
  label: string;
  description?: string;
  icon?: string;
  tone?: ColumnAddPopupTone;
  disabled?: boolean;
  selected?: boolean
}
```

---

### `ColumnAddPopupSection`

```ts
interface ColumnAddPopupSection {
  title: string;
  items: ColumnAddPopupItem[]
}
```

---

### `ColumnAddPopupSelectContext`

```ts
interface ColumnAddPopupSelectContext {
  item: ColumnAddPopupItem;
  selected: boolean;
  grid: HTMLRevoGridElement;
  originalEvent: MouseEvent;
  close: () => void
}
```

---

### `ColumnAddPopupItemStateContext`

```ts
interface ColumnAddPopupItemStateContext {
  item: ColumnAddPopupItem;
  grid: HTMLRevoGridElement
}
```

---

### `ColumnAddPopupFooterContext`

```ts
interface ColumnAddPopupFooterContext {
  grid: HTMLRevoGridElement;
  originalEvent: MouseEvent;
  close: () => void
}
```

---

### `ColumnAddPopupConfig`

```ts
interface ColumnAddPopupConfig {
  sections?: ColumnAddPopupSection[];
  title?: string;
  footerLabel?: string;
  className?: string;
  isSelected?: (context: ColumnAddPopupItemStateContext) => boolean;
  onSelect?: (context: ColumnAddPopupSelectContext) => void;
  onFooterClick?: (context: ColumnAddPopupFooterContext) => void
}
```
