# Column Hide
URL: https://pro.rv-grid.com/guides/columns/column-hide/
Source: src/content/docs/guides/columns/column-hide.mdx
Description: Implementing Column Hiding
RevoGrid provides the ability to hide specific columns in your grid, allowing you to focus on the most relevant data for your users.
This feature is particularly useful when working with large datasets where not all columns need to be visible at once.

`Column hiding` is a feature that allows you to hide specific columns in your grid, making them invisible to users. This is useful for:

- Focusing on specific data points
- Reducing visual clutter
- Creating different views of the same dataset
- Implementing column visibility toggles

The `ColumnHidePlugin` supports three ways to hide columns:

## Using the `hide-columns` attribute

You can specify which columns to hide using the `hide-columns` attribute on your RevoGrid element:

```html
<revo-grid hide-columns="name,age"></revo-grid>
```

## Using the `hideColumns` property

Framework wrappers typically bind properties instead of attributes:

```tsx
<RevoGrid hideColumns={['name', 'age']} />
```

You can also update it at runtime:

```javascript
grid.hideColumns = ['name', 'age'];
```

## Using `additionalData.hiddenColumns`

You can also hide columns programmatically using the `additionalData` property:

```javascript
const grid = document.querySelector('revo-grid');
grid.additionalData = {
  hiddenColumns: ['name', 'age']
};
```

This approach is particularly useful when you need to dynamically update which columns are hidden based on user interactions or application state.

## Events

The `ColumnHidePlugin` emits a `hiddencolumnsupdated` event whenever the hidden columns are updated:

```javascript
grid.addEventListener('hiddencolumnsupdated', (event) => {
  const { hiddenColumns } = event.detail;
  console.log('Hidden columns updated:', hiddenColumns);
});
```

This event can be used to synchronize the UI with the current state of hidden columns.

## Implementation Details

The `ColumnHidePlugin` works by:

1. Tracking which columns should be hidden in a `Set`
2. Updating the column visibility when the configuration changes
3. Preserving the hidden state when columns are updated
4. Supporting attribute, property, and programmatic configuration
