Ant Design Vue

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

const columns = [
  { key: 'id', title: 'ID', dataIndex: 'id', width: 60, fixed: 'left' },
  { key: 'name', title: 'Name', dataIndex: 'name', width: 120 },
  { key: 'age', title: 'Age', dataIndex: 'age', width: 80 },
  { key: 'email', title: 'Email', dataIndex: 'email', width: 280 },
  { key: 'phone', title: 'Phone', dataIndex: 'phone', width: 180 },
  { key: 'department', title: 'Department', dataIndex: 'department', width: 120 },
  { key: 'address', title: 'Address', dataIndex: 'address', width: 280 },
  { key: 'date', title: 'Date', dataIndex: '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: '.ant-table-body' } -->
  <div v-table-touch-scroll="{ preset: 'ant-design-vue' }">
    <a-table
      :columns="columns"
      :data-source="tableData"
      :scroll="{ x: 1200, y: 400 }"
      :pagination="false"
      row-key="id"
      size="small"
      bordered
    />
  </div>
</template>