Column Hide

Module Extensions

HTMLRevoGridElementEventMap (Extended from global)

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

---

HTMLRevoGridElement (Extended from global)

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

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:

<!-- 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.
• Config integration grid.hideColumns, additionalData.hiddenColumns: Reads direct hidden-column configuration from grid.hideColumns or legacy additionalData.hiddenColumns.

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
 * 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.

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

export type ColumnHideConfig = HiddenColumnsConfig | string;