VxeTable

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

const columns = [
  { key: 'id', field: 'id', title: 'ID', width: 60, fixed: 'left' },
  { key: 'name', field: 'name', title: 'Name', width: 120 },
  { key: 'age', field: 'age', title: 'Age', width: 80 },
  { key: 'email', field: 'email', title: 'Email', width: 280 },
  { key: 'phone', field: 'phone', title: 'Phone', width: 180 },
  { key: 'department', field: 'department', title: 'Department', width: 120 },
  { key: 'address', field: 'address', title: 'Address', width: 280 },
  { key: 'date', field: '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>
  <!-- Using selector to specify VxeTable's scroll container -->
  <!-- You can also use preset: { preset: 'vxe-table' } -->
  <div v-table-touch-scroll="{ selector: '.vxe-table--body-inner-wrapper' }">
    <vxe-table :data="tableData" border stripe height="400" size="small">
      <vxe-column
        v-for="col in columns"
        :key="col.key"
        :field="col.field"
        :title="col.title"
        :width="col.width"
        :fixed="col.fixed"
      />
    </vxe-table>
  </div>
</template>