VueCraft NPM

Оценка ширины колонок ​

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

ts
function autoColWidths<T>(
  cols: { key: string; title: string }[],
  rows: T[],
  options?: AutoColWidthsOptions,
): Map<string, number>

Параметры ​

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> — сопоставляет каждый ключ столбца с шириной в пикселях.

Пример ​

ts
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.