ColumnVirtualizationPlugin

Column Virtualization Plugin for tbw-grid

Provides horizontal column virtualization for grids with many columns (30+). Only renders visible columns plus overscan, significantly improving rendering performance for wide grids.

Installation

import { ColumnVirtualizationPlugin } from '@toolbox-web/grid/plugins/column-virtualization';

Configuration Options

Option	Type	Default	Description
autoEnable	boolean	true	Auto-enable when column count exceeds threshold
threshold	number	30	Column count threshold for auto-enable
overscan	number	3	Extra columns to render beyond visible

Requirements

• Grid must use fitMode: 'fixed'
• Columns must have explicit widths
• Grid must have fixed height

Programmatic API

Method	Signature	Description
isEnabled	() => boolean	Check if virtualization is active
setEnabled	(enabled: boolean) => void	Enable/disable virtualization
getVisibleRange	() => { start, end }	Get visible column range

Example

Wide Grid with Column Virtualization

import '@toolbox-web/grid';
import { ColumnVirtualizationPlugin } from '@toolbox-web/grid/plugins/column-virtualization';

grid.gridConfig = {
  columns: generateManyColumns(100), // 100 columns
  fitMode: 'fixed',                  // Required
  plugins: [
    new ColumnVirtualizationPlugin({
      threshold: 30,  // Enable when >30 columns
      overscan: 3,    // Render 3 extra columns each side
    }),
  ],
};

See Also

• ColumnVirtualizationConfig for configuration options

Extends BaseGridPlugin

Inherited methods like attach(), detach(), afterRender(), etc. are documented in the base class.

Methods

getIsVirtualized()

Check if column virtualization is currently active.

getIsVirtualized(): boolean

---

getVisibleColumnRange()

Get the current visible column range.

getVisibleColumnRange(): object

---

scrollToColumn()

Scroll the grid to bring a specific column into view.

scrollToColumn(columnIndex: number): void

Parameters

Name	Type	Description
columnIndex	number	Index of the column to scroll to

---

getColumnOffset()

Get the left offset for a specific column.

getColumnOffset(columnIndex: number): number

Parameters

Name	Type	Description
columnIndex	number	Index of the column

---

getTotalWidth()

Get the total width of all columns.

getTotalWidth(): number

---