Options & Types

Option tables, TypeScript types, and library exports for Vue3 Mobile Table.

A Vue 3 custom directive that adds touch scroll support to table elements. In templates, use the v-mobile-table attribute. For global registration and local import, see the Usage Guide.

Type Definitions

MobileTableOptions

Configuration options interface for the directive.

Property	Type	Default	Description
`enabled`	`boolean`	`true`	Whether to enable the directive. When `false`, all event listeners and style hijacking are fully cleaned up (equivalent to passing `false` to the directive)
`preset`	`TablePreset`	-	UI library preset name, automatically applies the corresponding scroll container selector
`selector`	`string`	-	CSS selector for the target scroll element, takes priority over `preset`
`friction`	`number`	`0.95`	Friction/decay rate. Higher = slower decay (smoother scrolling), lower = faster stop (range: 0.8 - 0.99)
`dragThreshold`	`number`	`5`	Displacement threshold (px) before determining scroll direction, distinguishes minor jitter from intentional dragging
`disableInertia`	`boolean`	`false`	Whether to disable inertia scrolling. When `true`, scrolling stops immediately on finger release
`clickBlockThreshold`	`number`	`0.5`	Speed threshold (px/ms) for emergency stop click blocking. Higher = more lenient, lower = more strict (range: 0.3 - 1.0)
`mode`	`'auto' \| 'always'`	`'auto'`	Device detection mode. `'auto'`: automatic detection with lazy hijacking for hybrid devices. `'always'`: always activate touch handling regardless of device type
`rotation`	`0 \| 90 \| -90 \| 180`	`0`	CSS rotation angle (degrees). When the container uses CSS `transform: rotate()` to simulate landscape mode, the directive applies an inverse transform to touch coordinates for correct scroll mapping
`disableEdgeDetection`	`boolean`	`false`	Whether to disable edge detection. When `true`, the directive will not hand control back to the browser when scrolling reaches the boundary. Useful for fullscreen overlays where native gestures (e.g. iOS swipe-back) are unwanted
`onScrollStart`	`() => void`	-	Callback fired when scrolling starts, after finger displacement exceeds `dragThreshold` and direction is locked
`onScrollEnd`	`() => void`	-	Callback fired when scrolling ends, after inertia animation fully stops

Scroll container priority: selector > preset > the directive's bound element.

Full Type Signature:

interface MobileTableOptions {
  enabled?: boolean
  preset?: TablePreset
  selector?: string
  friction?: number
  dragThreshold?: number
  disableInertia?: boolean
  clickBlockThreshold?: number
  mode?: 'auto' | 'always'
  rotation?: 0 | 90 | -90 | 180
  disableEdgeDetection?: boolean
  onScrollStart?: () => void
  onScrollEnd?: () => void
}

TablePreset

Supported UI library preset types and their corresponding scroll container selectors.

Preset	UI Library	Selector
`'element-plus'`	Element Plus	`.el-scrollbar__wrap`
`'ant-design-vue'`	Ant Design Vue	`.ant-table-body`
`'arco-design'`	Arco Design	`.arco-table-body`
`'naive-ui'`	Naive UI	`.n-scrollbar-container`
`'primevue'`	PrimeVue	`.p-datatable-table-container`
`'vuetify'`	Vuetify	`.v-table__wrapper tbody`
`'vxe-table'`	VxeTable	`.vxe-table--body-inner-wrapper`

type TablePreset =
  | 'element-plus'
  | 'ant-design-vue'
  | 'arco-design'
  | 'naive-ui'
  | 'primevue'
  | 'vuetify'
  | 'vxe-table'

DeviceType

Device type detected by the directive's internal detection logic.

type DeviceType = 'mobile' | 'desktop' | 'hybrid'

Value	Description
`'mobile'`	Pure mobile device (phone/tablet) with coarse pointer + touch capability
`'desktop'`	Pure desktop without touch capability
`'hybrid'`	Hybrid device (Surface / touchscreen laptop) with touch but fine pointer

HijackState

Internal state machine for lazy hijacking on hybrid devices.

type HijackState = 'dormant' | 'standby' | 'pending-active' | 'active'

State	Description
`'dormant'`	Pure desktop, no-op
`'standby'`	Hybrid device default, only sentinel events attached
`'pending-active'`	After touchstart, coordinates recorded but styles not hijacked yet
`'active'`	Styles hijacked, full touch event binding active

Exports

UI_LIBRARY_SELECTORS

UI library selector preset mapping constant.

import { UI_LIBRARY_SELECTORS } from 'vue3-mobile-table'

const selector = UI_LIBRARY_SELECTORS['element-plus']
// '.el-scrollbar__wrap'

getSelectorByPreset

Get the corresponding CSS selector by preset name.

import { getSelectorByPreset } from 'vue3-mobile-table'

const selector = getSelectorByPreset('element-plus')
// '.el-scrollbar__wrap'

Parameters

Parameter	Type	Description
`preset`	`TablePreset`	UI library preset name

Returns

string | undefined — The corresponding CSS selector, or undefined if the preset does not exist.

detectDeviceType

Detects the current device type based on touch capability and pointer characteristics.

import { detectDeviceType } from 'vue3-mobile-table'

const device = detectDeviceType()
// 'mobile' | 'desktop' | 'hybrid'

Returns

DeviceType — The detected device type.

Internal Physics Engine Parameters

Physics engine constants used internally by the directive (not externally configurable):

Constant	Value	Description
`DEFAULT_FRICTION`	`0.95`	Default friction/decay rate
`MIN_VELOCITY`	`0.05`	Velocity threshold (px/ms) to stop inertia animation
`MAX_DT`	`32`	Max frame interval limit (ms), prevents jumps after frame drops
`DEFAULT_DRAG_THRESHOLD`	`5`	Default drag detection threshold (px)
`INERTIA_STOP_DELAY`	`80`	Inertia protection delay (ms). If finger pauses longer than this before release, inertia is not triggered
`SAFE_CLICK_VELOCITY`	`0.5`	Default speed threshold (px/ms) for emergency stop click blocking

Usage Guide

Element Plus

On this page

Type Definitions
Exports
Internal Physics Engine Parameters