el table sticky

el-table-sticky

A command set plug-in used to implement the table header ceiling, table tail ceiling, scroll bar bottom ceiling, and height adaptive functions of Element UI (Vue 2) tables.

background

When the table component of Element UI is used, if there is too much content in the table, scroll bars will appear on the table, but the table header will not move to the top, and the total rows at the end of the table will not move to the bottom. In this way, when the table contains too much content, the table header and table will not move to the bottom. The last total row will be blocked. If there is a horizontal scroll bar, you must slide to the bottom every time you want to scroll. This series of pain points greatly affects the user experience.

Solution to Element UI : achieve the above requirements by setting the max-height or height attribute.

Element UI's shortcomings : the height value only supports setting numeric values, and in actual development it is often necessary to use JS to calculate it.

In order to solve the above pain points/needs and reduce development and maintenance costs, this plug-in was created. Please see the idea analysis for details.

characteristic

Some instructions rely on position: sticky attribute, so only support modern browsers, online examples.

• Support header ceiling (v-sticky-header)
• Support table tail total row bottom sucking (v-sticky-footer)
• Support horizontal scroll bar bottom sucking (v-sticky-scroller)
• Support height adaptive (v-height-adaptive)

Install

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

Registration instructions

Global registration instructions:

 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 ,
  }
} )

Partial registration instructions:

 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 ( ) ,
  }
} 

use

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

Command parameters

instruction	illustrate	modifier	type	default value
v-sticky-header	Header ceiling command	.always	Object{Number, String}	offsetTop: 0, offsetBottom: 0
v-sticky-footer	The total line at the end of the table is the bottom sucking command	.always	Object{Number, String}	offsetBottom: 0
v-sticky-scroller	Horizontal scroll bar bottom command	.always	Object{Number, String}	offsetBottom: 0
v-height-adaptive	Highly adaptive instructions	-	Object{Number}	offsetBottom: 0

Things to note

• v-sticky-header and v-sticky-footer have built-in scroll bar sucking function, no need to reuse the v-sticky-scroller command
• When v-sticky-header and v-sticky-footer are used at the same time, the scroll bar offsetBottom is based on v-sticky-footer
• The default display mode of the horizontal scroll bar is hover , which can be changed to always display by setting the modifier .always
• The v-height-adaptive directive does not depend on position: sticky attribute and can be used alone

Project setup

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.