Column Virtualization Plugin

The Column Virtualization plugin improves performance for grids with many columns.

Installation

import '@toolbox-web/grid/features/column-virtualization';

Basic Usage

TypeScript

import { queryGrid } from '@toolbox-web/grid';
import '@toolbox-web/grid/features/column-virtualization';

const grid = queryGrid('tbw-grid');
grid.gridConfig = {
  columns: generateManyColumns(100), // Your column generator
  fitMode: 'fixed', // Required for column virtualization
  features: { columnVirtualization: true },
};
grid.rows = data;

React

import '@toolbox-web/grid-react/features/column-virtualization';
import { DataGrid } from '@toolbox-web/grid-react';
import type { GridConfig } from '@toolbox-web/grid-react';

const gridConfig: GridConfig = {
  columns: generateManyColumns(100),
  fitMode: 'fixed',
  features: { columnVirtualization: true },
};

function WideGrid({ data }) {
  return <DataGrid rows={data} gridConfig={gridConfig} style={{ height: '400px' }} />;
}

Alternative: feature prop

You can instead pass columns={[ … ]} and columnVirtualization={{ … }} as individual props on <DataGrid>. That form is idiomatic React, but gridConfig keeps the configuration identical across every framework.

Vue

<script setup>
import '@toolbox-web/grid-vue/features/column-virtualization';
import { TbwGrid } from '@toolbox-web/grid-vue';
import type { GridConfig } from '@toolbox-web/grid-vue';

const data = [{ col0: 'Row 1', col1: 'Value 1' }, { col0: 'Row 2', col1: 'Value 2' }];

const gridConfig: GridConfig = {
  columns: Array.from({ length: 100 }, (_, i) => ({
    field: `col${i}`,
    header: `Column ${i + 1}`,
    width: 120,
  })),
  fitMode: 'fixed',
  features: { columnVirtualization: true },
};
</script>

<template>
  <TbwGrid :rows="data" :grid-config="gridConfig" style="height: 400px" />
</template>

Alternative: prop + light-dom columns

You can instead bind :column-virtualization="{ … }" and declare columns with <TbwGridColumn> children. That form is idiomatic Vue, but gridConfig keeps the configuration identical across every framework.

Angular

Define everything inside gridConfig.features, exactly like the other frameworks. The side-effect import registers the feature so the adapter can bridge it.

import '@toolbox-web/grid-angular/features/column-virtualization';
import { Component } from '@angular/core';
import { Grid } from '@toolbox-web/grid-angular';
import type { ColumnConfig, GridConfig } from '@toolbox-web/grid-angular';

@Component({
  selector: 'app-wide-grid',
  imports: [Grid],
  template: `
    <tbw-grid
      [rows]="rows"
      [gridConfig]="gridConfig"
      style="height: 400px; display: block;">
    </tbw-grid>
  `,
})
export class WideGridComponent {
  rows = [...];

  gridConfig: GridConfig = {
    columns: this.generateManyColumns(100),
    fitMode: 'fixed',
    features: { columnVirtualization: true },
  };

  generateManyColumns(count: number): ColumnConfig[] {
    return Array.from({ length: count }, (_, i) => ({
      field: `col${i}`,
      header: `Column ${i + 1}`,
      width: 120,
    }));
  }
}

Alternative: per-feature directive

You can instead import GridColumnVirtualizationDirective and bind [columnVirtualization] directly on <tbw-grid>. That form gives a compile-time check that the feature is imported, but gridConfig.features above is the recommended, framework-consistent approach.

Demos

Default Column Virtualization

DATA

Column countNumber of columns to generate

50

VIRTUALIZATION

ThresholdMin columns to enable virtualization

30

OverscanExtra columns rendered offscreen

3

Auto-enableAutomatically enable when column count exceeds threshold

Show source

Use the Column Count slider to add up to 1000 columns, and toggle Auto Enable to compare performance with and without virtualization.

Configuration Options

See ColumnVirtualizationConfig for the full list of options and defaults. By default the plugin activates itself once a grid exceeds 30 columns; set autoEnable: false to control activation yourself.

Requirements

• fitMode: 'fixed' — the plugin is designed for fixed-width column layouts
• Columns should have explicit widths (columns without widths default to 100px)

Programmatic API

const plugin = grid.getPluginByName('columnVirtualization');

// Check if virtualization is currently active
const active = plugin.getIsVirtualized();

// Get the visible column index range
const { start, end } = plugin.getVisibleColumnRange();

// Scroll a specific column into view
plugin.scrollToColumn(42);

See Also

• Performance — Performance optimization tips
• Pinned Columns — Sticky columns (excluded from virtualization)