### Project Setup Commands

Source: https://github.com/lruihao/el-table-sticky/blob/main/README.md

Commands for setting up and running the project, including installation, development server, building for production, and linting.

```bash
yarn install
# Compiles and hot-reloads for development
yarn serve
# Compiles and minifies for production
yarn build
# Compiles and minifies for production with demo
yarn build:demo
# Lints and fixes files
yarn lint
```

--------------------------------

### Basic Sticky Header Setup

Source: https://github.com/lruihao/el-table-sticky/blob/main/_autodocs/INDEX.md

Demonstrates the basic setup for a sticky header using the v-sticky-header directive. Ensure Vue and the plugin are installed before use.

```html
<template>
  <el-table v-sticky-header :data="tableData">
    <el-table-column prop="id" label="ID"></el-table-column>
    <el-table-column prop="name" label="Name"></el-table-column>
  </el-table>
</template>

<script>
import elTableSticky from '@cell-x/el-table-sticky'
Vue.use(elTableSticky)

export default {
  data() {
    return {
      tableData: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
      ]
    }
  }
}
</script>
```

--------------------------------

### Complete Setup with Multiple Directives

Source: https://github.com/lruihao/el-table-sticky/blob/main/_autodocs/REFERENCE.md

Configure multiple sticky and adaptive features simultaneously. This example sets offsets for header, footer, and height adaptation.

```javascript
Vue.use(elTableSticky, {
  StickyHeader: { offsetTop: 60, offsetBottom: 16 },
  StickyFooter: { offsetBottom: 0 },
  HeightAdaptive: { offsetBottom: 50 }
})
```

--------------------------------

### Plugin Installation

Source: https://github.com/lruihao/el-table-sticky/blob/main/_autodocs/MANIFEST.txt

Instructions for installing the el-table-sticky plugin.

```APIDOC
## Plugin Installation

### Global Installation
```javascript
import Vue from 'vue';
import ElTableSticky from 'el-table-sticky';

Vue.use(ElTableSticky);
```

### Per-Instance Configuration
Refer to `configuration.md` for details on configuring the plugin per instance.
```

--------------------------------

### Install with Yarn

Source: https://github.com/lruihao/el-table-sticky/blob/main/_autodocs/REFERENCE.md

Install the el-table-sticky package using Yarn.

```bash
yarn add @cell-x/el-table-sticky
```

--------------------------------

### Browser UMD Build Example

Source: https://github.com/lruihao/el-table-sticky/blob/main/_autodocs/plugin-entry-point.md

Example of including the plugin via script tags in a browser for automatic directive registration.

```html
<script src="vue.js"></script>
<script src="el-table-sticky.umd.js"></script>
<!-- Directives automatically registered -->
```

--------------------------------

### Plugin Installation and Configuration

Source: https://github.com/lruihao/el-table-sticky/blob/main/_autodocs/plugin-entry-point.md

Demonstrates how to install the el-table-sticky plugin globally using `Vue.use()`, with options for default or custom configurations for directives like StickyHeader, StickyFooter, StickyScroller, and HeightAdaptive.

```APIDOC
## Plugin Installation and Configuration

### Description
This section shows how to integrate the el-table-sticky plugin into your Vue application using `Vue.use()`. You can either register it with default settings or provide a custom configuration object to tailor the behavior of directives such as `v-sticky-header`, `v-sticky-footer`, `v-sticky-scroller`, and `v-height-adaptive`.

### Method
`Vue.use(plugin, options?)

### Parameters
#### Global Options (`options`)
- **options** (Object) - Optional - Global configuration for all directives.
  - **options.StickyHeader** (Object) - Optional - Configuration for the `v-sticky-header` directive.
    - **options.StickyHeader.offsetTop** (Number | String) - Optional - Top offset for the sticky header. Default: `0`.
    - **options.StickyHeader.offsetBottom** (Number | String) - Optional - Bottom offset for the horizontal scrollbar. Default: `0`.
  - **options.StickyFooter** (Object) - Optional - Configuration for the `v-sticky-footer` directive.
    - **options.StickyFooter.offsetBottom** (Number | String) - Optional - Bottom offset for the sticky footer. Default: `0`.
  - **options.StickyScroller** (Object) - Optional - Configuration for the `v-sticky-scroller` directive.
    - **options.StickyScroller.offsetBottom** (Number | String) - Optional - Bottom offset for the scrollbar. Default: `0`.
  - **options.HeightAdaptive** (Object) - Optional - Configuration for the `v-height-adaptive` directive.
    - **options.HeightAdaptive.offsetBottom** (Number) - Optional - Bottom offset in pixels. Default: `0`.

### Request Example
```javascript
import Vue from 'vue'
import elTableSticky from '@cell-x/el-table-sticky'

// Global registration with default options
Vue.use(elTableSticky)

// Or with custom options
Vue.use(elTableSticky, {
  StickyHeader: { offsetTop: 60, offsetBottom: 0 },
  StickyFooter: { offsetBottom: 0 },
  StickyScroller: { offsetBottom: 0 },
  HeightAdaptive: { offsetBottom: 20 }
})
```

### Response
This method does not return a value. It registers directives globally with Vue.
```

--------------------------------

### Install el-table-sticky

Source: https://github.com/lruihao/el-table-sticky/blob/main/README.md

Install the el-table-sticky package using npm.

```bash
npm install @cell-x/el-table-sticky
```

--------------------------------

### Global Plugin Configuration Example

Source: https://github.com/lruihao/el-table-sticky/blob/main/_autodocs/types.md

Example of how to configure global options for el-table-sticky directives when registering the plugin with Vue.use().

```javascript
Vue.use(elTableSticky, {
  StickyHeader: { offsetTop: 60, offsetBottom: 0 },
  StickyFooter: { offsetBottom: 0 },
  StickyScroller: { offsetBottom: 0 },
  HeightAdaptive: { offsetBottom: 20 }
})
```

--------------------------------

### Plugin Install with Default Options

Source: https://github.com/lruihao/el-table-sticky/blob/main/_autodocs/plugin-entry-point.md

Use `Vue.use()` to install the el-table-sticky plugin globally with its default configuration options.

```javascript
import elTableSticky from '@cell-x/el-table-sticky'

// Global registration with default options
Vue.use(elTableSticky)
```

--------------------------------

### Complete Example with Sticky Header

Source: https://github.com/lruihao/el-table-sticky/blob/main/_autodocs/REFERENCE.md

A full Vue component example demonstrating the use of el-table-sticky with a sticky header and sample data.

```vue
<template>
  <el-table v-sticky-header :data="tableData" style="width: 100%;">
    <el-table-column prop="id" label="ID"></el-table-column>
    <el-table-column prop="name" label="Name"></el-table-column>
    <el-table-column prop="amount" label="Amount"></el-table-column>
  </el-table>
</template>

<script>
import elTableSticky from '@cell-x/el-table-sticky'
Vue.use(elTableSticky)

export default {
  data() {
    return {
      tableData: Array.from({ length: 100 }, (_, i) => ({
        id: i + 1,
        name: `Item ${i + 1}`,
        amount: Math.random() * 1000
      }))
    }
  }
}
</script>
```

--------------------------------

### StickyHeader Constructor Examples

Source: https://github.com/lruihao/el-table-sticky/blob/main/_autodocs/api-reference/sticky-header.md

Illustrates how to instantiate the StickyHeader class with numeric or CSS string offsets, and how to perform global registration.

```javascript
// With numeric offset
const headerDirective = new StickyHeader({ offsetTop: 60 })

// With CSS string offset
const headerDirective = new StickyHeader({ 
  offsetTop: 'calc(var(--navbar-height) + 10px)',
  offsetBottom: '16px'
})

// Global registration
Vue.use(elTableSticky, {
  StickyHeader: { offsetTop: 60, offsetBottom: 0 }
})
```

--------------------------------

### Example Priority Flow in el-table-sticky

Source: https://github.com/lruihao/el-table-sticky/blob/main/_autodocs/configuration.md

Demonstrates how global defaults are applied and overridden by per-instance bindings for offsetTop in el-table-sticky.

```javascript
// Step 1: Global defaults
Vue.use(elTableSticky, {
  StickyHeader: { offsetTop: 60 }
})

// Result: All tables use offsetTop: 60

// Step 2: Per-instance override
<el-table v-sticky-header="{ offsetTop: 100 }">
// Result: This table uses offsetTop: 100 (overrides global)

// Step 3: No instance value specified
<el-table v-sticky-header>
// Result: Uses global offsetTop: 60
```

--------------------------------

### Basic el-table-sticky Setup

Source: https://github.com/lruihao/el-table-sticky/blob/main/_autodocs/configuration.md

Initialize el-table-sticky without any custom configuration. This will apply the plugin with its default settings.

```javascript
import elTableSticky from '@cell-x/el-table-sticky'

Vue.use(elTableSticky)

// All directives use built-in defaults
```

--------------------------------

### Sticky Initialization Example

Source: https://github.com/lruihao/el-table-sticky/blob/main/_autodocs/api-reference/sticky-base.md

Demonstrates how to instantiate StickyHeader and StickyFooter subclasses with offset configurations. The constructor converts offsets to CSS pixel strings.

```javascript
// StickyHeader usage
const header = new StickyHeader({
  offsetTop: 60,      // CSS units like '60px', '2rem', etc.
  offsetBottom: 16    // for scrollbar positioning
})

// StickyFooter usage
const footer = new StickyFooter({
  offsetBottom: 20    // CSS units
})
```

--------------------------------

### Install via Browser (UMD)

Source: https://github.com/lruihao/el-table-sticky/blob/main/_autodocs/REFERENCE.md

Include the UMD bundle of el-table-sticky via a script tag for browser usage.

```html
<script src="https://unpkg.com/@cell-x/el-table-sticky/dist/el-table-sticky.umd.js"></script>
```

--------------------------------

### Minimal Test for StickyHeader Directive

Source: https://github.com/lruihao/el-table-sticky/blob/main/_autodocs/errors.md

This minimal HTML example demonstrates how to test the v-sticky-header directive in isolation. If this basic setup fails, it suggests an environmental issue such as incorrect Vue or Element UI versions.

```html
<!-- Minimal test for StickyHeader -->
<el-table v-sticky-header style="height: 400px;">
  <el-table-column prop="id" label="ID"></el-table-column>
</el-table>
```

--------------------------------

### Global Configuration with Vue.use()

Source: https://github.com/lruihao/el-table-sticky/blob/main/_autodocs/api-reference/utilities.md

Sets global configuration options for the el-table-sticky plugin. This example demonstrates setting the offsetTop for StickyHeader.

```javascript
Vue.use(elTableSticky, {
  StickyHeader: { offsetTop: 60 }
})
```

--------------------------------

### Plugin Install with Custom Options

Source: https://github.com/lruihao/el-table-sticky/blob/main/_autodocs/plugin-entry-point.md

Install the el-table-sticky plugin with custom options to configure specific directives like `StickyHeader`, `StickyFooter`, `StickyScroller`, and `HeightAdaptive`.

```javascript
import elTableSticky from '@cell-x/el-table-sticky'

// Or with custom options
Vue.use(elTableSticky, {
  StickyHeader: { offsetTop: 60, offsetBottom: 0 },
  StickyFooter: { offsetBottom: 0 },
  StickyScroller: { offsetBottom: 0 },
  HeightAdaptive: { offsetBottom: 20 }
})
```

--------------------------------

### StickyScroller Constructor Examples

Source: https://github.com/lruihao/el-table-sticky/blob/main/_autodocs/api-reference/sticky-scroller.md

Demonstrates how to instantiate the StickyScroller class with numeric or CSS string offsets for the bottom scrollbar. Also shows global and local registration patterns.

```javascript
// With numeric offset
const scrollerDirective = new StickyScroller({ offsetBottom: 0 })

// With CSS string offset
const scrollerDirective = new StickyScroller({ 
  offsetBottom: '20px'
})
```

```javascript
// Global registration
Vue.use(elTableSticky, {
  StickyScroller: { offsetBottom: 0 }
})
```

```javascript
// Local registration in component
export default {
  directives: {
    StickyScroller: new StickyScroller({ offsetBottom: 16 }).init()
  }
}
```

--------------------------------

### Project Dependencies

Source: https://github.com/lruihao/el-table-sticky/blob/main/_autodocs/INDEX.md

Lists the external libraries required by the el-table-sticky project. Ensure these are installed in your project.

```json
{
  "gemini-scrollbar": "^1.5.3",
  "resize-observer-polyfill": "^1.5.0",
  "throttle-debounce": "^1.0.1"
}
```

--------------------------------

### Vue Plugin Entry Point

Source: https://github.com/lruihao/el-table-sticky/blob/main/_autodocs/README.md

Complete reference for the Vue plugin, including the plugin object, install method, parameter tables for directive options, and auto-installation behavior.

```APIDOC
## Vue Plugin Entry Point

### Description
Details the Vue plugin for el-table-sticky, including its installation, configuration, and usage for global or local registration.

### Plugin Object and install() Method
Describes the plugin object and the `install()` method used for registering directives.

### Parameter Tables for Directive Options
Provides parameter tables for all directive options available through the plugin configuration.

### Auto-installation Behavior
Explains the automatic installation behavior of the plugin.

### Named Exports
Details the named exports available for local registration of directives.
```

--------------------------------

### Scroller Initialization Examples

Source: https://github.com/lruihao/el-table-sticky/blob/main/_autodocs/api-reference/scroller.md

Demonstrates creating a Scroller instance with different types of `offsetBottom` values. Use a numeric value for pixels, a string for CSS units, or omit for the default.

```javascript
// Create scroller with numeric offset
const scroller = new Scroller(tableEl, binding, vnode, 20)
```

```javascript
// Create scroller with CSS offset
const scroller = new Scroller(tableEl, binding, vnode, '20px')
```

```javascript
// Create scroller with default offset
const scroller = new Scroller(tableEl, binding, vnode)
```

--------------------------------

### Validate Table Setup Before Applying Directives

Source: https://github.com/lruihao/el-table-sticky/blob/main/_autodocs/errors.md

Implement a validation function to check table element setup, ensuring required attributes like 'height' are present before applying directives such as 'v-height-adaptive'. Logs errors if validation fails.

```javascript
// Check table setup before applying directives
const validateTableSetup = (element, directives) => {
  const errors = []
  
  if (!element.classList.contains('el-table')) {
    errors.push('Element is not el-table')
  }
  
  if (directives.includes('heightAdaptive') && !element.getAttribute('height')) {
    errors.push('Height attribute required for v-height-adaptive')
  }
  
  return errors
}

const errors = validateTableSetup(tableEl, ['heightAdaptive', 'stickyHeader'])
if (errors.length > 0) {
  console.error('Table setup invalid:', errors)
}
```

--------------------------------

### Directive Value Binding Example

Source: https://github.com/lruihao/el-table-sticky/blob/main/_autodocs/api-reference/height-adaptive.md

Demonstrates how to bind a value to the v-height-adaptive directive to customize the offsetBottom property.

```html
<el-table v-height-adaptive="{ offsetBottom: 40 }" height="100px">
  <!-- table content -->
</el-table>
```

--------------------------------

### Auto-Installation in Browser

Source: https://github.com/lruihao/el-table-sticky/blob/main/_autodocs/plugin-entry-point.md

The plugin automatically installs globally if imported in a browser environment with Vue available. This allows the plugin to work without explicit Vue.use() in browser UMD builds.

```javascript
if (typeof window !== 'undefined') {
  GlobalVue = window.Vue
} else if (typeof global !== 'undefined') {
  GlobalVue = global.Vue
}

if (GlobalVue) {
  GlobalVue.use(plugin)
}
```

--------------------------------

### Invalid Global Configuration Options

Source: https://github.com/lruihao/el-table-sticky/blob/main/_autodocs/configuration.md

Shows examples of invalid configurations for offsetBottom and offsetTop that can cause issues. Ensure correct types (numeric for offsetBottom, valid CSS for offsetTop) are used.

```javascript
// These will cause issues
Vue.use(elTableSticky, {
  HeightAdaptive: { offsetBottom: '50px' },  // Should be numeric: 50
  StickyHeader: { offsetTop: null },         // Invalid type
  StickyHeader: { offsetTop: undefined },    // Invalid type
})
```

--------------------------------

### Local Registration Usage

Source: https://github.com/lruihao/el-table-sticky/blob/main/_autodocs/plugin-entry-point.md

Example of importing and registering directive classes locally within a Vue component.

```javascript
import {
  StickyHeader,
  StickyFooter,
  StickyScroller,
  HeightAdaptive,
} from '@cell-x/el-table-sticky'

export default {
  directives: {
    stickyHeader: new StickyHeader({ offsetTop: 60 }).init(),
    stickyFooter: new StickyFooter({ offsetBottom: 0 }).init(),
    stickyScroller: new StickyScroller({ offsetBottom: 0 }).init(),
    heightAdaptive: new HeightAdaptive({ offsetBottom: 20 }).init(),
  }
}
```

--------------------------------

### v-height-adaptive Example Layout

Source: https://github.com/lruihao/el-table-sticky/blob/main/_autodocs/REFERENCE.md

Demonstrates a layout where v-height-adaptive is used to make an el-table fill the remaining vertical space between a fixed navbar and footer.

```html
<div style="height: 100vh; display: flex; flex-direction: column;">
  <div style="flex: 0 0 auto; height: 60px;">Navbar</div>
  
  <el-table 
    v-height-adaptive="{ offsetBottom: 20 }" 
    height="100px"
    style="flex: 1;"
    :data="data"
  >
    <el-table-column prop="id" label="ID"></el-table-column>
  </el-table>
  
  <div style="flex: 0 0 auto; height: 20px;">Footer</div>
</div>
```

--------------------------------

### Manual Update Example

Source: https://github.com/lruihao/el-table-sticky/blob/main/_autodocs/api-reference/scroller.md

Demonstrates manual invocation of the update method. It's typically called after table column operations that are not automatically detected by the MutationObserver.

```javascript
// Manual update (rarely needed)
scroller.update()

// In response to table column changes
this.$refs.table.reload()
// The MutationObserver will call update() automatically
```

--------------------------------

### ResizeObserver Not Supported Fallback

Source: https://github.com/lruihao/el-table-sticky/blob/main/_autodocs/errors.md

In browsers lacking ResizeObserver support, 'resize-observer-polyfill' provides a fallback. Ensure this polyfill is installed to maintain functionality, though events might be delayed.

```json
{
  "dependencies": {
    "resize-observer-polyfill": "^1.5.0"
  }
}
```

--------------------------------

### Add and Remove Resize Listener Example

Source: https://github.com/lruihao/el-table-sticky/blob/main/_autodocs/api-reference/utilities.md

Demonstrates how to add a resize listener to the document body using addResizeListener and how to remove it later using the corresponding removeResizeListener function. Ensure the removeResizeListener function is available in your scope.

```javascript
function onBodyResize() {
  console.log('Body resized')
}

addResizeListener(window.document.body, onBodyResize)

// Later, remove the listener
removeResizeListener(window.document.body, onBodyResize)
```

--------------------------------

### Example of Correct HeightAdaptive Usage

Source: https://github.com/lruihao/el-table-sticky/blob/main/_autodocs/REFERENCE.md

Illustrates the correct way to apply the v-height-adaptive directive to an el-table component by including the 'height' attribute.

```html
<el-table v-height-adaptive height="100px">
```

--------------------------------

### Data Flow for StickyHeader Directive

Source: https://github.com/lruihao/el-table-sticky/blob/main/_autodocs/REFERENCE.md

Illustrates the sequence of operations from plugin installation to directive hooks for the StickyHeader. Details element validation, cell finding, column stacking, and scroller initialization.

```text
Vue.use(elTableSticky)
    ↓
[Plugin.install]
    ↓
new StickyHeader(options).init()
    ↓
Vue.directive('StickyHeader', directiveDefinition)
    ↓
<el-table v-sticky-header>
    ↓
[inserted hook]
    ├─ checkElTable() - validate element
    ├─ getStickyWrapperCells() - find header cells
    ├─ stackLeftColumns() - position left-fixed columns
    ├─ stackRightColumns() - position right-fixed columns
    └─ initScroller() - create custom scrollbar
    ↓
[update hook on prop changes]
    └─ stackStickyColumns() - recalculate positions
```

--------------------------------

### Responsive el-table-sticky Configuration

Source: https://github.com/lruihao/el-table-sticky/blob/main/_autodocs/configuration.md

Dynamically adjust sticky header and footer offsets based on screen size. This example uses a JavaScript check for window width to determine the offset.

```javascript
// Use different offsets based on breakpoint
const isSmallScreen = window.innerWidth < 768
const navbarHeight = isSmallScreen ? 56 : 60

Vue.use(elTableSticky, {
  StickyHeader: { offsetTop: navbarHeight },
  StickyFooter: { offsetBottom: 0 }
})
```

--------------------------------

### Per-Instance Configuration Override

Source: https://github.com/lruihao/el-table-sticky/blob/main/_autodocs/api-reference/utilities.md

Overrides global configuration settings on a per-instance basis using the v-sticky-header directive. This example sets a specific offsetTop value for a single el-table instance.

```javascript
<el-table v-sticky-header="{ offsetTop: 100 }">
```

--------------------------------

### JavaScript Configuration Offset Resolution

Source: https://github.com/lruihao/el-table-sticky/blob/main/_autodocs/api-reference/sticky-base.md

Configure sticky offset properties through a hierarchy: per-instance binding value, global/instance config, or built-in defaults. This example shows global configuration and per-instance override.

```javascript
// Global config
Vue.use(elTableSticky, {
  StickyHeader: { offsetTop: 60 }  // default for all instances
})

// Per-instance override
<el-table v-sticky-header="{ offsetTop: 100 }">  // overrides global
```

--------------------------------

### Per-Instance Overrides with HTML

Source: https://github.com/lruihao/el-table-sticky/blob/main/_autodocs/plugin-entry-point.md

Illustrates how to override global configuration with per-instance directive options directly in the HTML template.

```html
<!-- Uses global offsetTop (60px) -->
<el-table v-sticky-header>...</el-table>

<!-- Overrides global offsetTop with 100px -->
<el-table v-sticky-header="{ offsetTop: 100 }">...</el-table>

<!-- Overrides with CSS value -->
<el-table v-sticky-header="{ offsetTop: 'calc(100% - 50px)' }">...</el-table>
```

--------------------------------

### StickyHeader Modifier Support Examples

Source: https://github.com/lruihao/el-table-sticky/blob/main/_autodocs/api-reference/sticky-header.md

Shows how to use the .always modifier to control the visibility of the internal horizontal scrollbar.

```html
<!-- Scrollbar always visible -->
<el-table v-sticky-header.always>

<!-- Scrollbar visible only on hover (default) -->
<el-table v-sticky-header>
```

--------------------------------

### Custom Global Configuration

Source: https://github.com/lruihao/el-table-sticky/blob/main/_autodocs/plugin-entry-point.md

Shows how to provide custom configuration options during global registration to override default directive settings.

```javascript
import elTableSticky from '@cell-x/el-table-sticky'

Vue.use(elTableSticky, {
  StickyHeader: {
    offsetTop: 'calc(var(--navbar-height) + 10px)',
    offsetBottom: '16px'
  },
  StickyFooter: {
    offsetBottom: '20px'
  },
  StickyScroller: {
    offsetBottom: '16px'
  },
  HeightAdaptive: {
    offsetBottom: 50
  }
})
```

--------------------------------

### Valid Global Configuration Options

Source: https://github.com/lruihao/el-table-sticky/blob/main/_autodocs/configuration.md

Demonstrates various valid ways to configure offsetTop and offsetBottom globally using Vue.use(). Supports numbers, strings with units, calc(), and CSS variables.

```javascript
// All valid
Vue.use(elTableSticky, {
  StickyHeader: { offsetTop: 60 },
  StickyHeader: { offsetTop: '60px' },
  StickyHeader: { offsetTop: 'calc(100% - 20px)' },
  StickyHeader: { offsetTop: 'var(--nav-height)' },
  HeightAdaptive: { offsetBottom: 0 },    // numeric
})
```

--------------------------------

### Mandatory Height Attribute

Source: https://github.com/lruihao/el-table-sticky/blob/main/_autodocs/api-reference/height-adaptive.md

Shows examples of setting the required 'height' attribute on an el-table component when using the v-height-adaptive directive.

```html
<el-table v-height-adaptive height="100px">...</el-table>
<el-table v-height-adaptive height="500px">...</el-table>
```

--------------------------------

### StickyScroller Instance Method: init()

Source: https://github.com/lruihao/el-table-sticky/blob/main/_autodocs/api-reference/sticky-scroller.md

Initializes the directive hooks for the StickyScroller instance.

```APIDOC
## init()

### Description
Initializes the StickyScroller instance and returns a Vue 2 directive definition object with lifecycle hooks.

### Returns
A Vue 2 directive definition object with the following hooks:
```javascript
{
  inserted(el, binding, vnode): void,
  unbind(el): void
}
```

### Directive Hooks
#### inserted(el, binding, vnode)
Executed once when the directive is first bound to the element.

- **el**: The `el-table` DOM element
- **binding**: Directive binding object containing `value`, `modifiers`, and `name`
- **vnode**: Vue vnode
- **Behavior**:
  - Validates that directive is used only on `el-table` elements
  - Creates a new `Scroller` instance and attaches it to the element as `el.scroller`
  - Initializes the custom horizontal scrollbar with configuration from this directive instance's `offsetBottom`
  - Sets up synchronization between table body scroll and scrollbar scroll

#### unbind(el)
Executed when directive is unbound from the element.

- **Behavior**:
  - Destroys the Gemini scrollbar instance (`el.scroller.scrollbar?.destroy()`)
  - Cleans up the scroller reference (`el.scroller = null`)

### Directive Value Binding
The directive accepts an object value to override the default offset per-instance:

```html
<el-table v-sticky-scroller="{ offsetBottom: 40 }">
  <!-- table content -->
</el-table>
```

### Modifier Support
Supports the `.always` modifier to control scrollbar visibility:

```html
<!-- Scrollbar always visible -->
<el-table v-sticky-scroller.always>

<!-- Scrollbar visible only on hover (default) -->
<el-table v-sticky-scroller>
```
```

--------------------------------

### StickyHeader Directive Value Binding Example

Source: https://github.com/lruihao/el-table-sticky/blob/main/_autodocs/api-reference/sticky-header.md

Demonstrates how to bind configuration options directly to the v-sticky-header directive on an el-table element.

```html
<el-table v-sticky-header="{ offsetTop: 120, offsetBottom: 16 }">
  <!-- table content -->
</el-table>
```

--------------------------------

### Package.json main field

Source: https://github.com/lruihao/el-table-sticky/blob/main/_autodocs/INDEX.md

Specifies the entry point for the built output of the el-table-sticky package.

```json
{
  "main": "dist/el-table-sticky.umd.js"
}
```

--------------------------------

### Directive Instantiation and Registration

Source: https://github.com/lruihao/el-table-sticky/blob/main/_autodocs/plugin-entry-point.md

Illustrates the internal process of instantiating directive classes and registering them globally with Vue using their respective names.

```javascript
new StickyHeader(headerOptions)
new StickyFooter(footerOptions)
new StickyScroller(scrollerOptions)
new HeightAdaptive(adaptiveOptions)
```

```javascript
Vue.directive('StickyHeader', directiveInstance.init())
Vue.directive('StickyFooter', directiveInstance.init())
Vue.directive('StickyScroller', directiveInstance.init())
Vue.directive('HeightAdaptive', directiveInstance.init())
```

--------------------------------

### convertToPx Utility Function

Source: https://github.com/lruihao/el-table-sticky/blob/main/_autodocs/REFERENCE.md

Converts a number or string value into a pixel string. For example, 60 becomes "60px".

```javascript
convertToPx(value: Number | String): String
// Converts: 60 → "60px", "10px" → "10px", etc.
```

--------------------------------

### Instance Method: init()

Source: https://github.com/lruihao/el-table-sticky/blob/main/_autodocs/api-reference/sticky-footer.md

Initializes the sticky footer directive for an el-table instance. This method returns a Vue 2 directive definition object.

```APIDOC
## Instance Method: init()

### Signature

```javascript
init(): Object
```

### Returns

A Vue 2 directive definition object with the following hooks:

```javascript
{
  inserted(el, binding, vnode): void,
  update(el, binding, vnode): void,
  unbind(el): void
}
```
```

--------------------------------

### init()

Source: https://github.com/lruihao/el-table-sticky/blob/main/_autodocs/api-reference/sticky-base.md

Initializes the el-table-sticky directive, returning a Vue 2 directive definition object with lifecycle hooks.

```APIDOC
## Instance Method: init()

### Signature

```javascript
init(): Object
```

### Returns

A Vue 2 directive definition object with hooks:

```javascript
{
  inserted(el, binding, vnode): void,
  update(el, binding, vnode): void,
  unbind(el): void
}
```

### Directive Hooks

#### inserted(el, binding, vnode)

Called once when directive is first bound to element.

**Parameters**:
- `el`: The `el-table` DOM element
- `binding`: Directive binding with `value`, `modifiers`, `name`
- `vnode`: Vue vnode

**Behavior**:
1. Validates element is an `el-table` via `checkElTable()`
2. Sets `data-sticky-header` or `data-sticky-footer` attribute on table element
3. Initializes horizontal scrollbar via `#initScroller()`
4. Applies sticky positioning to fixed columns via `#stackStickyColumns()`

#### update(el, binding, vnode)

Called when directive arguments change.

**Behavior**: Recalculates column sticky positions with reset flag enabled (clears previous styles before reapplying)

#### unbind(el)

Called when directive is unbound from element.

**Behavior**: Destroys associated Scroller instance and cleans up resources
```

--------------------------------

### StickyScroller Directive Value Binding Example

Source: https://github.com/lruihao/el-table-sticky/blob/main/_autodocs/api-reference/sticky-scroller.md

Shows how to bind a value to the v-sticky-scroller directive to configure the offsetBottom property on a per-instance basis.

```html
<el-table v-sticky-scroller="{ offsetBottom: 40 }">
  <!-- table content -->
</el-table>
```

--------------------------------

### Global Registration with ES Module

Source: https://github.com/lruihao/el-table-sticky/blob/main/_autodocs/plugin-entry-point.md

Illustrates global plugin registration using ES Module syntax, commonly used in modern JavaScript projects.

```javascript
// ES Module
import elTableSticky from '@cell-x/el-table-sticky'
Vue.use(elTableSticky)
```

--------------------------------

### StickyHeader init() Method

Source: https://github.com/lruihao/el-table-sticky/blob/main/_autodocs/api-reference/sticky-header.md

Initializes the directive's functionality, returning a Vue 2 directive definition object with lifecycle hooks.

```APIDOC
## init(): Object

### Description
Initializes the StickyHeader directive, returning an object with Vue 2 directive hooks.

### Returns
- A Vue 2 directive definition object with the following hooks:
  - `inserted(el, binding, vnode): void`
  - `update(el, binding, vnode): void`
  - `unbind(el): void`

### Directive Hooks
#### inserted(el, binding, vnode)
Executed once when the directive is first bound to the element.
- **el**: The `el-table` DOM element.
- **binding**: Directive binding object containing `value` (directive argument), `modifiers`, and `name`.
- **vnode**: Vue vnode.
- **Behavior**:
  - Sets `data-sticky-header` attribute on the table.
  - Initializes horizontal scrollbar (via Scroller instance).
  - Calculates and applies sticky positioning to fixed columns.
  - Validates that directive is used only on `el-table` elements.

#### update(el, binding, vnode)
Executed when directive arguments change.
- **Behavior**: Recalculates sticky column positions with reset flag enabled.

#### unbind(el)
Executed when directive is unbound from the element.
- **Behavior**: Destroys associated scrollbar instance and cleans up resources.

### Directive Value Binding
The directive accepts an object value to override defaults per-instance:
```html
<el-table v-sticky-header="{ offsetTop: 120, offsetBottom: 16 }">
  <!-- table content -->
</el-table>
```

### Modifier Support
Supports the `.always` modifier for the internal horizontal scrollbar:
```html
<!-- Scrollbar always visible -->
<el-table v-sticky-header.always>

<!-- Scrollbar visible only on hover (default) -->
<el-table v-sticky-header>
```
```

--------------------------------

### StickyHeader / StickyFooter init

Source: https://github.com/lruihao/el-table-sticky/blob/main/_autodocs/REFERENCE.md

Initializes the sticky behavior and returns a Vue 2 directive definition.

```APIDOC
## StickyHeader / StickyFooter init

### Description
Initializes the sticky header/footer functionality and returns a Vue 2 directive definition with hooks for managing the directive's lifecycle.

### Returns
- Object - Vue 2 directive definition with hooks: `inserted`, `update`, `unbind`.
```

--------------------------------

### Configure Offset Bottom with v-sticky-footer

Source: https://github.com/lruihao/el-table-sticky/blob/main/_autodocs/api-reference/sticky-footer.md

Use the v-sticky-footer directive with an object value to override the default offsetBottom. This example sets the offset to 40 pixels.

```html
<el-table v-sticky-footer="{ offsetBottom: 40 }">
  <!-- table header -->
  <el-table-column prop="name" label="Name"></el-table-column>
  <!-- table body -->
  <!-- table footer with summary row -->
</el-table>
```

--------------------------------

### StickyScroller Modifier Support Example

Source: https://github.com/lruihao/el-table-sticky/blob/main/_autodocs/api-reference/sticky-scroller.md

Illustrates the use of the '.always' modifier to ensure the scrollbar is always visible, contrasting with the default behavior where it appears only on hover.

```html
<!-- Scrollbar always visible -->
<el-table v-sticky-scroller.always>

<!-- Scrollbar visible only on hover (default) -->
<el-table v-sticky-scroller>
```

--------------------------------

### Project File Organization

Source: https://github.com/lruihao/el-table-sticky/blob/main/_autodocs/INDEX.md

Illustrates the directory structure of the el-table-sticky project. This helps in understanding the location of different modules and source files.

```text
output/
├── INDEX.md (this file)
├── plugin-entry-point.md
├── configuration.md
├── types.md
├── errors.md
└── api-reference/
    ├── sticky-header.md
    ├── sticky-footer.md
    ├── sticky-scroller.md
    ├── height-adaptive.md
    ├── sticky-base.md
    ├── scroller.md
    └── utilities.md
```

--------------------------------

### Sticky Constructor Parameters

Source: https://github.com/lruihao/el-table-sticky/blob/main/_autodocs/api-reference/sticky-base.md

Details the parameters for the Sticky constructor, including their types, requirements, defaults, and descriptions. offsetTop and offsetBottom accept CSS units.

```javascript
options | Object | No | {} | Configuration object
options.offsetTop | Number | String | No | 0 | Top offset for sticky header (StickyHeader only). Accepts CSS units: `0`, `'10px'`, `'calc(100vh - 60px)'`
options.offsetBottom | Number | String | No | 0 | Bottom offset for scrollbar or footer. Accepts CSS units
```

--------------------------------

### Package.json Export Configuration

Source: https://github.com/lruihao/el-table-sticky/blob/main/_autodocs/plugin-entry-point.md

This JSON snippet from package.json defines the main entry point for the UMD build and specifies which files are included in the package.

```json
{
  "main": "dist/el-table-sticky.umd.js",
  "files": [
    "dist/*.{js,map}"
  ]
}
```

--------------------------------

### StickyHeader init Method

Source: https://github.com/lruihao/el-table-sticky/blob/main/_autodocs/REFERENCE.md

Initializes the StickyHeader and returns Vue 2 directive definition with hooks.

```javascript
init(): Object
// Returns Vue 2 directive definition with hooks: inserted, update, unbind
```

--------------------------------

### el-table-sticky Module Architecture

Source: https://github.com/lruihao/el-table-sticky/blob/main/_autodocs/INDEX.md

Illustrates the directory structure and main files within the el-table-sticky package.

```tree
@cell-x/el-table-sticky
├── src/
│   ├── directives/
│   │   ├── index.js (plugin definition, exports)
│   │   ├── sticky-header.js
│   │   ├── sticky-footer.js
│   │   ├── sticky-scroller.js
│   │   ├── height-adaptive.js
│   │   └── css/ (stylesheets)
│   ├── utils/
│   │   ├── index.js (convertToPx, checkElTable)
│   │   ├── sticky.js (base class)
│   │   ├── scroller.js (scrollbar management)
│   │   └── resize-event.js (resize listeners)
│   └── dist/
│       └── el-table-sticky.umd.js (built output)

```

--------------------------------

### Inserted Hook for el-table-sticky

Source: https://github.com/lruihao/el-table-sticky/blob/main/_autodocs/api-reference/sticky-base.md

This hook is called once when the directive is first bound to the element. It performs initial setup, including validation, attribute setting, and initializing scrollbars and sticky columns.

```javascript
inserted(el, binding, vnode): void
```

--------------------------------

### StickyHeader / StickyFooter Constructor

Source: https://github.com/lruihao/el-table-sticky/blob/main/_autodocs/REFERENCE.md

Initializes a StickyHeader or StickyFooter instance with optional offset configurations.

```APIDOC
## StickyHeader / StickyFooter Constructor

### Description
Initializes a StickyHeader or StickyFooter instance.

### Parameters
#### Constructor Parameters
- **offsetTop** (Number) - Optional - The offset from the top of the viewport.
- **offsetBottom** (Number) - Optional - The offset from the bottom of the viewport.
```

--------------------------------

### Global Registration with CommonJS

Source: https://github.com/lruihao/el-table-sticky/blob/main/_autodocs/plugin-entry-point.md

Shows how to import and register the el-table-sticky plugin globally using CommonJS module syntax.

```javascript
// CommonJS
const elTableSticky = require('@cell-x/el-table-sticky').default
Vue.use(elTableSticky)
```

--------------------------------

### Catch Errors Globally with Vue.config.errorHandler

Source: https://github.com/lruihao/el-table-sticky/blob/main/_autodocs/errors.md

Implement a global error handler to catch directive errors and specific el-table setup issues. This allows for centralized error logging and fallback mechanisms.

```javascript
// Catch directive errors globally
Vue.config.errorHandler = (err, vm, info) => {
  if (err.message.includes('v-sticky-header')) {
    console.error('Sticky header error:', err)
    // Disable sticky feature, reload table, etc.
  }
  if (err.message.includes('el-table must set the height')) {
    console.error('Height adaptive requires height:', err)
    // Set default height, disable feature
  }
}
```

--------------------------------

### StickyScroller init Method

Source: https://github.com/lruihao/el-table-sticky/blob/main/_autodocs/REFERENCE.md

Initializes the StickyScroller and returns Vue 2 directive definition with hooks.

```javascript
init(): Object
// Returns Vue 2 directive definition with hooks: inserted, unbind
```

--------------------------------

### HeightAdaptive Missing Height Attribute Error

Source: https://github.com/lruihao/el-table-sticky/blob/main/_autodocs/REFERENCE.md

This error indicates that the el-table component using the v-height-adaptive directive is missing the required 'height' attribute. Set a specific height for the table, for example, height='100px'.

```text
el-table must set the height. Such as height='100px'
```

--------------------------------

### PluginOptions

Source: https://github.com/lruihao/el-table-sticky/blob/main/_autodocs/types.md

Global configuration object passed to Vue.use() for customizing sticky header, footer, scroller, and height adaptive behaviors.

```APIDOC
## PluginOptions

Global configuration object passed to Vue.use():

```javascript
{
  StickyHeader?: StickyHeaderOptions,
  StickyFooter?: StickyFooterOptions,
  StickyScroller?: StickyScrollerOptions,
  HeightAdaptive?: HeightAdaptiveOptions
}
```

| Property | Type | Default | Description |
|----------|------|---------|-------------|
| StickyHeader | StickyHeaderOptions | {} | Global options for v-sticky-header directive |
| StickyFooter | StickyFooterOptions | {} | Global options for v-sticky-footer directive |
| StickyScroller | StickyScrollerOptions | {} | Global options for v-sticky-scroller directive |
| HeightAdaptive | HeightAdaptiveOptions | {} | Global options for v-height-adaptive directive |

**Example**:
```javascript
Vue.use(elTableSticky, {
  StickyHeader: { offsetTop: 60, offsetBottom: 0 },
  StickyFooter: { offsetBottom: 0 },
  StickyScroller: { offsetBottom: 0 },
  HeightAdaptive: { offsetBottom: 20 }
})
```
```

--------------------------------

### Configuration Reference

Source: https://github.com/lruihao/el-table-sticky/blob/main/_autodocs/README.md

Comprehensive configuration reference covering global plugin configuration, options for each directive, and configuration priority.

```APIDOC
## Configuration Reference

### Description
Provides a detailed guide to configuring el-table-sticky, including global settings and directive-specific options.

### Global Plugin Configuration Structure
Outlines the structure for global plugin configuration.

### Directive Options Tables
Includes option tables for `StickyHeader`, `StickyFooter`, `StickyScroller`, and `HeightAdaptive` directives.

### Configuration Priority and Hierarchy
Explains the priority and hierarchy of configuration settings.

### Offset Value Formats
Details the formats for offset values and their conversion rules.

### CSS Variables and Safe-Area-Inset Support
Covers support for CSS variables and safe-area-inset.

### Configuration Examples
Provides examples for basic, responsive, and fully configured setups.
```

--------------------------------

### Sticky Constructor

Source: https://github.com/lruihao/el-table-sticky/blob/main/_autodocs/api-reference/sticky-base.md

Initializes a new instance of the Sticky class or its subclasses (StickyHeader, StickyFooter). It processes offset configurations and prepares the instance for sticky behavior.

```APIDOC
## Sticky Constructor

### Signature

```javascript
new Sticky({ offsetTop, offsetBottom })
```

### Parameters

#### options (Object) - Optional

Configuration object for sticky behavior.

- **offsetTop** (Number | String) - Optional - Default: `0`
  Top offset for sticky header. Accepts CSS units like `'10px'` or `'calc(100vh - 60px)'`.
- **offsetBottom** (Number | String) - Optional - Default: `0`
  Bottom offset for scrollbar or footer. Accepts CSS units.

### Returns

Instance of Sticky (or subclass) with offsets converted to CSS pixel strings.

### Example

```javascript
// StickyHeader usage
const header = new StickyHeader({
  offsetTop: 60,
  offsetBottom: 16
});

// StickyFooter usage
const footer = new StickyFooter({
  offsetBottom: 20
});
```
```

--------------------------------

### HeightAdaptive Missing Height Attribute Error Example

Source: https://github.com/lruihao/el-table-sticky/blob/main/_autodocs/errors.md

Shows an el-table with the v-height-adaptive directive applied but missing the required 'height' attribute, which causes an error. Correct usage includes specifying a valid height attribute.

```html
<!-- ❌ Error: No height attribute -->
<el-table v-height-adaptive :data="tableData">
  <el-table-column prop="name" label="Name"></el-table-column>
</el-table>
```

```html
<!-- ✓ Correct: Has height attribute -->
<el-table v-height-adaptive height="100px" :data="tableData">
  <el-table-column prop="name" label="Name"></el-table-column>
</el-table>
```

```html
<!-- ✓ Correct: Various height formats -->
<el-table v-height-adaptive height="500px" :data="tableData">...</el-table>
<el-table v-height-adaptive height="80%" :data="tableData">...</el-table>
<el-table v-height-adaptive height="calc(100vh - 200px)" :data="tableData">...</el-table>
```

--------------------------------

### StickyHeader Constructor

Source: https://github.com/lruihao/el-table-sticky/blob/main/_autodocs/api-reference/sticky-header.md

Initializes a new StickyHeader instance with optional offset configurations for top and bottom positioning.

```APIDOC
## new StickyHeader({ offsetTop, offsetBottom })

### Description
Initializes a new StickyHeader instance. This class is a Vue 2 directive that makes the header of an `el-table` element sticky.

### Parameters
#### Options Object
- **options** (Object) - Optional - Configuration object for the directive.
  - **options.offsetTop** (Number \| String) - Optional - Default: `0` - The top offset distance for the sticky header. Accepts CSS units like `0`, `'10px'`, `'2rem'`, or `'calc(100vh - 60px)'`.
  - **options.offsetBottom** (Number \| String) - Optional - Default: `0` - The bottom offset distance for the horizontal scrollbar when the header is sticky. Accepts CSS units.

### Returns
- Instance of `StickyHeader` with configured offset values converted to pixel strings internally.

### Example
```javascript
// With numeric offset
const headerDirective = new StickyHeader({ offsetTop: 60 })

// With CSS string offset
const headerDirective = new StickyHeader({
  offsetTop: 'calc(var(--navbar-height) + 10px)',
  offsetBottom: '16px'
})

// Global registration
Vue.use(elTableSticky, {
  StickyHeader: { offsetTop: 60, offsetBottom: 0 }
})
```
```

--------------------------------

### Directive Used on Non-el-table Element Error Example

Source: https://github.com/lruihao/el-table-sticky/blob/main/_autodocs/errors.md

Demonstrates incorrect usage of directives like v-sticky-header on elements other than el-table, which triggers an error. Correct usage involves applying the directive directly to an el-table element.

```html
<!-- ❌ Error: div is not el-table -->
<div v-sticky-header>content</div>
```

```html
<!-- ❌ Error: el-button is not el-table -->
<el-button v-sticky-footer>Button</el-button>
```

```html
<!-- ✓ Correct: applied to el-table -->
<el-table v-sticky-header>...</el-table>
```

--------------------------------

### HTML Attribute Markers for Sticky Columns

Source: https://github.com/lruihao/el-table-sticky/blob/main/_autodocs/api-reference/sticky-base.md

Use `data-sticky` attributes on `<th>` elements to mark columns for CSS styling. `left` and `right` indicate fixed direction, while `start` and `end` denote the first/last column in a fixed group.

```html
<!-- Left-fixed columns -->
<th data-sticky="left" style="left: 0px">...</th>
<th data-sticky="left" style="left: 100px">...</th>
<th data-sticky="end" style="left: 200px">...</th>  <!-- Last left column -->

<!-- Right-fixed columns -->
<th data-sticky="start" style="right: 150px">...</th>  <!-- First right column -->
<th data-sticky="right" style="right: 75px">...</th>
<th data-sticky="right" style="right: 0px">...</th>
```

--------------------------------

### Global Registration of HeightAdaptive

Source: https://github.com/lruihao/el-table-sticky/blob/main/_autodocs/api-reference/height-adaptive.md

Demonstrates how to globally register the el-table-sticky plugin, including configuring the HeightAdaptive directive with a custom bottom offset.

```javascript
// Global registration
Vue.use(elTableSticky, {
  HeightAdaptive: { offsetBottom: 20 }
})
```

--------------------------------

### Global HeightAdaptive Configuration

Source: https://github.com/lruihao/el-table-sticky/blob/main/_autodocs/configuration.md

Configure the `offsetBottom` globally for all `v-height-adaptive` instances. Ensure the value is a number.

```javascript
Vue.use(elTableSticky, {
  HeightAdaptive: {
    offsetBottom: 0            // Type: Number (MUST be numeric)
  }
})
```

--------------------------------

### Global Registration with Configuration

Source: https://github.com/lruihao/el-table-sticky/blob/main/_autodocs/INDEX.md

Configure el-table-sticky during global registration to customize directive behavior, such as offset values for sticky elements.

```javascript
Vue.use(elTableSticky, {
  StickyHeader: { offsetTop: 60, offsetBottom: 0 },
  StickyFooter: { offsetBottom: 0 },
  StickyScroller: { offsetBottom: 0 },
  HeightAdaptive: { offsetBottom: 0 }
})
```

--------------------------------

### StickyFooter Constructor

Source: https://github.com/lruihao/el-table-sticky/blob/main/_autodocs/api-reference/sticky-footer.md

Initializes a new instance of the StickyFooter class. It accepts an options object to configure the sticky behavior, primarily the offset from the bottom of the viewport.

```APIDOC
## new StickyFooter({ offsetBottom })

### Description
Initializes a new instance of the StickyFooter class.

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Parameters
- **options** (Object) - Optional - Configuration object for the directive.
  - **options.offsetBottom** (Number \| String) - Optional - Default: `0` - Bottom offset distance for sticky footer. Accepts CSS units: `0`, `'10px'`, `'2rem'`, `'calc(100vh - 80px)'`

### Returns
Instance of StickyFooter with configured offset value converted to pixel string internally.

### Example
```javascript
// With numeric offset
const footerDirective = new StickyFooter({ offsetBottom: 0 })

// With CSS string offset for responsive spacing
const footerDirective = new StickyFooter({ 
  offsetBottom: 'calc(var(--footer-height) + 10px)'
})

// Global registration for default configuration
Vue.use(elTableSticky, {
  StickyFooter: { offsetBottom: 0 }
})

// Local registration in component
export default {
  directives: {
    StickyFooter: new StickyFooter({ offsetBottom: 20 }).init()
  }
}
```
```

--------------------------------

### Helper Functions

Source: https://github.com/lruihao/el-table-sticky/blob/main/_autodocs/README.md

Reference for various helper functions used within the library, such as `convertToPx`, `checkElTable`, and `addResizeListener`.

```APIDOC
## Helper Functions

### Description
A collection of helper functions for common tasks like unit conversion, element validation, and event listener management.

### convertToPx()
Converts numbers to CSS pixel values.

### checkElTable()
Validates if a directive target is a table element.

### addResizeListener()
Adds a resize observer to an element.

### removeResizeListener()
Removes a resize observer from an element.

### Module Exports Summary
Provides a summary of exported helper functions.

### Internal Utilities
References internal utilities like `throttle`, `debounce`, and `GeminiScrollbar`.
```

--------------------------------

### StickyHeader init() Method Signature

Source: https://github.com/lruihao/el-table-sticky/blob/main/_autodocs/api-reference/sticky-header.md

Defines the signature for the init method, which returns a Vue 2 directive definition object.

```javascript
init(): Object
```

--------------------------------

### Global Plugin Configuration

Source: https://github.com/lruihao/el-table-sticky/blob/main/_autodocs/configuration.md

Configure all directives globally using Vue.use(). Set default offsets for StickyHeader, StickyFooter, StickyScroller, and HeightAdaptive.

```javascript
import elTableSticky from '@cell-x/el-table-sticky'

Vue.use(elTableSticky, {
  StickyHeader: { offsetTop: 0, offsetBottom: 0 },
  StickyFooter: { offsetBottom: 0 },
  StickyScroller: { offsetBottom: 0 },
  HeightAdaptive: { offsetBottom: 0 }
})
```

--------------------------------

### Instantiate HeightAdaptive with Default Configuration

Source: https://github.com/lruihao/el-table-sticky/blob/main/_autodocs/api-reference/height-adaptive.md

Creates an instance of HeightAdaptive using the default configuration, where the bottom offset is 0.

```javascript
// Default configuration
const adaptiveDirective = new HeightAdaptive({ offsetBottom: 0 })
```