The essence of virtual scrolling is not complicated. Part of the data is intercepted and rendered according to the scroll position and display range, which is similar to the principle of paging in essence, except that the start and end nodes of the intercepted range are dynamic.
However, it is cumbersome to deal with the details related to the virtual scrolling of the table, such as how to calculate the column with no width set, the newly rendered checkbox to determine the selected state, and so on.
Therefore, recommend a few table components that can support the front-end display of 10W+ data volume to reduce repeated wheel creation. Stop talking nonsense and get on with the dry goods.
React：
Ant Design official website address :
This component library has long been a must-have component library for react developers. Needless to say, the internal table comes with virtual scrolling.
TDesign official website address :
The front-end component library produced by Tencent has not been used by individuals before, but the internal table components also include virtual scrolling functions.
Material-UI official website address :
An open source UI component library from abroad, which was originally used to build a user interface based on Google's Material Design specification, and the internal table components also support virtual scrolling.
VUE 2.x:
Vxe-table official website address
This is a component library specializing in tables, and it is also a virtual scrolling table that I highly recommend using on vue2. Although I also made a virtual scrolling table with the same function for the company based on elemnt UI, if vxe-table was released half a year earlier, I would definitely choose it and would never invent my own wheel.
VUE 3.x:
Vxe-table official website address
vxe-table also has a component library that supports vue3.x version, and most of the apis and attributes are still used, and the feeling of vertical silky upgrade is smooth.
element-plus official website address
From the name, we know that this is an upgraded version of elementUI, which is a ui component library that supports vue3.x version. Among them, el-table-v2 is a table component that specifically supports virtual scrolling.
TDesign official website address :
Tencent's TDesign also includes a table that supports virtual scrolling inside the vue version, and also includes a ui library for mobile terminals and applets.
Surely Vue official website address :
Surely Vue is developed and maintained by the Ant Design Vue core team. It can be understood as an extension of Ant Design Vue, but currently supports vue 3.x. Another small regret is that the free version of Surely Vue will have an advertising watermark.
The following is the de-watermark instruction I used for my own verification, and the verification needs to be taken by myself. If you are using Surely Vue for commercial use, it is recommended to contact the Surely Vue official website to purchase an authorization code to remove the watermark.
ClearStable.js writes instruction logic
// ClearStable.js
const ClearStable = {
beforeMount(el, binding, vnode, prevVnode) {
let domArr = el.querySelectorAll('.surely-table div') // 获取元素
for (let i = 0; i < domArr.length; i++) {
// 遍历元素
let node = domArr.item(i)
if (['Unlicensed Product','Powered by Surely Vue'].includes(node.innerText)) {
node.innerText = "" // 满足条件则清空内容。
}
}
}
}
export default ClearStable
main.js mount command
// main.js
import {
createApp } from 'vue'
import ClearStable from './directives/clearStable.js'
// 引入 根组件
import App from './App.vue'
// 创建vue实例
const app = createApp(App)
app.directive('clearStable', ClearStable)
app.mount('#app')
Use the v-clearStable directive
<s-table v-clearStable
:columns="columns"
:data-source="dataSource">
</s-table>
The above instruction codes are for personal testing only, please do not use them for commercial use. A call to respect the development efforts of component teams.
If you have any suggestions for the article, you are welcome to leave a message or private message.