Column Collapse

Module Extensions

Group (Extended from @revolist/revogrid)

Add collapsible property to Group interface

interface Group {
  /**
       * Whether the group is collapsible
       */
      collapsible?: boolean;
  /**
       * Whether the group is collapsed
       */
      collapsed?: boolean
}

---

ColumnRegular (Extended from @revolist/revogrid)

Add sealed property to ColumnRegular interface

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

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

Plugin API

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

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

class ColumnCollapsePlugin {}