Column Group Panel

Module Extensions

HTMLRevoGridElement (Extended from global)

interface HTMLRevoGridElement {
  /** Configuration for the column group panel. */
      columnGroupPanel?: ColumnGroupPanelConfig;
  /** Kebab-case alias for framework bindings. */
      'column-group-panel'?: ColumnGroupPanelConfig
}

---

HTMLRevoGridElementEventMap (Extended from global)

interface HTMLRevoGridElementEventMap {
  columngroupingchange: ColumnGroupPanelChangeDetail
}

---

AdditionalData (Extended from @revolist/revogrid)

interface AdditionalData {
  /** @deprecated Use `grid.columnGroupPanel` instead. */
      columnGroupPanel?: ColumnGroupPanelConfig;
  /** @deprecated Use `grid.columnGroupPanel` instead. */
      columnGroupingPanel?: ColumnGroupPanelConfig
}

Plugin API

ColumnGroupPanelChangeDetail

interface ColumnGroupPanelChangeDetail {
  props: ColumnProp[];
  grouping: GroupingOptions
}

---

ColumnGroupPanelConfig

interface ColumnGroupPanelConfig {
  /**
     * Text to display in the group panel when no columns are grouped.
     * @default 'Drag columns here to group by row.'
     */
    emptyPanelText?: string;
  /** Show the grouping position before each key. @default true */
    showOrder?: boolean
}

---

ColumnGroupPanelPlugin

Adds a header panel for creating, removing, and reordering row groupings.

Example:

const grid = document.createElement('revo-grid');
grid.plugins = [ColumnGroupPanelPlugin];
grid.columnGroupPanel = { emptyPanelText: 'Drop columns here' };

Dependencies

• Config integration core-grouping: Writes grid grouping props through the core grouping API.
• Event integration columndragstart, columndragmousemove, beforecolumndragend, columndragend: Shares the column-move gesture lifecycle for header-to-panel grouping.

class ColumnGroupPanelPlugin {
  addGrouping(columnProp: ColumnProp);

  removeGrouping(indexOrProp: number | ColumnProp);

  reorderGrouping(draggedProp: ColumnProp, targetIndex: number);

  setGroupings(props: ColumnProp[]);

  getGroupings(): ColumnProp[];

  destroy();
}

---

ColumnGroupPanelDragController

class ColumnGroupPanelDragController {
  destroy();
}

---

normalizeColumnGroupings

export function normalizeColumnGroupings(props?: ColumnProp[]): ColumnProp[];

---

moveColumnGrouping

export function moveColumnGrouping(
  groupings: ColumnProp[],
  draggedProp: ColumnProp,
  rawTargetIndex: number,
): ColumnProp[];

---

resolveColumnGroupingDropIndex

export function resolveColumnGroupingDropIndex(
  currentIndex: number,
  measuredTargetIndex: number,
): number;

---

withColumnGroupings

export function withColumnGroupings(
  grouping: GroupingOptions | undefined,
  props: ColumnProp[],
): GroupingOptions;

---

ColumnGroupPanelView

class ColumnGroupPanelView {
  setConfig(config: ColumnGroupPanelConfig);

  render(groupings: ColumnProp[]);

  showDropPreview(index: number, label: string);

  clearDropPreview();

  getDropIndex(clientX: number): number;

  getPanelDropIndex(clientX: number, clientY: number): number | null;

  destroy();
}