Naive UI

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

import type { DataTableColumns } from 'naive-ui'

const columns: DataTableColumns = [
  { key: 'id', title: 'ID', width: 60, fixed: 'left' },
  { key: 'name', title: 'Name', width: 120 },
  { key: 'age', title: 'Age', width: 80 },
  { key: 'email', title: 'Email', width: 280 },
  { key: 'phone', title: 'Phone', width: 180 },
  { key: 'department', title: 'Department', width: 120 },
  { key: 'address', title: 'Address', width: 280 },
  { key: 'date', title: '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>
  <!-- Naive UI uses selector method -->
  <div v-table-touch-scroll="{ selector: '.n-scrollbar-container' }">
    <n-data-table
      :columns="columns"
      :data="tableData"
      :scroll-x="1200"
      :max-height="400"
      :bordered="true"
      size="small"
      striped
    />
  </div>
</template>