Column Autosize

Module Extensions

AdditionalData (Extended from @revolist/revogrid)

Add autoSizeColumnConfig property to AdditionalData interface

interface AdditionalData {
  autoSizeColumnConfig?: AutoSizeColumnConfig
}

---

ColumnRegular (Extended from @revolist/revogrid)

Add autoSize property to ColumnRegular interface

interface ColumnRegular {
  autoSize?: boolean
}

Plugin API

AutoSizeColumnConfig

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

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

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,
  },
};

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();
}