# table-horizontal-scroll

> > let el-table show horizontal scroll-bar at bottom

Latest version **0.2.4** (published 2022-06-17) · 0 weekly downloads

## Install

```sh
npm install table-horizontal-scroll
pnpm add table-horizontal-scroll
yarn add table-horizontal-scroll
bun add table-horizontal-scroll
```

## Health

**Score 10/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; low quality score; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.4 |
| Published | 2022-06-17 |
| First published | 2022-06-17 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 6 |
| Unpacked size | 3.5 MB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 83 |
| Author | feb10_zlb |
| Maintainers | feb10_zlb |
| Keywords | vue, vue, vue2, element-ui, el-scroller, el-table, horizontal-scroll |

## Links

- npm: https://www.npmjs.com/package/table-horizontal-scroll
- Repository: https://github.com/mizuka-wu/el-table-horizontal-scroll
- Homepage: https://github.com/mizuka-wu/el-table-horizontal-scroll#readme
- Issues: https://github.com/mizuka-wu/el-table-horizontal-scroll/issues
- npm.io page: https://npm.io/package/table-horizontal-scroll

## Dependencies (6)

- [vue](https://npm.io/package/vue.md) ^2.6.11
- [lodash](https://npm.io/package/lodash.md) ^4.17.21
- [core-js](https://npm.io/package/core-js.md) ^3.6.5
- [vue-route](https://npm.io/package/vue-route.md) ^1.5.1
- [element-ui](https://npm.io/package/element-ui.md) ^2.15.6
- [vue-router](https://npm.io/package/vue-router.md) ^3.5.3

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

- 0.2.4 (latest) — 2022-06-17
- 0.2.3 — 2022-06-17
- 0.2.2 — 2022-06-17

## README

# el-table-horizontal-scroll

> let el-table show horizontal scroll-bar at bottom

[中文文档]('./README_CN.md')

## How to use

![](./res.gif)

### install

```
npm install table-horizontal-scroll
```

### register directive

```
import horizontalScroll from 'table-horizontal-scroll'
Vue.use(horizontalScroll)
```

or

```
import horizontalScroll from 'table-horizontal-scroll'

export default {
    directives: {
        horizontalScroll
    }
}
```

### use

```
<el-table
  :data="data"
  v-horizontal-scroll
>
  <el-table-column
    fixed="left"
    label="a"
    prop="a"
  ></el-table-column>
  <el-table-column
    label="b"
    prop="b"
  ></el-table-column>
  <el-table-column
    label="c"
    prop="c"
  ></el-table-column>
  <el-table-column
    label="d"
    prop="d"
    width="1600"
  ></el-table-column>
</el-table>
```

## props

you can use `always` or `hover`

default is `hover`, the bar will show when your mouse over the table

or you can change it to always, and make the bar always show

example

```
<el-table
  :data="data"
  v-horizontal-scroll="'always'"
>
  <el-table-column
    fixed="left"
    label="a"
    prop="a"
  ></el-table-column>
  <el-table-column
    label="b"
    prop="b"
  ></el-table-column>
  <el-table-column
    label="c"
    prop="c"
  ></el-table-column>
  <el-table-column
    label="d"
    prop="d"
    width="1600"
  ></el-table-column>
</el-table>
```

---
_Source: https://npm.io/package/table-horizontal-scroll · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._