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

1
import { defineCustomElements } from '@revolist/revogrid/loader';
2
import { ColumnHidePlugin, RowOddPlugin } from '@revolist/revogrid-pro';
3
import { currentTheme } from '../composables/useRandomData';
4

5
defineCustomElements();
6

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

11
  // Sample data
12
  grid.source = [
13
    { name: 'John', age: 30 },
14
    { name: 'Jane', age: 25 },
15
    { name: 'Bob', age: 35 },
16
  ];
17

18
  // Define columns
19
  grid.columns = [
20
    { prop: 'name', name: 'Name' },
21
    { prop: 'age', name: 'Age' },
22
  ];
23

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

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

35
  // Create checkboxes for column visibility
36
  const controls = document.createElement('div');
37
  controls.className = 'controls';
38

39
  const checkboxGroup = document.createElement('div');
40
  checkboxGroup.className = 'checkbox-group';
41

42
  ['name', 'age'].forEach(prop => {
43
    const label = document.createElement('label');
44
    const checkbox = document.createElement('input');
45
    checkbox.type = 'checkbox';
46
    checkbox.checked = true;
47

48
    checkbox.addEventListener('change', () => {
49
      const index = hiddenColumns.indexOf(prop);
50
      if (index === -1) {
51
        hiddenColumns.push(prop);
52
      } else {
53
        hiddenColumns.splice(index, 1);
54
      }
55

56
      // Update the grid's additionalData
57
      grid.additionalData = { hiddenColumns };
58
    });
59

60
    label.appendChild(checkbox);
61
    label.appendChild(document.createTextNode(prop === 'name' ? 'Name' : 'Age'));
62
    checkboxGroup.appendChild(label);
63
  });
64

65
  controls.appendChild(checkboxGroup);
66

67
  // Create container
68
  const container = document.createElement('div');
69
  container.className = 'column-hide-example';
70
  container.appendChild(controls);
71
  container.appendChild(grid);
72
  document.querySelector(parentSelector)?.appendChild(container);
73
}

1
<template>
2
  <div class="column-hide-example">
3
    <div class="controls">
4
      <div class="checkbox-group">
5
        <label>
6
          <input
7
            type="checkbox"
8
            :checked="!hiddenColumns.includes('name')"
9
            @change="toggleColumn('name')"
10
          />
11
          Name
12
        </label>
13
        <label>
14
          <input
15
            type="checkbox"
16
            :checked="!hiddenColumns.includes('age')"
17
            @change="toggleColumn('age')"
18
          />
19
          Age
20
        </label>
21
      </div>
22
    </div>
23
    <RevoGrid
24
      class="cell-border"
25
      :theme="isDark ? 'darkMaterial' : 'material'"
26
      :source="source"
27
      :columns="columns"
28
      :plugins="plugins"
29
      :additionalData="{ hiddenColumns }"
30
      hide-attribution
31
      style="min-height: 200px; width: 100%"
32
    />
33
  </div>
34
</template>
35

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

42
const { isDark } = currentThemeVue();
43

44
// Sample data
45
const source = [
46
  { name: 'John', age: 30 },
47
  { name: 'Jane', age: 25 },
48
  { name: 'Bob', age: 35 },
49
];
50

51
// Define columns
52
const columns = [
53
  { prop: 'name', name: 'Name' },
54
  { prop: 'age', name: 'Age' },
55
];
56
const plugins = [ColumnHidePlugin, RowOddPlugin];
57

58
// Track hidden columns
59
const hiddenColumns = ref<string[]>([]);
60

61
// Toggle column visibility
62
const toggleColumn = (prop: string) => {
63
  const index = hiddenColumns.value.indexOf(prop);
64
  if (index === -1) {
65
    hiddenColumns.value.push(prop);
66
  } else {
67
    hiddenColumns.value.splice(index, 1);
68
  }
69
};
70
</script>
71

72
<style scoped>
73
.column-hide-example {
74
  display: flex;
75
  flex-direction: column;
76
  gap: 20px;
77
}
78

79
.controls {
80
  padding: 10px;
81
  background-color: #f5f5f5;
82
  border-radius: 4px;
83
}
84

85
.checkbox-group {
86
  display: flex;
87
  gap: 20px;
88
}
89

90
.checkbox-group label {
91
  display: flex;
92
  align-items: center;
93
  gap: 5px;
94
}
95
</style>

1
import React, { useState } from 'react';
2
import { RevoGrid } from '@revolist/react-datagrid';
3
import { ColumnHidePlugin, RowOddPlugin } from '@revolist/revogrid-pro';
4

5
// Define columns
6
const columns = [
7
  { prop: 'name', name: 'Name' },
8
  { prop: 'age', name: 'Age' },
9
];
10

11
const plugins = [ColumnHidePlugin, RowOddPlugin];
12
const ColumnHideExample: React.FC = () => {
13
  // Sample data
14
  const [source] = useState([
15
    { name: 'John', age: 30 },
16
    { name: 'Jane', age: 25 },
17
    { name: 'Bob', age: 35 },
18
  ]);
19

20

21
  // Track hidden columns
22
  const [hiddenColumns, setHiddenColumns] = useState<string[]>([]);
23

24
  // Toggle column visibility
25
  const toggleColumn = (prop: string) => {
26
    setHiddenColumns(prev => {
27
      const index = prev.indexOf(prop);
28
      if (index === -1) {
29
        return [...prev, prop];
30
      } else {
31
        const newHidden = [...prev];
32
        newHidden.splice(index, 1);
33
        return newHidden;
34
      }
35
    });
36
  };
37

38
  return (
39
    <div className="column-hide-example">
40
      <div className="controls">
41
        <div className="checkbox-group">
42
          <label>
43
            <input
44
              type="checkbox"
45
              checked={!hiddenColumns.includes('name')}
46
              onChange={() => toggleColumn('name')}
47
            />
48
            Name
49
          </label>
50
          <label>
51
            <input
52
              type="checkbox"
53
              checked={!hiddenColumns.includes('age')}
54
              onChange={() => toggleColumn('age')}
55
            />
56
            Age
57
          </label>
58
        </div>
59
      </div>
60
      <RevoGrid
61
        source={source}
62
        columns={columns}
63
        plugins={plugins}
64
        additionalData={{ hiddenColumns }}
65
        hideAttribution
66
      />
67
    </div>
68
  );
69
};
70

71
export default ColumnHideExample;

1
import { Component } from '@angular/core';
2
import { RevoGrid } from '@revolist/angular-datagrid';
3
import { ColumnHidePlugin, RowOddPlugin } from '@revolist/revogrid-pro';
4

5
@Component({
6
  selector: 'app-column-hide',
7
  standalone: true,
8
  imports: [RevoGrid],
9
  template: `
10
    <div class="column-hide-example">
11
      <div class="controls">
12
        <div class="checkbox-group">
13
          <label>
14
            <input
15
              type="checkbox"
16
              [checked]="!hiddenColumns.includes('name')"
17
              (change)="toggleColumn('name')"
18
            />
19
            Name
20
          </label>
21
          <label>
22
            <input
23
              type="checkbox"
24
              [checked]="!hiddenColumns.includes('age')"
25
              (change)="toggleColumn('age')"
26
            />
27
            Age
28
          </label>
29
        </div>
30
      </div>
31
      <revo-grid
32
        class="cell-border"
33
        [theme]="theme"
34
        [source]="source"
35
        [columns]="columns"
36
        [plugins]="plugins"
37
        [additionalData]="{ hiddenColumns }"
38
        [hideAttribution]="true"
39
      ></revo-grid>
40
    </div>
41
  `
42
})
43
export class ColumnHideComponent {
44
  // Sample data
45
  source = [
46
    { name: 'John', age: 30 },
47
    { name: 'Jane', age: 25 },
48
    { name: 'Bob', age: 35 },
49
  ];
50

51
  // Define columns
52
  columns = [
53
    { prop: 'name', name: 'Name' },
54
    { prop: 'age', name: 'Age' },
55
  ];
56

57
  plugins = [ColumnHidePlugin, RowOddPlugin];
58
  theme = 'material';
59

60
  // Track hidden columns
61
  hiddenColumns: string[] = [];
62

63
  // Toggle column visibility
64
  toggleColumn(prop: string) {
65
    const index = this.hiddenColumns.indexOf(prop);
66
    if (index === -1) {
67
      this.hiddenColumns.push(prop);
68
    } else {
69
      this.hiddenColumns.splice(index, 1);
70
    }
71
  }
72
}

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 two main approaches for hiding columns:

Using the `hide-column` Attribute

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

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

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

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

Using `additionalData`

You can also hide columns programmatically using the additionalData property:

1
const grid = document.querySelector('revo-grid');
2
grid.additionalData = {
3
  hiddenColumns: [1, 2, 3] // Hide columns with indices 1, 2, and 3
4
};

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:

1
grid.addEventListener('hiddencolumnsupdated', (event) => {
2
  const { hiddenColumns } = event.detail;
3
  console.log('Hidden columns updated:', hiddenColumns);
4
});

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

Implementation Details

The ColumnHidePlugin works by:

Tracking which columns should be hidden in a Set
Updating the column visibility when the configuration changes
Preserving the hidden state when columns are updated
Supporting both attribute-based and programmatic configuration

Column Hide

Using the hide-column Attribute

Using additionalData

Events

Implementation Details

Using the `hide-column` Attribute

Using `additionalData`