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
import {
  AdvanceFilterPlugin,
  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: 160,
        },
        {
          prop: 'lastName',
          name: 'Last Name',
          size: 160,
        },
        {
          prop: 'age',
          name: 'Age',
          size: 260,
          sealed: true,
          rowSelect: true,
          filterPlaceholder: 'Age?',
        },
      ],
    },
    {
      name: 'Address',
      collapsible: true,
      columnType: 'id',
      columnTemplate: columnTypeRenderer,
      children: [
        {
          prop: 'street',
          name: 'Street',
          size: 180,
          sealed: true,
          filterPlaceholder: 'Where?',
        },
        {
          prop: 'city',
          name: 'City',
          size: 160,
          filterPlaceholder: 'Where?',
        },
        {
          prop: 'country',
          name: 'Country',
          size: 160,
          filterPlaceholder: 'Where?',
        },
      ],
    },
    {
      name: 'Contact',
      collapsible: true,
      collapsed: true,
      columnType: 'integer',
      columnTemplate: columnTypeRenderer,
      children: [
        {
          prop: 'email',
          name: 'Email',
          size: 240,
          sealed: true,
        },
        {
          prop: 'phone',
          name: 'Phone',
          size: 180,
        },
        {
          prop: 'mobile',
          name: 'Mobile',
          size: 180,
        },
      ],
    },
  ];


  grid.plugins = [
    ColumnCollapsePlugin,
    AdvanceFilterPlugin,
    FilterHeaderPlugin,
    RowSelectPlugin,
    RowOddPlugin,
  ];
  grid.theme = 'material';
  grid.hideAttribution = true;
  parent.appendChild(grid);
}

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.

Expand or collapse all column groups

Section titled “Expand or collapse all column groups”

Use the plugin instance to update all authored collapsible column groups in one operation:

const plugin = (await grid.getPlugins()).find(
  (plugin) => plugin instanceof ColumnCollapsePlugin,
);
plugin?.setAllGroupsCollapsed(true, 'rgCol');
plugin?.setAllGroupsCollapsed(false, 'rgCol');

Omit the dimension argument to include pinned column groups. The method preserves sealed columns, placeholder carriers and independent filter trim layers. Repeating the same state is a no-op. Collapse/expand events are emitted for changed groups after the complete state has been applied. Individual group commands retain their existing behavior.