# Row Header
URL: https://pro.rv-grid.com/api/row-header/
Source: src/content/docs/api/row-header.md
### `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
```typescript
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.

```ts
class RowHeaderPlugin {}
```

---

### `rowHeaders`

Returns the row header column configuration.

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

---

### `rowHeaderTemplate`

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

---

### `RowFocusDetails`

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

---

### `DragStartEventDetails`

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