Утилиты

PositionManager

Внутреннее дерево отрезков, предоставленное для продвинутых сценариев использования. Хранит высоты строк и отвечает на запросы префиксных сумм за O(log n).

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

const manager = new PositionManager(
  10_000, // число элементов
  50, // единая оценочная высота (либо функция (index) => number)
)

manager.totalSize // общая высота всех элементов
manager.getOffset(index) // пиксельное смещение элемента i = сумма heights[0..i-1]
manager.getHeight(index) // сохранённая высота элемента i
manager.findIndex(scrollTop) // индекс первого элемента, видимого при scrollTop
manager.set(index, height) // обновить измеренную высоту, O(log n)

Используйте PositionManager при построении полностью кастомных виртуализированных раскладок, не подходящих под предоставленные компоненты.

autoColWidths

Утилитарная функция, оценивающая ширины столбцов по образцу данных с помощью measureText Canvas API. Полезна для установки начальных значений ColumnDef.width в VirtualTable на основе реального содержимого.

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

const widths = autoColWidths(columns, rows, options)

Параметры

Параметр	Тип	Описание
cols	{ key: string; title: string }[]	Определения столбцов — ключ и заголовок
rows	T[]	Строки данных для измерения
options	AutoColWidthsOptions	Опциональные настройки (см. ниже)

AutoColWidthsOptions

Опция	Тип	По умолчанию	Описание
font	string	'12px sans-serif'	Строка CSS-шрифта — должна соответствовать шрифту ячеек
padding	number	24	Дополнительные px, добавляемые к измеренной ширине (учитывает отступы ячейки)
minWidth	number	60	Минимальная ширина столбца в px
maxWidth	number	320	Максимальная ширина столбца в px

Возвращаемое значение

Map<string, number> — сопоставляет каждый ключ столбца с шириной в пикселях.

Пример

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: autoColWidths внутри использует document.createElement('canvas'). В SSR-окружениях, где document недоступен, функция откатывается к единой ширине 120px.