Column Collapse Plugin

The Column Collapse plugin allows you to make grouped columns collapsible. When a group is collapsed, only columns marked as “sealed” remain visible, while other columns are hidden.

Source code

1
import {
2
  ColumnCollapsePlugin,
3
  FilterHeaderPlugin,
4
  RowSelectPlugin,
5
  RowOddPlugin,
6
  columnTypeRenderer,
7
} from '@revolist/revogrid-pro';
8
import { defineCustomElements } from '@revolist/revogrid/loader';
9
defineCustomElements();
10

11
const grid = document.querySelector('revo-grid');
12
if (grid) {
13
  grid.colSize = 120;
14
  grid.source = [
15
    {
16
      firstName: 'John',
17
      lastName: 'Doe',
18
      age: 30,
19
      street: '123 Main St',
20
      city: 'New York',
21
      country: 'USA',
22
      email: '[email protected]',
23
      phone: '123-456-7890',
24
      mobile: '098-765-4321',
25
    },
26
    {
27
      firstName: 'Jane',
28
      lastName: 'Smith',
29
      age: 28,
30
      street: '456 Oak Ave',
31
      city: 'São Paulo',
32
      country: 'Brazil',
33
      email: '[email protected]',
34
      phone: '234-567-8901',
35
      mobile: '987-654-3210',
36
    },
37
    {
38
      firstName: 'Bob',
39
      lastName: 'Johnson',
40
      age: 35,
41
      street: '789 Pine Rd',
42
      city: 'Madrid',
43
      country: 'Spain',
44
      email: '[email protected]',
45
      phone: '345-678-9012',
46
      mobile: '876-543-2109',
47
    },
48
  ];
49

50
  grid.columns = [
51
    {
52
      name: 'Personal Information',
53
      collapsible: true,
54
      collapsed: true,
55
      columnTemplate: columnTypeRenderer,
56
      children: [
57
        {
58
          prop: 'firstName',
59
          name: 'First Name',
60
          size: 125,
61
        },
62
        {
63
          prop: 'lastName',
64
          name: 'Last Name',
65
        },
66
        {
67
          prop: 'age',
68
          name: 'Age',
69
          sealed: true,
70
          rowSelect: true,
71
          filterPlaceholder: 'Age?',
72
        },
73
      ],
74
    },
75
    {
76
      name: 'Address',
77
      collapsible: true,
78
      columnType: 'id',
79
      columnTemplate: columnTypeRenderer,
80
      children: [
81
        {
82
          prop: 'street',
83
          name: 'Street',
84
          size: 155,
85
          sealed: true,
86
          filterPlaceholder: 'Where?',
87
        },
88
        {
89
          prop: 'city',
90
          name: 'City',
91
          filterPlaceholder: 'Where?',
92
        },
93
        {
94
          prop: 'country',
95
          name: 'Country',
96
          filterPlaceholder: 'Where?',
97
        },
98
      ],
99
    },
100
    {
101
      name: 'Contact',
102
      collapsible: true,
103
      columnType: 'integer',
104
      columnTemplate: columnTypeRenderer,
105
      children: [
106
        {
107
          prop: 'email',
108
          name: 'Email',
109
          sealed: true,
110
        },
111
        {
112
          prop: 'phone',
113
          name: 'Phone',
114
        },
115
        {
116
          prop: 'mobile',
117
          name: 'Mobile',
118
        },
119
      ],
120
    },
121
  ];
122

123
  grid.plugins = [ColumnCollapsePlugin, FilterHeaderPlugin, RowSelectPlugin, RowOddPlugin];
124
  grid.theme = 'material';
125
}

1
import React from 'react';
2
import { RevoGrid } from '@revolist/react-datagrid';
3
import {
4
  ColumnCollapsePlugin,
5
  FilterHeaderPlugin,
6
  RowSelectPlugin,
7
  RowOddPlugin,
8
  columnTypeRenderer,
9
} from '@revolist/revogrid-pro';
10

11
const ColumnCollapse: React.FC = () => {
12
  const source = [
13
    {
14
      firstName: 'John',
15
      lastName: 'Doe',
16
      age: 30,
17
      street: '123 Main St',
18
      city: 'New York',
19
      country: 'USA',
20
      email: '[email protected]',
21
      phone: '123-456-7890',
22
      mobile: '098-765-4321',
23
    },
24
    {
25
      firstName: 'Jane',
26
      lastName: 'Smith',
27
      age: 28,
28
      street: '456 Oak Ave',
29
      city: 'São Paulo',
30
      country: 'Brazil',
31
      email: '[email protected]',
32
      phone: '234-567-8901',
33
      mobile: '987-654-3210',
34
    },
35
    {
36
      firstName: 'Bob',
37
      lastName: 'Johnson',
38
      age: 35,
39
      street: '789 Pine Rd',
40
      city: 'Madrid',
41
      country: 'Spain',
42
      email: '[email protected]',
43
      phone: '345-678-9012',
44
      mobile: '876-543-2109',
45
    },
46
  ];
47

48
  const columns = [
49
    {
50
      name: 'Personal Information',
51
      collapsible: true,
52
      collapsed: true,
53
      columnTemplate: columnTypeRenderer,
54
      children: [
55
        {
56
          prop: 'firstName',
57
          name: 'First Name',
58
          size: 125,
59
        },
60
        {
61
          prop: 'lastName',
62
          name: 'Last Name',
63
        },
64
        {
65
          prop: 'age',
66
          name: 'Age',
67
          sealed: true,
68
          rowSelect: true,
69
          filterPlaceholder: 'Age?',
70
        },
71
      ],
72
    },
73
    {
74
      name: 'Address',
75
      collapsible: true,
76
      columnType: 'id',
77
      columnTemplate: columnTypeRenderer,
78
      children: [
79
        {
80
          prop: 'street',
81
          name: 'Street',
82
          size: 155,
83
          sealed: true,
84
          filterPlaceholder: 'Where?',
85
        },
86
        {
87
          prop: 'city',
88
          name: 'City',
89
          filterPlaceholder: 'Where?',
90
        },
91
        {
92
          prop: 'country',
93
          name: 'Country',
94
          filterPlaceholder: 'Where?',
95
        },
96
      ],
97
    },
98
    {
99
      name: 'Contact',
100
      collapsible: true,
101
      columnType: 'integer',
102
      columnTemplate: columnTypeRenderer,
103
      children: [
104
        {
105
          prop: 'email',
106
          name: 'Email',
107
          sealed: true,
108
        },
109
        {
110
          prop: 'phone',
111
          name: 'Phone',
112
        },
113
        {
114
          prop: 'mobile',
115
          name: 'Mobile',
116
        },
117
      ],
118
    },
119
  ];
120

121
  const plugins = [ColumnCollapsePlugin, FilterHeaderPlugin, RowSelectPlugin, RowOddPlugin];
122

123
  return (
124
    <RevoGrid
125
      className="cell-border"
126
      source={source}
127
      columns={columns}
128
      plugins={plugins}
129
      resize
130
      hide-attribution
131
      style={{ minHeight: '300px' }}
132
    />
133
  );
134
};
135

136
export default ColumnCollapse;

1
<template>
2
  <RevoGrid
3
    class="cell-border"
4
    :theme="isDark ? 'darkMaterial' : 'material'"
5
    :columns="columns"
6
    :source="source"
7
    :plugins="plugins"
8
    resize
9
    hide-attribution
10
    style="min-height: 300px;"
11
  />
12
</template>
13

14
<script setup lang="ts">
15
import { ref } from 'vue';
16
import RevoGrid from '@revolist/vue3-datagrid';
17
import {
18
  ColumnCollapsePlugin,
19
  FilterHeaderPlugin,
20
  RowSelectPlugin,
21
  RowOddPlugin,
22
  columnTypeRenderer,
23
} from '@revolist/revogrid-pro';
24
import { currentThemeVue } from '../composables/useRandomData';
25

26
const { isDark } = currentThemeVue();
27

28
const source = ref([
29
  {
30
    firstName: 'John',
31
    lastName: 'Doe',
32
    age: 30,
33
    street: '123 Main St',
34
    city: 'New York',
35
    country: 'USA',
36
    email: '[email protected]',
37
    phone: '123-456-7890',
38
    mobile: '098-765-4321',
39
  },
40
  {
41
    firstName: 'Jane',
42
    lastName: 'Smith',
43
    age: 28,
44
    street: '456 Oak Ave',
45
    city: 'São Paulo',
46
    country: 'Brazil',
47
    email: '[email protected]',
48
    phone: '234-567-8901',
49
    mobile: '987-654-3210',
50
  },
51
  {
52
    firstName: 'Bob',
53
    lastName: 'Johnson',
54
    age: 35,
55
    street: '789 Pine Rd',
56
    city: 'Madrid',
57
    country: 'Spain',
58
    email: '[email protected]',
59
    phone: '345-678-9012',
60
    mobile: '876-543-2109',
61
  },
62
]);
63

64
const columns = ref([
65
  {
66
    name: 'Personal Information',
67
    collapsible: true,
68
    collapsed: true,
69
    columnTemplate: columnTypeRenderer,
70
    children: [
71
      {
72
        prop: 'firstName',
73
        name: 'First Name',
74
        size: 125,
75
      },
76
      {
77
        prop: 'lastName',
78
        name: 'Last Name',
79
      },
80
      {
81
        prop: 'age',
82
        name: 'Age',
83
        sealed: true,
84
        rowSelect: true,
85
        filterPlaceholder: 'Age?',
86
      },
87
    ],
88
  },
89
  {
90
    name: 'Address',
91
    collapsible: true,
92
    columnType: 'id',
93
    columnTemplate: columnTypeRenderer,
94
    children: [
95
      {
96
        prop: 'street',
97
        name: 'Street',
98
        size: 155,
99
        sealed: true,
100
        filterPlaceholder: 'Where?',
101
      },
102
      {
103
        prop: 'city',
104
        name: 'City',
105
        filterPlaceholder: 'Where?',
106
      },
107
      {
108
        prop: 'country',
109
        name: 'Country',
110
        filterPlaceholder: 'Where?',
111
      },
112
    ],
113
  },
114
  {
115
    name: 'Contact',
116
    collapsible: true,
117
    columnType: 'integer',
118
    columnTemplate: columnTypeRenderer,
119
    children: [
120
      {
121
        prop: 'email',
122
        name: 'Email',
123
        sealed: true,
124
      },
125
      {
126
        prop: 'phone',
127
        name: 'Phone',
128
      },
129
      {
130
        prop: 'mobile',
131
        name: 'Mobile',
132
      },
133
    ],
134
  },
135
]);
136

137
const plugins = [ColumnCollapsePlugin, FilterHeaderPlugin, RowSelectPlugin, RowOddPlugin];
138
</script>

1
import { Component } from '@angular/core';
2
import { RevoGrid } from '@revolist/angular-datagrid';
3
import {
4
  ColumnCollapsePlugin,
5
  FilterHeaderPlugin,
6
  RowSelectPlugin,
7
  RowOddPlugin,
8
  columnTypeRenderer,
9
} from '@revolist/revogrid-pro';
10

11
@Component({
12
  selector: 'app-column-collapse',
13
  standalone: true,
14
  imports: [RevoGrid],
15
  template: `
16
    <revo-grid
17
      class="cell-border"
18
      [source]="source"
19
      [columns]="columns"
20
      [plugins]="plugins"
21
      resize
22
      hide-attribution
23
      style="min-height: 300px;"
24
    ></revo-grid>
25
  `,
26
})
27
export class ColumnCollapseComponent {
28
  source = [
29
    {
30
      firstName: 'John',
31
      lastName: 'Doe',
32
      age: 30,
33
      street: '123 Main St',
34
      city: 'New York',
35
      country: 'USA',
36
      email: '[email protected]',
37
      phone: '123-456-7890',
38
      mobile: '098-765-4321',
39
    },
40
    {
41
      firstName: 'Jane',
42
      lastName: 'Smith',
43
      age: 28,
44
      street: '456 Oak Ave',
45
      city: 'São Paulo',
46
      country: 'Brazil',
47
      email: '[email protected]',
48
      phone: '234-567-8901',
49
      mobile: '987-654-3210',
50
    },
51
    {
52
      firstName: 'Bob',
53
      lastName: 'Johnson',
54
      age: 35,
55
      street: '789 Pine Rd',
56
      city: 'Madrid',
57
      country: 'Spain',
58
      email: '[email protected]',
59
      phone: '345-678-9012',
60
      mobile: '876-543-2109',
61
    },
62
  ];
63

64
  columns = [
65
    {
66
      name: 'Personal Information',
67
      collapsible: true,
68
      collapsed: true,
69
      columnTemplate: columnTypeRenderer,
70
      children: [
71
        {
72
          prop: 'firstName',
73
          name: 'First Name',
74
          size: 125,
75
        },
76
        {
77
          prop: 'lastName',
78
          name: 'Last Name',
79
        },
80
        {
81
          prop: 'age',
82
          name: 'Age',
83
          sealed: true,
84
          rowSelect: true,
85
          filterPlaceholder: 'Age?',
86
        },
87
      ],
88
    },
89
    {
90
      name: 'Address',
91
      collapsible: true,
92
      columnType: 'id',
93
      columnTemplate: columnTypeRenderer,
94
      children: [
95
        {
96
          prop: 'street',
97
          name: 'Street',
98
          size: 155,
99
          sealed: true,
100
          filterPlaceholder: 'Where?',
101
        },
102
        {
103
          prop: 'city',
104
          name: 'City',
105
          filterPlaceholder: 'Where?',
106
        },
107
        {
108
          prop: 'country',
109
          name: 'Country',
110
          filterPlaceholder: 'Where?',
111
        },
112
      ],
113
    },
114
    {
115
      name: 'Contact',
116
      collapsible: true,
117
      columnType: 'integer',
118
      columnTemplate: columnTypeRenderer,
119
      children: [
120
        {
121
          prop: 'email',
122
          name: 'Email',
123
          sealed: true,
124
        },
125
        {
126
          prop: 'phone',
127
          name: 'Phone',
128
        },
129
        {
130
          prop: 'mobile',
131
          name: 'Mobile',
132
        },
133
      ],
134
    },
135
  ];
136

137
  plugins = [ColumnCollapsePlugin, FilterHeaderPlugin, RowSelectPlugin, RowOddPlugin];
138
}

Features

Add collapse/expand functionality to column groups
Maintain “sealed” columns visible even when group is collapsed
Support for nested column groups
Customizable initial collapse state
Smooth animations and intuitive UI

Installation

The Column Collapse plugin is included in the RevoGrid Pro package. To use it, simply import and add it to your grid’s plugins:

1
import { ColumnCollapsePlugin } from '@revolist/revogrid-pro';
2

3
const grid = document.createElement('revo-grid');
4
grid.plugins = [ColumnCollapsePlugin];

Usage

To make a column group collapsible:

Add the collapsible property to the group configuration
Mark important columns as sealed to keep them visible when collapsed
Optionally set initial collapse state through additionalData

1
const grid = document.createElement('revo-grid');
2
grid.plugins = [ColumnCollapsePlugin];
3

4
// Configure columns with collapsible groups
5
grid.columns = [
6
  {
7
    id: 'personalInfo',
8
    name: 'Personal Information',
9
    collapsible: true, // Enable collapse for this group
10
    children: [
11
      {
12
        prop: 'name',
13
        name: 'Name',
14
        sealed: true // This column will stay visible when collapsed
15
      },
16
      {
17
        prop: 'email',
18
        name: 'Email'
19
      },
20
      {
21
        prop: 'phone',
22
        name: 'Phone'
23
      }
24
    ]
25
  },
26
  {
27
    id: 'addressInfo',
28
    name: 'Address',
29
    collapsible: true,
30
    children: [
31
      {
32
        prop: 'street',
33
        name: 'Street',
34
        sealed: true
35
      },
36
      {
37
        prop: 'city',
38
        name: 'City'
39
      },
40
      {
41
        prop: 'country',
42
        name: 'Country'
43
      }
44
    ]
45
  }
46
];
47

48
// Sample data
49
grid.source = [
50
  {
51
    name: 'John Doe',
52
    email: '[email protected]',
53
    phone: '123-456-7890',
54
    street: '123 Main St',
55
    city: 'New York',
56
    country: 'USA'
57
  },
58
  // ... more rows
59
];

Best Practices

Use sealed for essential columns that should always be visible
Keep group names concise to avoid UI clutter
Use nested groups sparingly to maintain clarity
Consider your users’ needs when deciding which columns to make collapsible

The Column Collapse plugin helps manage complex data grids by allowing users to focus on relevant information while keeping essential data visible at all times.