Row Header

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: Manages active header selections using an observable state, ensuring that header focus and selection are updated dynamically based on user interactions and grid state changes.
• 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.
• Event integration row-select: Uses RowSelectPlugin state for Excel-style selection and cell-focus handoff from interactive row headers.
• Event integration multi-range-selection: Clears MultiRangeSelectionPlugin cell ranges before interactive whole-row selection takes over.

class RowHeaderPlugin {}

---

rowHeaders

Returns the row header column configuration.

rowHeaders: ({ showHeaderFocusBtn, rowDrag, }?: { showHeaderFocusBtn?: boolean | undefined; rowDrag?: RowDrag | undefined; }) => ColumnRegular<ColumnProp, DataType<any, ColumnProp>>;

---

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

---

DragStartEventDetails

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