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.

class RowHeaderPlugin {}

---

rowHeaders

Returns the row header column configuration.

rowHeaders: ({ showHeaderFocusBtn, rowDrag, }: { showHeaderFocusBtn?: boolean | undefined; rowDrag?: boolean | undefined; }) => ColumnRegular;

---

rowHeaderTemplate

rowHeaderTemplate: (h: HyperFunc<VNode>, params: CellTemplateProp, showHeaderFocusBtn: boolean, rowDrag: boolean) => VNode[];

---

RowFocusDetails

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

---

DragStartEventDetails

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