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.

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:

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

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

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 set initial collapse state through additionalData

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'
      }
    ]
  }
];

// 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

1. Use sealed for essential columns that should always be visible
2. Keep group names concise to avoid UI clutter
3. Use nested groups sparingly to maintain clarity
4. 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.