Install

Requirements

• Vue ^3.2.13
• Element Plus 2.x
• Node ^20.19.0 || >=22.12.0 for local development in this repository

Package Installation

pnpm add vue3-el-table-sticky-plugin

npm install vue3-el-table-sticky-plugin

yarn add vue3-el-table-sticky-plugin

Minimal Usage

import { createApp } from 'vue';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
import Vue3TableStickyPlugin from 'vue3-el-table-sticky-plugin';

import App from './App.vue';

const app = createApp(App);

app.use(ElementPlus);
app.use(Vue3TableStickyPlugin);
app.mount('#app');

Apply v-sticky to an el-table:

<template>
  <div class="page-scroll">
    <div class="toolbar">Filters and actions</div>

    <el-table
      v-sticky="{
        offsetTop: 0,
        scrollTarget: '.page-scroll',
        observe: ['.toolbar'],
        boundary: 'table',
      }"
      :data="tableData"
      border
    >
      <el-table-column prop="date" label="Date" width="180" />
      <el-table-column prop="name" label="Name" width="180" />
      <el-table-column prop="address" label="Address" />
    </el-table>
  </div>
</template>

<script setup lang="ts">
const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
];
</script>

<style scoped>
.page-scroll {
  height: 100%;
  overflow-y: auto;
}
</style>

Global Defaults

You can provide default sticky behavior while installing the plugin:

app.use(Vue3TableStickyPlugin, {
  offsetTop: 64,
  scrollTarget: '.app-main',
});

Directive-level options still win over plugin defaults:

<el-table
  v-sticky="{
    offsetTop: 0,
    scrollTarget: '.page-scroll',
  }"
/>

Local Development

pnpm install
pnpm dev

Local demo routes:

• /#/basic-body
• /#/parent-scroll
• /#/multi-table
• /#/dynamic-top