A Vue directive for making Element UI table headers sticky with enhanced features.

✨ Features 🚀 Smooth sticky table headers for Element UI

🛠️ Supports fixed columns out of the box

📏 Customizable offset and z-index

🔄 Automatic scroll container detection

🖱️ Floating scrollbar for horizontal scrolling

🎨 Optional shadow effect

🔄 Works with keep-alive

📱 Responsive design

📦 Installation

npm install el-table-sticky-header
# or
yarn add el-table-sticky-header

🚀 Basic Usage

main.js

import Vue from 'vue';
import ElTableStickyHeader from 'el-table-sticky-header';

// Register directive globally
Vue.directive('sticky-header', ElTableStickyHeader);

html

<template>
  <el-table 
    v-sticky-header="{ offset: 50 }"
    :data="tableData"
  >
	<el-table-column prop="name" label="Name" width="180"></el-table-column>
    <el-table-column prop="date" label="Date" width="180"></el-table-column>
    <el-table-column prop="address" label="Address"></el-table-column>
  </el-table>
</template>

🎯 Advanced Usage With Fixed Columns

<el-table 
  v-sticky-header
  :data="tableData"
>
  <el-table-column type="index"></el-table-column>
  <el-table-column prop="name" label="Name" width="180"></el-table-column>
  <el-table-column prop="date" label="Date" width="180"></el-table-column>
  <el-table-column prop="name" label="Address" fixed width="280"></el-table-column>
  <!-- other columns -->
</el-table>