Row Odd

Module Extensions

HTMLRevoGridElement (Extended from @revolist/revogrid)

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

---

AdditionalData (Extended from @revolist/revogrid)

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

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.

class RowOddPlugin {}

---

RowOddMode

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

---

RowOddContext

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

---

RowOddConfig

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

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