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

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

```ts
interface HTMLRevoGridElementEventMap {
  /**
       * Event triggered when hidden columns are updated
       */
      hiddencolumnsupdated: { hiddenColumns: Set<ColumnProp> }
}
```

---

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

```ts
interface HTMLRevoGridElement {
  /**
       * Columns to hide by prop.
       */
      hideColumns?: ColumnHideConfig;
  /**
       * Kebab-case alias for framework bindings.
       */
      'hide-columns'?: ColumnHideConfig;
  /**
       * Columns to hide by prop.
       * @deprecated Use `grid.hideColumns` instead.
       */
      columnHide?: ColumnHideConfig;
  /**
       * Kebab-case alias for the legacy `columnHide` property.
       * @deprecated Use `grid.hideColumns` or `hide-columns` instead.
       */
      'column-hide'?: ColumnHideConfig
}
```

---

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

Additional data property for column hide configuration

```ts
interface AdditionalData {
  /**
       * Additional data property for column hide configuration
       * @deprecated Use `grid.hideColumns` instead.
       * @example
       * grid.additionalData = {
       *   // Hide columns with indices 1, 2, and 3
       *   hiddenColumns: [1, 2, 3],
       * }
       */
      hiddenColumns?: HiddenColumnsConfig
}
```

## Plugin API

### `ColumnHidePlugin`

The `ColumnHidePlugin` is a plugin for the RevoGrid framework that enables column hiding functionality
based on the `hide-columns` attribute, `hideColumns` property, or
`additionalData.hiddenColumns`. It allows users to hide specific columns
by providing their column `prop` values.

**Features**:
- Enables column hiding through the `hide-columns` attribute
- Supports runtime updates through the `hideColumns` property
- Supports legacy runtime updates through the `columnHide` property
- Supports hiding columns through `additionalData.hiddenColumns`
- Automatically updates when the attribute, property, or additionalData changes
- Preserves column state when columns are updated
- Supports multiple framework attribute formats:
  - Web component: `hide-columns="name,age"`
  - React: `hideColumns={['name', 'age']}`
  - Angular/Vue/Svelte: bind `hideColumns` as an array

**Usage**:
```html
<!-- Web component attribute -->
<revo-grid hide-columns="name,age"></revo-grid>

<!-- React -->
<RevoGrid hideColumns={['name', 'age']} />

<!-- Property update -->
grid.hideColumns = ['name', 'age'];

<!-- Legacy property update -->
grid.columnHide = ['name', 'age'];

<!-- Using additionalData -->
<revo-grid></revo-grid>
<script>
  const grid = document.querySelector('revo-grid');
  grid.additionalData = {
    hiddenColumns: [1, 2, 3]
  };
</script>
```

#### Dependencies

- **Event integration** `COLUMN_UPDATED_EVENT`: Integrates with column update events to preserve hidden-column state.
- **Event integration** `COLUMN_DRAG_END_EVENT`: Keeps hidden-column trim order aligned after visible columns are moved.
- **Config integration** `grid.hideColumns`, `additionalData.hiddenColumns`: Reads direct hidden-column configuration from grid.hideColumns or legacy additionalData.hiddenColumns.

```ts
class ColumnHidePlugin {}
```

---

### `HiddenColumnsConfig`

The `HiddenColumnsConfig` type
specifies which columns should be hidden in the grid.

**Usage**:
- Import the `HiddenColumnsConfig` type to define hidden columns in RevoGrid components.
- Assign the desired hidden columns configuration to `grid.hideColumns` to control which columns
  are hidden.

**Example:**
```typescript
:
 * ```typescript
 * import { ColumnHidePlugin } from '@revolist/revogrid-pro';
 *
 * const grid = document.createElement('revo-grid');
 * grid.plugins = [ColumnHidePlugin];
 *
 * grid.hideColumns = [1, 2, 3]; // Hide columns with indices 1, 2, and 3
 * ```
 *
 * This configuration type allows developers to programmatically control which columns
 * are hidden in the grid, enhancing the flexibility of the grid's display options.
```

```ts
/**
 * The `HiddenColumnsConfig` type
 * specifies which columns should be hidden in the grid.
 *
 * **Usage**:
 * - Import the `HiddenColumnsConfig` type to define hidden columns in RevoGrid components.
 * - Assign the desired hidden columns configuration to `grid.hideColumns` to control which columns
 *   are hidden.
 *
 * @example:
 * ```typescript
 * import { ColumnHidePlugin } from '@revolist/revogrid-pro';
 *
 * const grid = document.createElement('revo-grid');
 * grid.plugins = [ColumnHidePlugin];
 *
 * grid.hideColumns = [1, 2, 3]; // Hide columns with indices 1, 2, and 3
 * ```
 *
 * This configuration type allows developers to programmatically control which columns
 * are hidden in the grid, enhancing the flexibility of the grid's display options.
 */

export type HiddenColumnsConfig = ColumnProp[];
```

---

### `ColumnHideConfig`

```ts
export type ColumnHideConfig = HiddenColumnsConfig | string;
```
