Skip to content
RevoGrid [Pro]

Column Collapse

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. If no sealed column exists, the group falls back to a single placeholder column that keeps the expand affordance visible.

Source code
TypeScript ts 
import {
  ColumnCollapsePlugin,
  FilterHeaderPlugin,
  RowSelectPlugin,
  RowOddPlugin,
  columnTypeRenderer,
} from '@revolist/revogrid-pro';
import { defineCustomElements } from '@revolist/revogrid/loader';
defineCustomElements();

export function load(parentSelector: string) {
  const parent = document.querySelector(parentSelector);
  if (!parent) return;

  const grid = document.createElement('revo-grid');
  grid.colSize = 120;
  grid.source = [
    {
      firstName: 'John',
      lastName: 'Doe',
      age: 30,
      street: '123 Main St',
      city: 'New York',
      country: 'USA',
      email: '[email protected]',
      phone: '123-456-7890',
      mobile: '098-765-4321',
    },
    {
      firstName: 'Jane',
      lastName: 'Smith',
      age: 28,
      street: '456 Oak Ave',
      city: 'São Paulo',
      country: 'Brazil',
      email: '[email protected]',
      phone: '234-567-8901',
      mobile: '987-654-3210',
    },
    {
      firstName: 'Bob',
      lastName: 'Johnson',
      age: 35,
      street: '789 Pine Rd',
      city: 'Madrid',
      country: 'Spain',
      email: '[email protected]',
      phone: '345-678-9012',
      mobile: '876-543-2109',
    },
  ];

  grid.columns = [
    {
      name: 'Personal Information',
      collapsible: true,
      collapsed: true,
      columnTemplate: columnTypeRenderer,
      children: [
        {
          prop: 'firstName',
          name: 'First Name',
          size: 125,
        },
        {
          prop: 'lastName',
          name: 'Last Name',
        },
        {
          prop: 'age',
          name: 'Age',
          sealed: true,
          rowSelect: true,
          filterPlaceholder: 'Age?',
        },
      ],
    },
    {
      name: 'Address',
      collapsible: true,
      columnType: 'id',
      columnTemplate: columnTypeRenderer,
      children: [
        {
          prop: 'street',
          name: 'Street',
          size: 155,
          sealed: true,
          filterPlaceholder: 'Where?',
        },
        {
          prop: 'city',
          name: 'City',
          filterPlaceholder: 'Where?',
        },
        {
          prop: 'country',
          name: 'Country',
          filterPlaceholder: 'Where?',
        },
      ],
    },
    {
      name: 'Contact',
      collapsible: true,
      columnType: 'integer',
      columnTemplate: columnTypeRenderer,
      children: [
        {
          prop: 'email',
          name: 'Email',
          sealed: true,
        },
        {
          prop: 'phone',
          name: 'Phone',
        },
        {
          prop: 'mobile',
          name: 'Mobile',
        },
      ],
    },
  ];

  grid.plugins = [ColumnCollapsePlugin, FilterHeaderPlugin, RowSelectPlugin, RowOddPlugin];
  grid.theme = 'material';
  grid.hideAttribution = true;
  parent.appendChild(grid);
}
React tsx 
import React from 'react';
import { RevoGrid } from '@revolist/react-datagrid';
import {
  ColumnCollapsePlugin,
  FilterHeaderPlugin,
  RowSelectPlugin,
  RowOddPlugin,
  columnTypeRenderer,
} from '@revolist/revogrid-pro';

const ColumnCollapse: React.FC = () => {
  const source = [
    {
      firstName: 'John',
      lastName: 'Doe',
      age: 30,
      street: '123 Main St',
      city: 'New York',
      country: 'USA',
      email: '[email protected]',
      phone: '123-456-7890',
      mobile: '098-765-4321',
    },
    {
      firstName: 'Jane',
      lastName: 'Smith',
      age: 28,
      street: '456 Oak Ave',
      city: 'São Paulo',
      country: 'Brazil',
      email: '[email protected]',
      phone: '234-567-8901',
      mobile: '987-654-3210',
    },
    {
      firstName: 'Bob',
      lastName: 'Johnson',
      age: 35,
      street: '789 Pine Rd',
      city: 'Madrid',
      country: 'Spain',
      email: '[email protected]',
      phone: '345-678-9012',
      mobile: '876-543-2109',
    },
  ];

  const columns = [
    {
      name: 'Personal Information',
      collapsible: true,
      collapsed: true,
      columnTemplate: columnTypeRenderer,
      children: [
        {
          prop: 'firstName',
          name: 'First Name',
          size: 125,
        },
        {
          prop: 'lastName',
          name: 'Last Name',
        },
        {
          prop: 'age',
          name: 'Age',
          sealed: true,
          rowSelect: true,
          filterPlaceholder: 'Age?',
        },
      ],
    },
    {
      name: 'Address',
      collapsible: true,
      columnType: 'id',
      columnTemplate: columnTypeRenderer,
      children: [
        {
          prop: 'street',
          name: 'Street',
          size: 155,
          sealed: true,
          filterPlaceholder: 'Where?',
        },
        {
          prop: 'city',
          name: 'City',
          filterPlaceholder: 'Where?',
        },
        {
          prop: 'country',
          name: 'Country',
          filterPlaceholder: 'Where?',
        },
      ],
    },
    {
      name: 'Contact',
      collapsible: true,
      columnType: 'integer',
      columnTemplate: columnTypeRenderer,
      children: [
        {
          prop: 'email',
          name: 'Email',
          sealed: true,
        },
        {
          prop: 'phone',
          name: 'Phone',
        },
        {
          prop: 'mobile',
          name: 'Mobile',
        },
      ],
    },
  ];

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

  return (
    <RevoGrid
      className="grow h-full cell-border"
      source={source}
      columns={columns}
      plugins={plugins}
      resize
      hide-attribution
      style={{ minHeight: '300px' }}
    />
  );
};

export default ColumnCollapse;
Vue vue 
<template>
  <RevoGrid
    class="grow h-full cell-border"
    :theme="isDark ? 'darkMaterial' : 'material'"
    :columns="columns"
    :source="source"
    :plugins="plugins"
    hide-attribution
    style="min-height: 300px;"
  />
</template>

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

const { isDark } = currentThemeVue();

const source = ref([
  {
    firstName: 'John',
    lastName: 'Doe',
    age: 30,
    street: '123 Main St',
    city: 'New York',
    country: 'USA',
    email: '[email protected]',
    phone: '123-456-7890',
    mobile: '098-765-4321',
  },
  {
    firstName: 'Jane',
    lastName: 'Smith',
    age: 28,
    street: '456 Oak Ave',
    city: 'São Paulo',
    country: 'Brazil',
    email: '[email protected]',
    phone: '234-567-8901',
    mobile: '987-654-3210',
  },
  {
    firstName: 'Bob',
    lastName: 'Johnson',
    age: 35,
    street: '789 Pine Rd',
    city: 'Madrid',
    country: 'Spain',
    email: '[email protected]',
    phone: '345-678-9012',
    mobile: '876-543-2109',
  },
]);

const columns = ref<ColumnData>([
  {
    name: 'Personal Information',
    collapsible: true,
    collapsed: true,
    columnTemplate: columnTypeRenderer,
    children: [
      {
        prop: 'firstName',
        name: 'First Name',
        size: 155,
    pin: 'colPinStart',
      },
      {
        prop: 'lastName',
        name: 'Last Name',
    pin: 'colPinStart',
      },
      {
        prop: 'age',
        name: 'Age',
        sealed: true,
        rowSelect: true,
        filterPlaceholder: 'Age?',
    pin: 'colPinStart',
      },
    ],
  },
  {
    name: 'Address',
    collapsible: true,
    columnType: 'id',
    columnTemplate: columnTypeRenderer,
    children: [
      {
        prop: 'street',
        name: 'Street',
        size: 185,
        sealed: true,
        filterPlaceholder: 'Where?',
      },
      {
        prop: 'city',
        name: 'City',
        filterPlaceholder: 'Where?',
      },
      {
        prop: 'country',
        name: 'Country',
        filterPlaceholder: 'Where?',
      },
    ],
  },
  {
    name: 'Contact',
    collapsible: true,
    columnType: 'integer',
    columnTemplate: columnTypeRenderer,
    children: [
      {
        prop: 'email',
        name: 'Email',
        sealed: true,
      },
      {
        prop: 'phone',
        name: 'Phone',
      },
      {
        prop: 'mobile',
        name: 'Mobile',
      },
    ],
  },
]);

const plugins = [ColumnCollapsePlugin, FilterHeaderPlugin, RowSelectPlugin, RowOddPlugin];
</script>
Angular ts 
import { Component } from '@angular/core';
import { RevoGrid } from '@revolist/angular-datagrid';
import {
  ColumnCollapsePlugin,
  FilterHeaderPlugin,
  RowSelectPlugin,
  RowOddPlugin,
  columnTypeRenderer,
} from '@revolist/revogrid-pro';
import { currentTheme } from '../composables/useRandomData';

const { isDark } = currentTheme();

@Component({
  selector: 'column-collapse-grid',
  standalone: true,
  imports: [RevoGrid],
  template: `
    <revo-grid
      class="grow h-full cell-border"
      [theme]="theme"
      [source]="source"
      [columns]="columns"
      [plugins]="plugins"
      resize
      hide-attribution
      style="min-height: 300px;"
    ></revo-grid>
  `,
})
export class ColumnCollapseGridComponent {
  readonly theme = isDark() ? 'darkMaterial' : 'material';
  source = [
    {
      firstName: 'John',
      lastName: 'Doe',
      age: 30,
      street: '123 Main St',
      city: 'New York',
      country: 'USA',
      email: '[email protected]',
      phone: '123-456-7890',
      mobile: '098-765-4321',
    },
    {
      firstName: 'Jane',
      lastName: 'Smith',
      age: 28,
      street: '456 Oak Ave',
      city: 'São Paulo',
      country: 'Brazil',
      email: '[email protected]',
      phone: '234-567-8901',
      mobile: '987-654-3210',
    },
    {
      firstName: 'Bob',
      lastName: 'Johnson',
      age: 35,
      street: '789 Pine Rd',
      city: 'Madrid',
      country: 'Spain',
      email: '[email protected]',
      phone: '345-678-9012',
      mobile: '876-543-2109',
    },
  ];

  columns = [
    {
      name: 'Personal Information',
      collapsible: true,
      collapsed: true,
      columnTemplate: columnTypeRenderer,
      children: [
        {
          prop: 'firstName',
          name: 'First Name',
          size: 125,
        },
        {
          prop: 'lastName',
          name: 'Last Name',
        },
        {
          prop: 'age',
          name: 'Age',
          sealed: true,
          rowSelect: true,
          filterPlaceholder: 'Age?',
        },
      ],
    },
    {
      name: 'Address',
      collapsible: true,
      columnType: 'id',
      columnTemplate: columnTypeRenderer,
      children: [
        {
          prop: 'street',
          name: 'Street',
          size: 155,
          sealed: true,
          filterPlaceholder: 'Where?',
        },
        {
          prop: 'city',
          name: 'City',
          filterPlaceholder: 'Where?',
        },
        {
          prop: 'country',
          name: 'Country',
          filterPlaceholder: 'Where?',
        },
      ],
    },
    {
      name: 'Contact',
      collapsible: true,
      columnType: 'integer',
      columnTemplate: columnTypeRenderer,
      children: [
        {
          prop: 'email',
          name: 'Email',
          sealed: true,
        },
        {
          prop: 'phone',
          name: 'Phone',
        },
        {
          prop: 'mobile',
          name: 'Mobile',
        },
      ],
    },
  ];

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

Features

Section titled “Features”
  • Add collapse/expand functionality to column groups
  • Maintain “sealed” columns visible even when group is collapsed
  • Fall back to a single placeholder column when no sealed child exists
  • Support for nested column groups
  • Customizable initial collapse state
  • Smooth animations and intuitive UI

Installation

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

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


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

Usage

Section titled “Usage”

To make a column group collapsible:

  1. Add the collapsible property to the group configuration
  2. Mark important columns as sealed to keep them visible when collapsed
  3. Optionally provide placeholder on the group to customize the fallback placeholder header or cell
const grid = document.createElement('revo-grid');
grid.plugins = [ColumnCollapsePlugin];


// Configure columns with collapsible groups
grid.columns = [
  {
    id: 'personalInfo',
    name: 'Personal Information',
    collapsible: true, // Enable collapse for this group
    children: [
      {
        prop: 'name',
        name: 'Name',
        sealed: true // This column will stay visible when collapsed
      },
      {
        prop: 'email',
        name: 'Email'
      },
      {
        prop: 'phone',
        name: 'Phone'
      }
    ]
  },
  {
    id: 'addressInfo',
    name: 'Address',
    collapsible: true,
    children: [
      {
        prop: 'street',
        name: 'Street',
        sealed: true
      },
      {
        prop: 'city',
        name: 'City'
      },
      {
        prop: 'country',
        name: 'Country'
      }
    ]
  }
];


// Optional placeholder customization when no sealed column exists
grid.columns.push({
  name: 'Contact',
  collapsible: true,
  collapsed: true,
  placeholder: {
    header: 'Contact hidden',
    cellTemplate: (h) => h('span', undefined, 'Expand to view'),
  },
  children: [
    { prop: 'altEmail', name: 'Alt Email' },
    { prop: 'mobile', name: 'Mobile' },
  ],
});


// Sample data
grid.source = [
  {
    name: 'John Doe',
    email: '[email protected]',
    phone: '123-456-7890',
    street: '123 Main St',
    city: 'New York',
    country: 'USA'
  },
  // ... more rows
];

Best Practices

Section titled “Best Practices”
  1. Use sealed for essential columns that should always be visible
  2. Keep group names concise to avoid UI clutter
  3. Use placeholder when you want custom fallback content for groups without sealed children
  4. Use nested groups sparingly to maintain clarity
  5. 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.