Column Dialog

Module Extensions

HTMLRevoGridElement (Extended from global)

interface HTMLRevoGridElement {
  columnDialog?: ColumnDialogConfig
}

---

HTMLRevoGridElementEventMap (Extended from global)

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

export function buildColumnDialogRows(;

---

buildColumnDialogRowsFromProviders

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

---

filterColumnDialogRows

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

---

getDialogRowDescendantProps

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

---

resolveNextHiddenColumns

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

---

resolveColumnDialogReorder

export function resolveColumnDialogReorder(;

---

normalizeHiddenColumns

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

---

ColumnCollection

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

/**
 * 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>;
};

---

resolveColumnDialogGridTheme

export function resolveColumnDialogGridTheme(theme: ColumnDialogTheme | undefined): 'compact' | 'darkCompact';

---

createDialogColumns

export function createDialogColumns(
  onToggle: (rowId: string, visible: boolean) => void,
  disableDrag = false,
): ColumnRegular[];

---

ColumnDialog

export function ColumnDialog(;

---

COLUMN_DIALOG_OPEN_EVENT

COLUMN_DIALOG_OPEN_EVENT: string;

---

COLUMN_DIALOG_CLOSE_EVENT

COLUMN_DIALOG_CLOSE_EVENT: string;

---

COLUMN_DIALOG_TOGGLE_EVENT

COLUMN_DIALOG_TOGGLE_EVENT: string;

---

COLUMN_DIALOG_CHANGE_EVENT

COLUMN_DIALOG_CHANGE_EVENT: string;

---

ColumnDialogApplyMode

export type ColumnDialogApplyMode = 'immediate';

---

ColumnDialogTheme

export type ColumnDialogTheme = 'light' | 'dark';

---

ColumnDialogConfig

interface ColumnDialogConfig {
  title?: string;
  searchPlaceholder?: string;
  closeLabel?: string;
  width?: number | string;
  height?: number | string;
  /** Omits drag handles and disables column reordering. Defaults to `false`. */
    disableDrag?: boolean;
  /** Color mode for the compact dialog grid and surface. Defaults to `light`. */
    theme?: ColumnDialogTheme;
  /** Hides the internal RevoGrid attribution for licensed Pro usage. Defaults to `false`. */
    hideAttribution?: boolean
}

---

ColumnDialogRowKind

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

---

ColumnDialogVisibilityState

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

---

ColumnDialogRow

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

interface ColumnDialogChangeDetail {
  hiddenColumns: ColumnProp[]
}

---

ColumnDialogReorderRequest

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

---

ColumnDialogReorderResult

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. Set columnDialog.disableDrag to use visibility-only mode without drag handles or row-order behavior. The internal grid always uses compact density; columnDialog.theme selects light or dark mode and columnDialog.hideAttribution controls its attribution.

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

Usage

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.

class ColumnDialogPlugin {
  open(): void;

  close(): void;

  toggle(): void;

  destroy(): void;
}