Skip to content

Module Extensions

AdditionalData (Extended from @revolist/revogrid)

Add autoSizeColumnConfig property to AdditionalData interface

ts
interface AdditionalData {
  autoSizeColumnConfig?: AutoSizeColumnConfig
}

ColumnRegular (Extended from @revolist/revogrid)

Add autoSize property to ColumnRegular interface

ts
interface ColumnRegular {
  autoSize?: boolean
}

Plugin API

AutoSizeColumnConfig

ts
export type AutoSizeColumnConfig =  {
  // ui behavior mode
  mode?: ColumnAutoSizeMode;
  /**
   * autoSize for all columns
   * if allColumnes true all columns treated as autoSize, worse for performance
   * false by default
   */
  allColumns?: boolean;
  /**
   * assumption per characted size
   * by default defined as 8, can be changed in this config
   */
  letterBlockSize?: number;
  /** make size calculation exact
   * by default it based on assumption each character takes some space defined in letterBlockSize */
  preciseSize?: boolean;
};

ColumnAutoSizeMode

ts
enum ColumnAutoSizeMode {
  // increases column width on header click according the largest text value
    headerClickAutosize = 'headerClickAutoSize',
  // increases column width on data set and text edit, decreases performance
    autoSizeOnTextOverlap = 'autoSizeOnTextOverlap',
  // increases and decreases column width based on all items sizes, worst for performance
    autoSizeAll = 'autoSizeAll'
}

AutoSizeColumnPlugin

The AutoSizeColumnPlugin is a plugin for the RevoGrid framework that provides automatic column resizing functionality. It allows users to resize columns based on the content of the cells, providing a flexible and user-friendly interface for data presentation.

Features:

  • Automatically resizes columns based on the content of the cells.
  • Supports different modes of automatic resizing:
    • Header click autosize: Resizes columns when the header is clicked.
    • Text overlap autosize: Resizes columns when text is edited.
    • All columns autosize: Resizes all columns based on the content of the cells.

Usage:

  • Add the AutoSizeColumnPlugin to the grid's plugins array.
  • Configure the plugin using the additionalData property with the autoSizeColumnConfig key.

Example

typescript
import { AutoSizeColumnPlugin } from '@revolist/revogrid-pro';

const grid = document.createElement('revo-grid');
grid.plugins = [AutoSizeColumnPlugin]; // Add the plugin to the grid
grid.additionalData = {
  autoSizeColumnConfig: {
    mode: ColumnAutoSizeMode.autoSizeOnTextOverlap,
  },
};
ts
class AutoSizeColumnPlugin {
  async setSource(source: DataType[]): Promise<void>;

  getLength(len?: any): number;

  afteredit(e: EditEvent);

  afterEditAll(e: EditEvent);

  getColumnSize(index: number, type: DimensionCols): number;

  columnSet(columns: Record<DimensionCols, ColumnRegular[]>);

  clearPromise();

  isRangeEdit(e: EditEvent): e is BeforeRangeSaveDataDetails;

  initiatePresizeElement(): HTMLElement;

  destroy();
}