Configuration

Learn how to use Vue Table Touch Scroll

Usage Guide

This page covers common usage patterns for the v-table-touch-scroll directive. For complete configuration options and type definitions, see the API Reference.

Global Registration

main.ts
import { createApp } from 'vue'
import App from './App.vue'
import VueTableTouchScroll from 'vue-table-touch-scroll'

const app = createApp(App)
app.use(VueTableTouchScroll)
app.mount('#app')

Local Registration

If you don't need global registration, you can import the directive directly in a component:

<script setup lang="ts">
import { vTableTouchScroll } from 'vue-table-touch-scroll'
</script>

<template>
  <div v-table-touch-scroll="{ preset: 'element-plus' }">
    <el-table :data="tableData" />
  </div>
</template>

Using UI Library Presets

For UI libraries with built-in presets, simply pass the preset name — no need to manually find scroll container selectors:

<template>
  <!-- Element Plus -->
  <div v-table-touch-scroll="{ preset: 'element-plus' }">
    <el-table :data="tableData">
      <el-table-column prop="name" label="Name" />
    </el-table>
  </div>

  <!-- Ant Design Vue -->
  <div v-table-touch-scroll="{ preset: 'ant-design-vue' }">
    <a-table :data-source="dataSource" :columns="columns" />
  </div>

  <!-- VxeTable -->
  <div v-table-touch-scroll="{ preset: 'vxe-table' }">
    <vxe-table :data="tableData">
      <vxe-column field="name" title="Name" />
    </vxe-table>
  </div>
</template>

Using Custom Selectors

For UI libraries without built-in presets, use selector to specify the scroll container inside the table:

<template>
  <div v-table-touch-scroll="{ selector: '.my-scroll-container' }">
    <MyTable />
  </div>
</template>

Custom Physics Parameters

Adjust friction and drag threshold based on your use case:

<template>
  <!-- Smoother: high friction (slow decay), low threshold -->
  <div v-table-touch-scroll="{ preset: 'element-plus', friction: 0.98, dragThreshold: 3 }">
    <el-table :data="tableData" />
  </div>

  <!-- More precise: low friction (fast decay), high threshold -->
  <div v-table-touch-scroll="{ preset: 'element-plus', friction: 0.85, dragThreshold: 10 }">
    <el-table :data="tableData" />
  </div>
</template>

Dynamic Control

Pass false to completely disable the directive, useful for toggling based on device type:

<template>
  <div v-table-touch-scroll="isMobile ? { preset: 'element-plus' } : false">
    <el-table :data="tableData" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const isMobile = ref(true)
</script>

You can also use the enabled property:

<template>
  <div v-table-touch-scroll="{ enabled: isMobile, preset: 'element-plus' }">
    <el-table :data="tableData" />
  </div>
</template>

Lifecycle Callbacks

<script setup lang="ts">
const scrollOptions = {
  preset: 'element-plus' as const,
  onScrollStart: () => {
    // Scroll started: close overlays, record start time, etc.
  },
  onScrollEnd: () => {
    // Scroll ended: trigger analytics, load more data, etc.
  },
}
</script>

<template>
  <div v-table-touch-scroll="scrollOptions">
    <el-table :data="tableData" />
  </div>
</template>
Introduction
Parameters