Element Plus

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

const columns = [
  { key: 'id', prop: 'id', label: 'ID', width: 60, fixed: 'left' },
  { key: 'name', prop: 'name', label: 'Name', width: 120 },
  { key: 'age', prop: 'age', label: 'Age', width: 80 },
  { key: 'email', prop: 'email', label: 'Email', width: 280 },
  { key: 'phone', prop: 'phone', label: 'Phone', width: 180 },
  { key: 'department', prop: 'department', label: 'Department', width: 120 },
  { key: 'address', prop: 'address', label: 'Address', width: 280 },
  { key: 'date', prop: 'date', label: 'Date', width: 120 },
]

const tableData = Array.from({ length: 30 }, (_, i) => ({
  id: i + 1,
  name: `User ${i + 1}`,
  age: 20 + (i % 40),
  email: `user${i + 1}@example.com`,
  phone: `+1 ${String(i).padStart(3, '0')}-${String(i * 10).padStart(4, '0')}`,
  department: ['Engineering', 'Design', 'Marketing', 'Sales'][i % 4],
  address: `No. ${i + 1}, Street ${i % 10}, City ${i % 5}`,
  date: new Date(2024, i % 12, (i % 28) + 1).toLocaleDateString(),
}))
</script>

<template>
  <!-- Using preset method (recommended) -->
  <!-- You can also use selector: { selector: '.el-scrollbar__wrap' } -->
  <div v-table-touch-scroll="{ preset: 'element-plus' }">
    <el-table :data="tableData" height="400" border stripe size="small">
      <el-table-column
        v-for="col in columns"
        :key="col.key"
        :prop="col.prop"
        :label="col.label"
        :width="col.width"
        :fixed="col.fixed"
      />
    </el-table>
  </div>
</template>