Column Hide

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-column attribute or additionalData.hiddenColumns. It allows users to hide specific columns by providing their indices in the attribute or through the additionalData property.

Features:

• Enables column hiding through the hide-column attribute
• Supports hiding columns through additionalData.hiddenColumns
• Automatically updates when the attribute or additionalData changes
• Preserves column state when columns are updated
• Supports multiple framework attribute formats:
  • Vue/Svelte: hide-column="1,2,3" or :hide-column="[1,2,3]"
  • React: hideColumn="1,2,3"
  • Angular: [hideColumn]="[1,2,3]"

Usage:

<!-- Vue/Svelte -->
<revo-grid hide-column="1,2,3"></revo-grid>
<!-- or with dynamic binding -->
<revo-grid :hide-column="[1,2,3]"></revo-grid>

<!-- React -->
<RevoGrid hideColumn="1,2,3" />

<!-- Angular -->
<revo-grid [hideColumn]="[1,2,3]"></revo-grid>

<!-- 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[];