Skip to content
RevoGrid [Pro]

Column Hide

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.

Source code
TypeScript ts 
import { defineCustomElements } from '@revolist/revogrid/loader';
import { ColumnHidePlugin, RowOddPlugin } from '@revolist/revogrid-pro';
import { currentTheme } from '../composables/useRandomData';

defineCustomElements();

export function load(parentSelector: string) {
  const grid = document.createElement('revo-grid');
  const { isDark } = currentTheme();

  // Sample data
  grid.source = [
    { name: 'John', age: 30 },
    { name: 'Jane', age: 25 },
    { name: 'Bob', age: 35 },
  ];

  // Define columns
  grid.columns = [
    { prop: 'name', name: 'Name' },
    { prop: 'age', name: 'Age' },
  ];

  // Set grid properties
  grid.className = 'cell-border';
  grid.theme = isDark() ? 'darkMaterial' : 'material';
  grid.style.minHeight = '200px';
  grid.style.width = '100%';
  grid.hideAttribution = true;
  grid.plugins = [ColumnHidePlugin, RowOddPlugin];

  // Track hidden columns
  let hiddenColumns: string[] = [];

  // Create toggles for column visibility
  const controls = document.createElement('div');
  controls.className = 'flex gap-4 items-center';

  ['name', 'age'].forEach(prop => {
    const label = document.createElement('label');
    label.className = 'rv-switch-label';

    const checkbox = document.createElement('input');
    checkbox.type = 'checkbox';
    checkbox.className = 'rv-switch-input';
    checkbox.checked = true;

    checkbox.addEventListener('change', () => {
      const index = hiddenColumns.indexOf(prop);
      if (index === -1) {
        hiddenColumns.push(prop);
      } else {
        hiddenColumns.splice(index, 1);
      }

      // Update the grid's direct hideColumns property
      grid.hideColumns = hiddenColumns;
    });

    const track = document.createElement('span');
    track.className = 'rv-switch-track';
    const thumb = document.createElement('span');
    thumb.className = 'rv-switch-thumb';
    track.appendChild(thumb);

    label.appendChild(checkbox);
    label.appendChild(track);
    label.appendChild(document.createTextNode(prop === 'name' ? 'Name' : 'Age'));
    controls.appendChild(label);
  });

  // Create container
  const container = document.createElement('div');
  container.className = 'flex flex-col gap-3';
  container.appendChild(controls);
  container.appendChild(grid);
  document.querySelector(parentSelector)?.appendChild(container);
}
Vue vue 
<template>
  <div class="flex flex-col gap-3">
    <div class="flex gap-4 items-center">
      <label class="rv-switch-label">
        <input
          class="rv-switch-input"
          type="checkbox"
          :checked="!hiddenColumns.includes('index')"
          @change="toggleColumn('index')"
        />
        <span class="rv-switch-track"><span class="rv-switch-thumb" /></span>
        Index
      </label>
      <label class="rv-switch-label">
        <input
          class="rv-switch-input"
          type="checkbox"
          :checked="!hiddenColumns.includes('name')"
          @change="toggleColumn('name')"
        />
        <span class="rv-switch-track"><span class="rv-switch-thumb" /></span>
        Name
      </label>
      <label class="rv-switch-label">
        <input
          class="rv-switch-input"
          type="checkbox"
          :checked="!hiddenColumns.includes('age')"
          @change="toggleColumn('age')"
        />
        <span class="rv-switch-track"><span class="rv-switch-thumb" /></span>
        Age
      </label>
    </div>
    <RevoGrid
      class="grow h-full cell-border"
      :theme="isDark ? 'darkMaterial' : 'material'"
      :source="source"
      :columns="columns"
      :plugins="plugins"
      :hide-columns="hiddenColumns"
      hide-attribution
      style="min-height: 200px; width: 100%"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import RevoGrid, { type ColumnRegular } from '@revolist/vue3-datagrid';
import { ColumnHidePlugin, RowOddPlugin } from '@revolist/revogrid-pro';
import { currentThemeVue } from '../composables/useRandomData';

const { isDark } = currentThemeVue();

const source = [
  { index: 1, name: 'John', age: 30 },
  { index: 2, name: 'Jane', age: 25 },
  { index: 3, name: 'Bob', age: 35 },
];

const columns: ColumnRegular[] = [
  { prop: 'index', name: 'Index', pin: 'colPinStart' },
  { prop: 'name', name: 'Name', pin: 'colPinStart' },
  { prop: 'age', name: 'Age' },
];
const plugins = [ColumnHidePlugin, RowOddPlugin];

const hiddenColumns = ref<string[]>(['index']);

const toggleColumn = (prop: string) => {
  const isHidden = hiddenColumns.value.includes(prop);
  hiddenColumns.value = isHidden
    ? hiddenColumns.value.filter(column => column !== prop)
    : [...hiddenColumns.value, prop];
};
</script>
React tsx 
import React, { useState } from 'react';
import { RevoGrid } from '@revolist/react-datagrid';
import { ColumnHidePlugin, RowOddPlugin } from '@revolist/revogrid-pro';

// Define columns
const columns = [
  { prop: 'name', name: 'Name' },
  { prop: 'age', name: 'Age' },
];

const plugins = [ColumnHidePlugin, RowOddPlugin];
const ColumnHideExample: React.FC = () => {
  // Sample data
  const [source] = useState([
    { name: 'John', age: 30 },
    { name: 'Jane', age: 25 },
    { name: 'Bob', age: 35 },
  ]);


  // Track hidden columns
  const [hiddenColumns, setHiddenColumns] = useState<string[]>(['age']);

  // Toggle column visibility
  const toggleColumn = (prop: string) => {
    setHiddenColumns(prev => {
      const index = prev.indexOf(prop);
      if (index === -1) {
        return [...prev, prop];
      } else {
        const newHidden = [...prev];
        newHidden.splice(index, 1);
        return newHidden;
      }
    });
  };

  return (
    <div className="flex flex-col gap-3">
      <div className="flex gap-4 items-center">
        <label className="rv-switch-label">
          <input
            className="rv-switch-input"
            type="checkbox"
            checked={!hiddenColumns.includes('name')}
            onChange={() => toggleColumn('name')}
          />
          <span className="rv-switch-track"><span className="rv-switch-thumb" /></span>
          Name
        </label>
        <label className="rv-switch-label">
          <input
            className="rv-switch-input"
            type="checkbox"
            checked={!hiddenColumns.includes('age')}
            onChange={() => toggleColumn('age')}
          />
          <span className="rv-switch-track"><span className="rv-switch-thumb" /></span>
          Age
        </label>
      </div>
      <RevoGrid
        source={source}
        columns={columns}
        plugins={plugins}
        hideColumns={hiddenColumns}
        hideAttribution
      />

      <h4>Initialization via React `hideColumns` prop</h4>
      <RevoGrid
        source={source}
        columns={columns}
        plugins={plugins}
        hideColumns={['age']}
        hideAttribution
      />
    </div>
  );
};

export default ColumnHideExample;
Angular ts 
import { Component, NO_ERRORS_SCHEMA } from '@angular/core';
import { RevoGrid } from '@revolist/angular-datagrid';
import { ColumnHidePlugin, RowOddPlugin } from '@revolist/revogrid-pro';

@Component({
  selector: 'column-hide-grid',
  standalone: true,
  imports: [RevoGrid],
  // Allows Angular demos to bind RevoGrid plugin props that are not wrapper inputs.
  schemas: [NO_ERRORS_SCHEMA],
  template: `
    <div class="flex flex-col gap-3">
      <div class="flex gap-4 items-center">
        <label class="rv-switch-label">
          <input
            class="rv-switch-input"
            type="checkbox"
            [checked]="!hiddenColumns.includes('name')"
            (change)="toggleColumn('name')"
          />
          <span class="rv-switch-track"><span class="rv-switch-thumb"></span></span>
          Name
        </label>
        <label class="rv-switch-label">
          <input
            class="rv-switch-input"
            type="checkbox"
            [checked]="!hiddenColumns.includes('age')"
            (change)="toggleColumn('age')"
          />
          <span class="rv-switch-track"><span class="rv-switch-thumb"></span></span>
          Age
        </label>
      </div>
      <revo-grid
        class="grow h-full cell-border"
        [theme]="theme"
        [source]="source"
        [columns]="columns"
        [plugins]="plugins"
        [hideColumns]="hiddenColumns"
        [hideAttribution]="true"
      ></revo-grid>
    </div>
  `
})
export class ColumnHideGridComponent {
  // Sample data
  source = [
    { name: 'John', age: 30 },
    { name: 'Jane', age: 25 },
    { name: 'Bob', age: 35 },
  ];

  // Define columns
  columns = [
    { prop: 'name', name: 'Name' },
    { prop: 'age', name: 'Age' },
  ];
  
  plugins = [ColumnHidePlugin, RowOddPlugin];
  theme = 'material';

  // Track hidden columns
  hiddenColumns: string[] = ['age'];

  // Toggle column visibility
  toggleColumn(prop: string) {
    const index = this.hiddenColumns.indexOf(prop);
    if (index === -1) {
      this.hiddenColumns = [...this.hiddenColumns, prop];
    } else {
      this.hiddenColumns = this.hiddenColumns.filter(column => column !== prop);
    }
  }
}

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

Section titled “Using the hide-columns attribute”

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

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

Using the hideColumns property

Section titled “Using the hideColumns property”

Framework wrappers typically bind properties instead of attributes:

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

You can also update it at runtime:

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

Using additionalData.hiddenColumns

Section titled “Using additionalData.hiddenColumns”

You can also hide columns programmatically using the additionalData property:

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

Section titled “Events”

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

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

Section titled “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