Other Libraries

Using Vue3 Mobile Table with other UI libraries or custom tables

Other UI Libraries

Vue3 Mobile Table supports Table components from all desktop Vue UI component libraries.

For libraries with built-in presets, see API and use preset for quick integration.

Arco Design Vue

<template>
  <div v-mobile-table="{ preset: 'arco-design' }">
    <a-table :columns="columns" :data="data" :scroll="{ x: 1200 }" />
  </div>
</template>

Vuetify

<template>
  <div v-mobile-table="{ preset: 'vuetify' }">
    <v-data-table :headers="headers" :items="items" />
  </div>
</template>

PrimeVue

<template>
  <div v-mobile-table="{ preset: 'primevue' }">
    <DataTable :value="products" scrollable scroll-height="400px">
      <Column field="code" header="Code" />
      <Column field="name" header="Name" />
    </DataTable>
  </div>
</template>

All Available Presets

PresetUI LibraryScroll Container Selector
'element-plus'Element Plus.el-scrollbar__wrap
'ant-design-vue'Ant Design Vue.ant-table-body
'naive-ui'Naive UI.n-scrollbar-container
'vxe-table'VxeTable.vxe-table--body-inner-wrapper
'arco-design'Arco Design.arco-table-body
'primevue'PrimeVue.p-datatable-table-container
'vuetify'Vuetify.v-table__wrapper tbody

No Preset? Use Selector

For libraries without built-in presets, use selector to specify the actual scrollable container element inside the table. You'll need to use browser DevTools to find the CSS selector for the DOM element responsible for scrolling:

<template>
  <div v-mobile-table="{ selector: '.your-table-scroll-container' }">
    <YourTable :data="data" />
  </div>
</template>
VxeTable
Landscape Mode