# Column Collapse
URL: https://pro.rv-grid.com/guides/columns/column-collapse/
Source: src/content/docs/guides/columns/column-collapse.mdx
Description: Make grouped columns collapsible with the ability to show/hide child columns
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.

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

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

```javascript
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 provide `placeholder` on the group to customize the fallback placeholder header or cell

```javascript
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: 'john@example.com',
    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 `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.
