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;
  /**
       * Custom placeholder configuration used when a collapsed group has no sealed columns.
       */
      placeholder?: string | ColumnTemplateFunc | ColumnCollapsePlaceholder;
  /**
       * Render collapsed top-level groups through their carrier leaf header when
       * every marked sibling is collapsed.
       */
      compactCollapsedHeader?: boolean
}

---

ColumnGrouping (Extended from @revolist/revogrid)

interface ColumnGrouping {
  /**
       * Opt this group into compact single-row collapsed header projection.
       */
      compactCollapsedHeader?: 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

ColumnCollapsePlaceholder

interface ColumnCollapsePlaceholder {
  header?: string | ColumnTemplateFunc;
  value?: (schema: CellTemplateProp, state: CollapsedGroupState) => unknown;
  cellTemplate?: NonNullable<CellTemplateProp['column']['cellTemplate']>;
  cellProperties?: PropertiesFunc;
  /**
     * Preserve the carrier column's filter configuration and filter-header UI.
     * Disabled by default because a generic placeholder may not represent the
     * carrier field's value.
     */
    preserveFilter?: boolean;
  /**
     * Preserve the carrier column's sortable state and active sort indicator.
     * Disabled by default because a generic placeholder may not represent the
     * carrier field's value.
     */
    preserveSorting?: boolean;
  /**
     * Optional filter proxy rendered on the group header while the group is
     * expanded. Its prop must identify the same aggregate represented by the
     * collapsed carrier.
     */
    filterColumn?: ColumnRegular
}

---

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 {
  /** Returns whether a collapsible authored column group is currently collapsed. */
  isGroupCollapsed(group: Group, type: DimensionCols): boolean;

  /**
     * Applies an explicit collapsed state to an authored column group.
     * No-op when the group cannot be collapsed or already has the requested state.
     */
  setGroupCollapsed(group: Group, type: DimensionCols, collapsed: boolean): void;

  /** Toggles an authored collapsible column group. */
  toggleGroupCollapsed(group: Group, type: DimensionCols): void;

  destroy();
}

---

CollapsedGroupMode

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

---

CollapsedGroupState

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