RTL Support

Wrap your app (or just the parts using this library) in dir="rtl" — no rtl prop exists anywhere, because none is needed:

<VirtualTable :columns="columns" :rows="rows" dir="rtl" style="height: 500px" />

Every component uses CSS logical properties (inset-inline-start/inset-inline-end, padding-inline-start, margin-inline-start) instead of physical left/right for positioning — VirtualTree indent, VirtualTable fixed columns and the column-resize handle, VirtualGrid cell placement, and VirtualScrollbar's horizontal thumb all mirror automatically whenever the browser resolves direction: rtl, with zero JavaScript direction-branching.

Scroll position normalization

The one place that genuinely needs JS is element.scrollLeft, whose sign/origin differs in RTL across browsers (0 at the start edge, negative going toward the end, per the modern spec). VirtualTable's column virtualization, VirtualScrollbar's horizontal mode, and VirtualList's horizontal layout all read/write it through normalizeScrollLeft/setNormalizedScrollLeft rather than the raw property. Column drag-to-resize also flips its pointer-delta sign in RTL, since the resize handle sits on the physical left edge there.

normalizeScrollLeft(el)

(el: HTMLElement) => number

Returns the distance scrolled from the start edge, positive in both LTR and RTL — normalizing away the sign/origin difference between browsers.

setNormalizedScrollLeft(el, distance)

(el: HTMLElement, distance: number) => void

Sets the scroll position from a start-edge distance, converting it back to whatever raw scrollLeft convention the current browser and direction expect.

import { normalizeScrollLeft, setNormalizedScrollLeft } from 'vue-virtual-scroller-kit'

const distanceFromStart = normalizeScrollLeft(el) // works the same in LTR and RTL
setNormalizedScrollLeft(el, distanceFromStart + 100)

Both are exported from vue-virtual-scroller-kit if you need the same normalization in your own code.