# Column Dialog
URL: https://pro.rv-grid.com/api/column-dialog/
Source: src/content/docs/api/column-dialog.md
## Module Extensions

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

```ts
interface HTMLRevoGridElement {
  columnDialog?: ColumnDialogConfig
}
```

---

### `HTMLRevoGridElementEventMap` (Extended from `global`)

```ts
interface HTMLRevoGridElementEventMap {
  [COLUMN_DIALOG_OPEN_EVENT]: undefined;
  [COLUMN_DIALOG_CLOSE_EVENT]: undefined;
  [COLUMN_DIALOG_TOGGLE_EVENT]: undefined;
  [COLUMN_DIALOG_CHANGE_EVENT]: ColumnDialogChangeDetail
}
```

## Plugin API

### `buildColumnDialogRows`

```ts
export function buildColumnDialogRows(;
```

---

### `buildColumnDialogRowsFromProviders`

```ts
export function buildColumnDialogRowsFromProviders(
  providers: PluginProviders,
  hiddenColumns: ReadonlySet<ColumnProp>,
): ColumnDialogRow[];
```

---

### `filterColumnDialogRows`

```ts
export function filterColumnDialogRows(
  rows: readonly ColumnDialogRow[],
  query: string,
): ColumnDialogRow[];
```

---

### `getDialogRowDescendantProps`

```ts
export function getDialogRowDescendantProps(
  rows: readonly ColumnDialogRow[],
  rowId: string,
): ColumnProp[];
```

---

### `resolveNextHiddenColumns`

```ts
export function resolveNextHiddenColumns(
  rows: readonly ColumnDialogRow[],
  hiddenColumns: ReadonlySet<ColumnProp>,
  rowId: string,
  visible: boolean,
): ColumnProp[];
```

---

### `resolveColumnDialogReorder`

```ts
export function resolveColumnDialogReorder(;
```

---

### `normalizeHiddenColumns`

```ts
export function normalizeHiddenColumns(value: unknown): ColumnProp[];
```

---

### `ColumnCollection`

Column collection definition.
Used to access indexed data for columns.
Can be accessed via different events.

```ts
/**
 * Column collection definition.
 * Used to access indexed data for columns.
 * Can be accessed via different events.
 */
export type ColumnCollection = {
    /**
     * Columns as they are in stores
     */
    columns: Record<DimensionCols, ColumnRegular[]>;
    /**
     * Columns indexed by prop for quick access, it's possible to have multiple columns with same prop but not recommended
     */
    columnByProp: Record<ColumnProp, ColumnRegular[]>;
    /**
     * Grouped columns
     */
    columnGrouping: ColumnGroupingCollection;
    /**
     * Max level of grouping
     */
    maxLevel: number;
    /**
     * Sorting
     */
    sort: Record<ColumnProp, ColumnRegular>;
};
```

---

### `ColumnDialog`

```ts
export function ColumnDialog(;
```

---

### `COLUMN_DIALOG_OPEN_EVENT`

```ts
COLUMN_DIALOG_OPEN_EVENT: string;
```

---

### `COLUMN_DIALOG_CLOSE_EVENT`

```ts
COLUMN_DIALOG_CLOSE_EVENT: string;
```

---

### `COLUMN_DIALOG_TOGGLE_EVENT`

```ts
COLUMN_DIALOG_TOGGLE_EVENT: string;
```

---

### `COLUMN_DIALOG_CHANGE_EVENT`

```ts
COLUMN_DIALOG_CHANGE_EVENT: string;
```

---

### `ColumnDialogApplyMode`

```ts
export type ColumnDialogApplyMode = 'immediate';
```

---

### `ColumnDialogConfig`

```ts
interface ColumnDialogConfig {
  title?: string;
  searchPlaceholder?: string;
  closeLabel?: string;
  width?: number | string;
  height?: number | string
}
```

---

### `ColumnDialogRowKind`

```ts
export type ColumnDialogRowKind = 'group' | 'column';
```

---

### `ColumnDialogVisibilityState`

```ts
export type ColumnDialogVisibilityState = 'checked' | 'unchecked' | 'indeterminate';
```

---

### `ColumnDialogRow`

```ts
interface ColumnDialogRow {
  id: string;
  parentId: string | null;
  name: string;
  prop: ColumnProp | null;
  kind: ColumnDialogRowKind;
  type: DimensionCols;
  physicalIndex: number | null;
  sourceIndexes: number[];
  order: number;
  depth: number;
  visible: boolean;
  visibilityState: ColumnDialogVisibilityState;
  rowDrag: boolean
}
```

---

### `ColumnDialogChangeDetail`

```ts
interface ColumnDialogChangeDetail {
  hiddenColumns: ColumnProp[]
}
```

---

### `ColumnDialogReorderRequest`

```ts
interface ColumnDialogReorderRequest {
  rows: readonly ColumnDialogRow[];
  draggedRowId: string;
  targetRowId: string;
  position: 'before' | 'after'
}
```

---

### `ColumnDialogReorderResult`

```ts
interface ColumnDialogReorderResult {
  valid: boolean;
  reason?: string;
  type?: DimensionCols;
  proxyItems?: number[]
}
```

---

### `ColumnDialogPlugin`

Column manager dialog for RevoGrid Pro.

`ColumnDialogPlugin` renders a modal column-management dialog backed by an
internal RevoGrid tree. It lists all host grid columns, including columns
currently hidden by `ColumnHidePlugin`, and lets users search, toggle
visibility, and reorder columns or column groups inside their current
parent/pin section.

Visibility is intentionally delegated to `ColumnHidePlugin`; this plugin
auto-installs it when it is not already registered and writes changes through
`grid.hideColumns`.

### Usage

```ts
import { ColumnDialogPlugin } from '@revolist/revogrid-pro';

const grid = document.querySelector('revo-grid')!;

grid.plugins = [ColumnDialogPlugin];
grid.columnDialog = {
  title: 'Columns',
  searchPlaceholder: 'Search columns...',
};

// Open with a grid event.
grid.dispatchEvent(new CustomEvent('revocolumndialogopen'));

// Or open through the plugin instance.
const plugins = await grid.getPlugins();
plugins.getByClass(ColumnDialogPlugin)?.open();

grid.addEventListener('revocolumndialogchange', (event) => {
  console.log(event.detail.hiddenColumns);
});
```

Public events:
- `revocolumndialogopen` opens the dialog.
- `revocolumndialogclose` closes the dialog.
- `revocolumndialogtoggle` toggles open state.
- `revocolumndialogchange` emits after visibility or ordering changes.

#### Dependencies

- **Auto-installed** `ColumnHidePlugin`: Uses ColumnHidePlugin as the only host visibility engine.
- **Event integration** `COLUMN_UPDATED_EVENT`, `HIDDEN_COLUMNS_UPDATED_EVENT`, `COLUMN_DRAG_END_EVENT`: Tracks host column definitions, hidden-column state, and host column reorder.

```ts
class ColumnDialogPlugin {
  open(): void;

  close(): void;

  toggle(): void;

  destroy(): void;
}
```
