# @cell-x/el-table-sticky

> A set of directives for element-ui el-table to make table header, footer and horizontal scrollbar sticky.

Latest version **1.0.8** (published 2025-10-11) · 0 weekly downloads

## Install

```sh
npm install @cell-x/el-table-sticky
pnpm add @cell-x/el-table-sticky
yarn add @cell-x/el-table-sticky
bun add @cell-x/el-table-sticky
```

## Health

**Score 50/100 (C)** — status: stable.

Positive: no vulnerabilities; has provenance.

Warnings: low downloads; no types; no esm support.

## Facts

| | |
|---|---|
| Version | 1.0.8 |
| Published | 2025-10-11 |
| First published | 2023-06-15 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 1.2 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 108 |
| Author | Lruihao |
| Maintainers | lruihao |
| Keywords | vue, vue2, vue-directive, element-ui, el-table, el-table-sticky, v-sticky-header, v-sticky-footer, v-sticky-scroller, v-height-adaptive, horizontal-scroll |

## Links

- npm: https://www.npmjs.com/package/@cell-x/el-table-sticky
- Repository: https://github.com/Lruihao/el-table-sticky
- Homepage: https://lruihao.github.io/el-table-sticky/
- Issues: https://github.com/Lruihao/el-table-sticky/issues
- npm.io page: https://npm.io/package/@cell-x/el-table-sticky

## Dependencies (3)

- [gemini-scrollbar](https://npm.io/package/gemini-scrollbar.md) ^1.5.3
- [throttle-debounce](https://npm.io/package/throttle-debounce.md) ^1.0.1
- [resize-observer-polyfill](https://npm.io/package/resize-observer-polyfill.md) ^1.5.0

## Alternatives

- [@lexical/table](https://npm.io/package/@lexical/table.md) — 3.0M weekly downloads
- [mantine-datatable](https://npm.io/package/mantine-datatable.md) — 98.2K weekly downloads
- [react-native-collapsible-tab-view](https://npm.io/package/react-native-collapsible-tab-view.md) — 70.6K weekly downloads
- [@handsontable/vue3](https://npm.io/package/@handsontable/vue3.md) — 16.1K weekly downloads
- [vuewordcloud](https://npm.io/package/vuewordcloud.md) — 7.2K weekly downloads

## Recent versions

- 1.0.8 (latest) — 2025-10-11
- 1.0.7 — 2025-08-06
- 1.0.6 — 2025-07-08
- 1.0.5 — 2025-06-04
- 1.0.4 — 2024-06-05
- 1.0.3 — 2024-01-25
- 1.0.2 — 2023-10-08
- 1.0.1 — 2023-09-25
- 1.0.0 — 2023-09-25
- 1.0.0-RC.2 — 2023-09-25
- 1.0.0-RC.1 — 2023-09-25
- 1.0.0-RC.0 — 2023-09-25
- 1.0.0-RC — 2023-09-25
- 0.1.2 — 2023-06-19
- 0.1.1 — 2023-06-17
- … 1 more at https://npm.io/package/@cell-x/el-table-sticky/versions

## README

# el-table-sticky

[在线示例](https://lruihao.github.io/el-table-sticky/)

> 一个用于实现 Element UI (Vue 2) 表格的表头吸顶、表尾吸底、滚动条吸底以及高度自适应功能的指令集插件。

## 背景

Element UI 的表格组件在使用时，如果表格内容过多，表格会出现滚动条，但是表头不会吸顶，表尾合计行也不会吸底，这样在表格内容过多时，表头和表尾合计行就会被遮挡，如果有横向滚动条，每次想滚动必须滑动到最底下，这一系列痛点，非常影响用户体验。

**Element UI 的解决办法**：通过设置 `max-height` 或者 `height` 属性来实现上述需求。

**Element UI 的解决不足点**：高度值只支持设置数字型，在实际开发中往往需要借助 JS 来计算。

为了解决以上痛点/需求，减少开发和维护成本，于是就有了这个插件，详见 [思路分析](http://lruihao.cn/projects/el-table-sticky/)。

## 特性

`v-sticky-*` 指令依赖于 `position: sticky` 属性，不支持 IE 浏览器。

- [x] 支持表头吸顶 (v-sticky-header)
- [x] 支持表尾合计行吸底 (v-sticky-footer)
- [x] 支持横向滚动条吸底 (v-sticky-scroller)
- [x] 支持高度自适应 (v-height-adaptive)

## 安装

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

## 注册指令

全局注册指令：

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

Vue.use(elTableSticky)

// 或者

Vue.use(elTableSticky, {
  StickyHeader: {
    // 吸顶偏移量，可以是 CSS 支持的距离值，如 `0px`、`10%`、`calc(100vh - 1rem)` 等
    offsetTop: 0,
    // 滚动条吸底偏移量，可以是 CSS 支持的距离值，如 `0px`、`10%`、`calc(100vh - 1rem)` 等
    offsetBottom: 0,
  },
  StickyFooter: {
    // 吸底偏移量，可以是 CSS 支持的距离值，如 `0px`、`10%`、`calc(100vh - 1rem)` 等
    offsetBottom: 0,
  },
  StickyScroller: {
    // 吸底偏移量，可以是 CSS 支持的距离值，如 `0px`、`10%`、`calc(100vh - 1rem)` 等
    offsetBottom: 0,
  },
  HeightAdaptive: {
    // 底部偏移量，只能是数字型
    offsetBottom: 0,
  }
})
```

局部注册指令：

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

export default {
  directives: {
    StickyHeader: new StickyHeader({ offsetTop: 0, offsetBottom: 0 }).init(),
    StickyFooter: new StickyFooter({ offsetBottom: 0 }).init(),
    StickyScroller: new StickyScroller({ offsetBottom: 0 }).init(),
    HeightAdaptive: new HeightAdaptive({ offsetBottom: 0 }).init(),
  }
}
```

## 使用

```html
<el-table v-sticky-header>...</el-table>
<el-table v-sticky-footer>...</el-table>
<el-table v-sticky-scroller>...</el-table>
<el-table v-height-adaptive>...</el-table>
```

## 指令参数

| 指令                | 说明               | 修饰符    | 类型                     | 默认值                        |
| ------------------- | ------------------ | --------- | ------------------------ | ----------------------------- |
| `v-sticky-header`   | 表头吸顶指令       | `.always` | `Object{Number, String}` | offsetTop: 0, offsetBottom: 0 |
| `v-sticky-footer`   | 表尾合计行吸底指令 | `.always` | `Object{Number, String}` | offsetBottom: 0               |
| `v-sticky-scroller` | 横向滚动条吸底指令 | `.always` | `Object{Number, String}` | offsetBottom: 0               |
| `v-height-adaptive` | 高度自适应指令     | -         | `Object{Number}`         | offsetBottom: 0               |

## 注意事项

- `v-sticky-header` 和 `v-sticky-footer` 已内置滚动条吸底功能，无需重复使用 `v-sticky-scroller` 指令
- 当 `v-sticky-header` 和 `v-sticky-footer` 同时使用时，滚动条 `offsetBottom` 以 `v-sticky-footer` 为准
- 横向滚动条默认显示方式为 `hover`，可通过设置修饰符 `.always` 改为一直显示
- `v-height-adaptive` 指令不依赖于 `position: sticky` 属性，可单独使用

## Project setup

```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
```

Customize configuration see [Configuration Reference](https://cli.vuejs.org/config/).

---
_Source: https://npm.io/package/@cell-x/el-table-sticky · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._