# Row Odd
URL: https://pro.rv-grid.com/api/row-odd/
Source: src/content/docs/api/row-odd.md
## Module Extensions

### `HTMLRevoGridElement` (Extended from `@revolist/revogrid`)

```ts
interface HTMLRevoGridElement {
  /**
       * Direct row striping configuration.
       */
      rowOdd?: RowOddInput
}
```

---

### `AdditionalData` (Extended from `@revolist/revogrid`)

```ts
interface AdditionalData {
  /**
       * Row striping configuration.
       * @deprecated Use `grid.rowOdd` instead.
       */
      rowOdd?: RowOddInput
}
```

## Plugin API

### `RowOddPlugin`

The `RowOddPlugin` is a RevoGrid plugin designed to enhance the visual styling of grid rows by
applying configurable row striping attributes during row rendering.

Functionality:
- **Backward-compatible odd rows**: The default behavior still marks rows `1, 3, 5...` with `[odd]`.
- **Configurable striping**: Supports direct `grid.rowOdd` and legacy `additionalData.rowOdd` config.
- **Stable CSS hooks**: Adds `odd`, `even`, `row-stripe`, `data-row-stripe-index`, and
  `data-row-source-index` attributes to striped rows.

**Usage**:
- Add `RowOddPlugin` to the grid plugins array.
- Optionally set `grid.rowOdd = { mode: 'custom', interval: 3, offset: 0 }`.

### Example
```typescript
import { RowOddPlugin } from '@revolist/revogrid-pro';

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

This plugin is useful for alternating row styles, grouped visual rhythm, and domain-specific
row highlighting without changing source data.

#### Dependencies

- **Config integration** `additionalData.rowOdd`: Reads legacy row striping configuration from additionalData.rowOdd.

```ts
class RowOddPlugin {}
```

---

### `RowOddMode`

```ts
export type RowOddMode = 'odd' | 'even' | 'custom';
```

---

### `RowOddContext`

```ts
interface RowOddContext {
  model: T;
  visualIndex: number;
  sourceIndex: number;
  stripeIndex: number;
  mode: RowOddMode
}
```

---

### `RowOddConfig`

```ts
interface RowOddConfig {
  /**
     * Enables or disables row striping.
     * @default true
     */
    enabled?: boolean;
  /**
     * Built-in striping mode. Use `custom` with `interval` and `offset`.
     * @default 'odd'
     */
    mode?: RowOddMode;
  /**
     * Stripe every N rows when `mode` is `custom`.
     * @default 2
     */
    interval?: number;
  /**
     * First matching modulo offset when `mode` is `custom`.
     * @default 1
     */
    offset?: number;
  /**
     * Optional class name appended to striped row VNodes.
     */
    className?: string;
  /**
     * Declarative row matcher. All provided fields must equal the row model value.
     */
    match?: Partial<T>;
  /**
     * Optional row predicate. Returning `true` stripes the row, returning `false`
     * keeps it unstriped.
     */
    shouldStripe?: (context: RowOddContext<T>) => boolean
}
```

---

### `RowOddInput`

```ts
export type RowOddInput<T extends DataType = DataType> = boolean | RowOddConfig<T>;
```
