Utilities

PositionManager

The internal segment tree exposed for advanced use cases. Stores row heights and answers prefix-sum queries in O(log n).

import { PositionManager } from 'vue-virtual-scroller-kit'

const manager = new PositionManager(
  10_000, // item count
  50, // uniform estimated height (or a function (index) => number)
)

manager.totalSize // total height of all items
manager.getOffset(index) // pixel offset of item i = sum of heights[0..i-1]
manager.getHeight(index) // stored height of item i
manager.findIndex(scrollTop) // first item index visible at scrollTop
manager.set(index, height) // update measured height, O(log n)

Use PositionManager when building completely custom virtualised layouts that don't fit the provided components.

autoColWidths

Utility function that estimates column widths from a data sample using the Canvas API measureText. Useful for setting initial ColumnDef.width values in VirtualTable based on actual content.

import { autoColWidths } from 'vue-virtual-scroller-kit'

const widths = autoColWidths(columns, rows, options)

Parameters

Parameter	Type	Description
cols	{ key: string; title: string }[]	Column definitions — key and header title
rows	T[]	Data rows to measure
options	AutoColWidthsOptions	Optional settings (see below)

AutoColWidthsOptions

Option	Type	Default	Description
font	string	'12px sans-serif'	CSS font string — should match your cell font
padding	number	24	Extra px added to measured width (accounts for cell padding)
minWidth	number	60	Minimum column width in px
maxWidth	number	320	Maximum column width in px

Return value

Map<string, number> — maps each column key to a pixel width.

Example

import { autoColWidths } from 'vue-virtual-scroller-kit'
import type { ColumnDef } from 'vue-virtual-scroller-kit'

const rawCols = [
  { key: 'id', title: 'ID' },
  { key: 'name', title: 'Name' },
  { key: 'email', title: 'Email' },
]

const widths = autoColWidths(rawCols, rows, {
  font: '12px Inter, sans-serif',
  padding: 24,
  maxWidth: 400,
})

const columns: ColumnDef[] = rawCols.map((c) => ({
  key: c.key,
  title: c.title,
  width: widths.get(c.key) ?? 120,
  minWidth: 60,
}))

SSR note: autoColWidths uses document.createElement('canvas') internally. In SSR environments where document is unavailable it falls back to a uniform width of 120px.