# ColumnVirtualizationPlugin

> _Since v0.1.1_

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

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

## Requirements

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

## [Configuration Options](/grid/plugins/column-virtualization/interfaces/columnvirtualizationconfig.md)

| Option | Type | Description |
| ------ | ---- | ----------- |
| `autoEnable?` | <code>boolean</code> | Auto-enable when column count exceeds threshold (default: true) |
| `threshold?` | <code>number</code> | Column count threshold for auto-enabling (default: 30) |
| `overscan?` | <code>number</code> | Extra columns to render on each side for smooth scrolling (default: 3) |

## Example

### Wide Grid with Column Virtualization

```ts
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`](/grid/plugins/column-virtualization/interfaces/columnvirtualizationconfig.md) for configuration options

> **Extends** [BaseGridPlugin](/docs/grid-api-plugin-development-classes-basegridplugin--docs)
>
> Inherited methods like `attach()`, `detach()`, `afterRender()`, etc. are documented in the base class.

## Methods

### getIsVirtualized()

Check if column virtualization is currently active.

```ts
getIsVirtualized(): boolean
```

***

### getVisibleColumnRange()

Get the current visible column range.

```ts
getVisibleColumnRange(): object
```

***

### scrollToColumn()

Scroll the grid to bring a specific column into view.

```ts
scrollToColumn(columnIndex: number): void
```

#### Parameters

| Name | Type | Description |
| ---- | ---- | ----------- |
| `columnIndex` | <code>number</code> | Index of the column to scroll to |

***

### getColumnOffset()

Get the left offset for a specific column.

```ts
getColumnOffset(columnIndex: number): number
```

#### Parameters

| Name | Type | Description |
| ---- | ---- | ----------- |
| `columnIndex` | <code>number</code> | Index of the column |

***

### getTotalWidth()

Get the total width of all columns.

```ts
getTotalWidth(): number
```

***