Column Stretch

Module Extensions

AdditionalData (Extended from @revolist/revogrid)

Additional data property for column stretch configuration

interface AdditionalData {
  /**
       *
       * Additional data property for column stretch configuration
       * @example
       * grid.additionalData = {
       *   // Stretch all columns to utilize available space
       *   stretch: 'all',
       *   // Stretch the first column to utilize available space
       *   stretch: 1,
       *   // Stretch the last column to utilize available space
       *   stretch: 'last',
       * }
       */
      stretch: StretchConfig
}

Plugin API

ColumnStretchPlugin

The ColumnStretchPlugin is a RevoGrid plugin designed to dynamically adjust column widths based on available space within the grid. It ensures that extra space is efficiently utilized by increasing the width of specified columns, enhancing the presentation of data without manual resizing.

Key Features:

• Automatically stretches the width of columns to fill any remaining space in the grid.
• Supports configurations for stretching all columns, a specific column by index, or only the last column.
• Listens to beforecolumnapplied and additionaldatachanged events to adjust column sizes based on changes in grid dimensions or configuration updates.
• Utilizes ResizeObserver and a debounced applyStretch function to efficiently manage size recalculations during viewport size changes.

Usage:

• Integrate the plugin into a RevoGrid instance by adding it to the grid’s plugin array.
• Configure the stretching behavior through the stretch property in the grid’s additionalData object, specifying modes like ‘none’, ‘all’, or a specific index.

Example

import { ColumnStretchPlugin } from './column-stretch';

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

grid.additionalData = {
  stretch: 'last', // Stretch the last column to fit available space
};

By using this plugin, developers can enhance the adaptability and visual layout of their RevoGrid, ensuring optimal use of grid space and improving data display without manual intervention.

class ColumnStretchPlugin {}

---

StretchConfig

The StretchConfig type specifies how extra space in the grid should be utilized by adjusting the width of columns.

Usage:

• Import the StretchConfig type to define stretching behavior in RevoGrid components.
• Assign the desired stretching configuration to the grid’s additionalData.stretch property to control how columns adjust to available space.

Example:

:
 * ```typescript
 * import { ColumnStretchPlugin } from '@revolist/revogrid-pro';
 *
 * const grid = document.createElement('revo-grid');
 * grid.plugins = [ColumnStretchPlugin];
 *
 * grid.additionalData = {
 *   stretch: 'all', // Stretch all columns to utilize available space
 * };
 * ```
 *
 * This configuration type allows developers to customize how columns adapt to
 * changes in grid size, ensuring optimal data presentation and grid layout.

column-stretch/stretch.types.ts

/**
 * The `StretchConfig` type
 * specifies how extra space in the grid should be utilized by adjusting the width
 * of columns.
 *
 * **Usage**:
 * - Import the `StretchConfig` type to define stretching behavior in RevoGrid components.
 * - Assign the desired stretching configuration to the grid's `additionalData.stretch`
 *   property to control how columns adjust to available space.
 *
 * @example:
 * ```typescript
 * import { ColumnStretchPlugin } from '@revolist/revogrid-pro';
 *
 * const grid =  document.createElement('revo-grid');
 * grid.plugins = [ColumnStretchPlugin];
 *
 * grid.additionalData = {
 *   stretch: 'all', // Stretch all columns to utilize available space
 * };
 * ```
 *
 * This configuration type allows developers to customize how columns adapt to
 * changes in grid size, ensuring optimal data presentation and grid layout.
 */

export type StretchConfig = 'none' | 'last' | 'all' | number;