Row Autosize

Module Extensions

HTMLRevoGridElementEventMap (Extended from global)

interface HTMLRevoGridElementEventMap {
  /**
       * Event triggered when the row auto size is updated
       *
       * @example
       * ```typescript
       * grid.addEventListener(ROW_AUTO_SIZE_CONFIG_UPDATE_EVENT, (e) => {
       *   console.log(e);
       * });
       */
      [ROW_AUTO_SIZE_CONFIG_UPDATE_EVENT]: RowAutoSizeConfig
}

---

AdditionalData (Extended from @revolist/revogrid)

interface AdditionalData {
  /**
       * Additional data property for row auto size
       *
       * @example
       * ```typescript
       * const grid = document.createElement('revo-grid');
       * grid.additionalData = {
       *   rowAutoSize: {
       *     minHeight: 24,
       *     maxHeight: 200,
       *   },
       * };
       * ```
       */
      rowAutoSize?: RowAutoSizeConfig
}

Plugin API

RowAutoSizePlugin

The RowAutoSizePlugin enables dynamic row height calculation based on cell content. It efficiently manages row heights by calculating them before rendering and updating the grid’s dimension store accordingly.

Key Features:

• Pre-calculates row heights based on cell content
• Supports dynamic content updates
• Efficient caching mechanism for calculated heights
• Configurable minimum and maximum row heights
• Support for both sync and async height calculations

Usage Example:

import { RowAutoSizePlugin } from './row-autosize';

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

grid.additionalData = {
  rowAutoSize: {
    minHeight: 24,
    maxHeight: 200,
    // Optional: Custom height calculator
    calculateHeight: (rowData, columns) => {
      // Custom logic to calculate row height
      return 50;
    }
  }
};

class RowAutoSizePlugin {
  destroy(): void;
}

---

RowAutoSizeConfig

export type RowAutoSizeConfig =  {
  /**
   * Minimum row height in pixels
   * @default 24
   */
  minHeight?: number;

  /**
   * Maximum row height in pixels
   * @default 200
   */
  maxHeight?: number;

  /**
   * Custom height calculator function
   * If provided, will be used instead of the default calculator
   */
  calculateHeight?: (
    rowData: DataType,
    columns: ColumnRegular[],
  ) => number | Promise<number>;

  /**
   * Whether to use precise height calculation (slower but more accurate)
   * @default false
   */
  preciseSize?: boolean;
};