# Column Collapse
URL: https://pro.rv-grid.com/api/column-collapse/
Source: src/content/docs/api/column-collapse.md
## Module Extensions

### `Group` (Extended from `@revolist/revogrid`)

Add collapsible property to Group interface

```ts
interface Group {
  /**
       * Whether the group is collapsible
       */
      collapsible?: boolean;
  /**
       * Whether the group is collapsed
       */
      collapsed?: boolean;
  /**
       * Custom placeholder configuration used when a collapsed group has no sealed columns.
       */
      placeholder?: string | ColumnTemplateFunc | ColumnCollapsePlaceholder
}
```

---

### `ColumnRegular` (Extended from `@revolist/revogrid`)

Add sealed property to ColumnRegular interface

```ts
interface ColumnRegular {
  /**
       * Whether the column is sealed, if true the column will not be trimmed/collapsed
       */
      sealed?: boolean
}
```

---

### `HTMLRevoGridElementEventMap` (Extended from `global`)

Add column collapse event to HTMLRevoGridElementEventMap

```ts
interface HTMLRevoGridElementEventMap {
  /**
       * Column collapse event
       */
      [COLUMN_COLLAPSE_EVENT]: { group: Group };
  /**
       * Column expand event
       */
      [COLUMN_EXPAND_EVENT]: { group: Group }
}
```

## Plugin API

### `ColumnCollapsePlaceholder`

```ts
interface ColumnCollapsePlaceholder {
  header?: string | ColumnTemplateFunc;
  value?: (schema: CellTemplateProp, state: CollapsedGroupState) => unknown;
  cellTemplate?: NonNullable<CellTemplateProp['column']['cellTemplate']>;
  cellProperties?: PropertiesFunc
}
```

---

### `ColumnCollapsePlugin`

The `ColumnCollapsePlugin` is a plugin for the RevoGrid framework that enables collapsible columns
with content trimming functionality. It allows users to collapse and expand columns, reducing the
visual clutter and improving the overall user experience when dealing with large datasets.

 **Features**:
- Enables collapsible columns with content trimming
- Provides a visual indicator (▼) in the header to collapse and expand columns

**Usage**:
- Add the `ColumnCollapsePlugin` to the grid's plugins array.
- Add the `collapsible` property to the column configuration to enable collapsible columns.
- Add the `collapsed` property to the column configuration to set the initial collapsed state.
- Add the `children` property to the column configuration to define the columns to be collapsed.
- Add the `sealed` property to the column configuration to prevent the column from being trimmed.

### Example
```typescript
import { ColumnCollapsePlugin } from '@revolist/revogrid-pro';

const grid = document.createElement('revo-grid');
grid.columns = [
  {
    collapsible: true,
    collapsed: true,
    children: [
      {
        prop: 'age',
        sealed: true,
      },
    ],
  },
];
grid.plugins = [ColumnCollapsePlugin];
```

```ts
class ColumnCollapsePlugin {
  destroy();
}
```

---

### `CollapsedGroupMode`

```ts
export type CollapsedGroupMode = 'sealed' | 'placeholder';
```

---

### `CollapsedGroupState`

```ts
interface CollapsedGroupState {
  key: string;
  mode: CollapsedGroupMode;
  group: Group;
  indexes: number[];
  visibleIndexes: number[];
  carrierIndex?: number;
  hiddenCount: number
}
```
