Row Header

Module Extensions

HTMLRevoGridElementEventMap (Extended from global)

interface HTMLRevoGridElementEventMap {
  /** Requests a whole-grid cell selection across every row/column viewport. */
      [SELECT_ALL_CELLS_EVENT]: undefined
}

Plugin API

RowHeaderPlugin

The RowHeaderPlugin is a RevoGrid plugin that enhances the grid with interactive row headers, allowing users to focus, select, and manage row-specific actions effectively. This plugin integrates various event handlers to facilitate rich interactions and maintain state consistency across the grid.

Key Features:

• Header Interaction: Listens for events such as EVENT_ROW_FOCUS, EVENT_ROW_FOCUS_SIMPLE, and ROW_MENU_EVENT to handle row selection and focus, enabling users to click on row headers to trigger specific actions or selections.
• Selection Management: Owns row-header selection independently from checkbox selection and projects selected rows as full-width multi-ranges for clipboard and range-edit operations.
• Event Handling: Integrates with a variety of grid events (EVENT_BEFORE_CELL_FOCUS, EVENT_BEFORE_FOCUS_LOST, DRAG_START_EVENT) to modify selection states, drop focus, and handle custom row click actions.
• Range and Focus Handling: Provides utility methods to apply focus and selection ranges within rows, ensuring that selections are visually and functionally consistent across the grid.

Usage:

• Integrate this plugin into a RevoGrid instance to enable row header functionalities. Add the plugin to the grid’s plugins array to activate its features.

Example

import { RowHeaderPlugin } from '@revolist/revogrid-pro'

const grid = document.createElement('revo-grid');
grid.plugins = [RowHeaderPlugin];

This plugin is ideal for applications that require advanced row header interactions, offering a robust solution for managing row-based data actions within a RevoGrid component.

Dependencies

• Event integration RowOrderPlugin: Integrates with RowOrderPlugin when row headers are configured with row drag support.
• Auto-installed MultiRangeSelectionPlugin: Uses MultiRangeSelectionPlugin for full-width row ranges, multi-range operations, and clipboard behavior.

class RowHeaderPlugin {
  /** Clears interactive row-header state before whole-column selection takes over. */
  clearFromColumnHeader();

  /** Clears private row-header state before select-all takes ownership. */
  clearFromSelectAll();

  /** Lets rendering integrations query row-header-owned selection only. */
  isRowHeaderSelected(type: DimensionRows, visibleRowIndex: number);

  /** Returns row-header-owned physical indexes without exposing mutable state. */
  getSelectedPhysicalIndexes(type: DimensionRows): ReadonlySet<number>;

  getRowOrderSelection(
    context: RowOrderSelectionContext,
  ): RowOrderSelection | null;

  destroy();
}

---

RowHeadersOptions

export type RowHeadersOptions = {
  showHeaderFocusBtn?: boolean;
  /** Shows an accessible spreadsheet-style Select All control in the corner header. */
  showSelectAllButton?: boolean;
  rowDrag?: RowDrag;
};

---

rowHeaders

Returns the row header column configuration.

rowHeaders: ({ showHeaderFocusBtn, showSelectAllButton, rowDrag, }?: RowHeadersOptions) => ColumnRegular<ColumnProp, DataType<any, ColumnProp>>;

---

selectAllCellsTemplate

Renders the optional row-header corner action without coupling it to demo markup.

selectAllCellsTemplate: (h: HyperFunc<VNode>) => VNode;

---

rowHeaderTemplate

rowHeaderTemplate: (h: HyperFunc<VNode>, params: CellTemplateProp<DataType<any, ColumnProp>, ColumnRegular<ColumnProp, DataType<any, ColumnProp>>, ColumnProp>, showHeaderFocusBtn: boolean, rowDrag: RowDrag) => VNode[];

---

RowFocusDetails

export type RowFocusDetails = {
  dataItem: CellTemplateProp;
  models: any[];
};

---

RowHeaderFocusEvent (Extended from index.ts)

export type RowHeaderFocusEvent = CellTemplateProp & {
  originalEvent?: MouseEvent | KeyboardEvent;
};

---

RowHeaderSelectionProvider

Read-only query surface for row-header-owned physical selection.

interface RowHeaderSelectionProvider {
  getSelectedPhysicalIndexes(type: DimensionRows): ReadonlySet<number>
}

---

DragStartEventDetails

export type DragStartEventDetails = {
  event: MouseEvent;
  data: DragEventsData;
};

---

ROW_HEADER_SELECTED_ATTR

ROW_HEADER_SELECTED_ATTR: string;

---

RowHeaderSelection

Owns selection state created exclusively through the interactive row header. Checkbox and programmatic row selection remain private to RowSelectPlugin.

class RowHeaderSelection {
  select(
    params: CellTemplateProp,
    originalEvent: MouseEvent | KeyboardEvent,
  ): boolean;

  selectVisibleRow(
    type: DimensionRows,
    visibleRowIndex: number,
    originalEvent: MouseEvent | KeyboardEvent,
  ): boolean;

  isSelected(type: DimensionRows, visibleRowIndex: number): boolean;

  getSelectedVisibleIndexes(type: DimensionRows): number[];

  /** Returns a snapshot so consumers cannot mutate row-header-owned state. */
  getSelectedPhysicalIndexes(type: DimensionRows): ReadonlySet<number>;

  clear(): void;

  reconcile(type: DimensionRows): void;

  getRowOrderSelection(
    context: RowOrderSelectionContext,
  ): RowOrderSelection | null;
}