Module Extensions
HTMLRevoGridElementEventMap
(Extended from global
)
ts
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
ts
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]"
- Vue/Svelte:
Usage:
html
<!-- 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>
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 the grid's
additionalData.hiddenColumns
property 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.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.
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 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[];