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
import { controlAttributes, createControl } from '@revolist/ui';
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 = createControl(document, 'input', { type: 'checkbox' });
    checkbox.type = 'checkbox';
    checkbox.className = controlAttributes('input', {
      type: checkbox.type,
      class: 'rv-switch-input',
    }).class;
    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);
}

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