Module Extensions

HTMLRevoGridElementEventMap (Extended from global)

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

---

AdditionalData (Extended from @revolist/revogrid)

Additional data property for column hide configuration

interface AdditionalData {
  /**
       * Additional data property for column hide configuration
       * @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 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'];

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

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 the grid's additionalData.hiddenColumns property to control which columns are hidden.

Example:

:
 * ```typescript
 * import { ColumnHidePlugin } from '@revolist/revogrid-pro';
 *
 * const grid = document.createElement('revo-grid');
 * grid.plugins = [ColumnHidePlugin];
 *
 * grid.additionalData = {
 *   hiddenColumns: [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 the grid's `additionalData.hiddenColumns`
 *   property to control which columns are hidden.
 *
 * @example:
 * ```typescript
 * import { ColumnHidePlugin } from '@revolist/revogrid-pro';
 *
 * const grid =  document.createElement('revo-grid');
 * grid.plugins = [ColumnHidePlugin];
 *
 * grid.additionalData = {
 *   hiddenColumns: [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[];