[email protected]: You can use the virtual table just like the normal table
source link: https://github.com/ctq123/ant-virtual-table/blob/master/README-en_EN.md
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
ant-virtual-table
English | 简体中文
This is an ant.design virtual table, which is used to solve the problem of page jamming during big data rendering. This component encapsulates the Table component in ant.desigin and its properties are completely consistent with the original component Table AntDesign Table , it allows you to use a virtual table like a normal table. The example handles rendering 10 million pieces of data, and the page is very smooth. online demo
Design Notes
Considering the compatibility issue, the internal scrolling event of the Listening Table determines the position of the sliding line, and does not adopt the new H5 feature IntersectionObserver. Therefore the compatibility issue is better. In addition, the component introduces the loose handle of the loash to deal with the jitter problem. Currently, raf is not used.
React ant-virtual-table
install
npm install ant-virtual-table --save-dev
Usage
demo
import React, { Component, Fragment } from 'react'
import { VirtualTable } from 'ant-virtual-table'
import 'antd/dist/antd.css'
const columns = [
{
title: '序号',
dataIndex: 'id',
width: 100
},
{
title: '姓名',
dataIndex: 'name',
width: 150
},
{
title: '年龄',
dataIndex: 'age',
width: 100
},
{
title: '性别',
dataIndex: 'sex',
width: 100,
render: (text) => {
return text === 'male' ? '男' : '女'
}
},
{
title: '地址',
dataIndex: 'address',
key: 'address'
}
]
function generateData () {
const res = []
const names = ['Tom', 'Marry', 'Jack', 'Lorry', 'Tanken', 'Salla']
const sexs = ['male', 'female']
for (let i = 0; i < 10000000; i++) {
let obj = {
id: i,
name: names[i % names.length] + i,
sex: sexs[i % sexs.length],
age: 15 + Math.round(10 * Math.random()),
address: '浙江省杭州市西湖区华星时代广场2号楼'
}
res.push(obj)
}
return res
}
const dataSource = generateData()
class App extends Component {
render () {
return (
<Fragment>
<VirtualTable
columns={columns}
dataSource={dataSource}
rowKey='id'
pagination={{ pageSize: 40 }}
scroll={{ y: 400 }}
bordered
/>
</Fragment>
)
}
}
Prop Types
The attribute is consistent with the ant.design Table, and there are no unique attributes for the time being.
Recommend
-
30
本文同步发布在 https://gist.github.com/djyde/955aa3f8f46116d648d44a743970b089 （请在那里进行讨论） 在过去的几年，不论是面...
-
29
此文仅代表个人立场，利益不相关。 回顾 今早一到公司，就发现群里有人说 antd 组件的样式变了，所有的Button组件都被加上了雪花，接着就看到 GitHub 上的 issue，几乎所有前端相关的群都在讨论这件事。 而 antd 的维护者偏右似乎还没有意识到
-
14
背景 在中后台业务中，表单页面基础的场景包括组件值的收集、校验和更新。在 to B 业务中，表单页面的需求往往更复杂和定制化，除了上述的基本操作，还要处理包括自定义表单组件、表单联动、表单的异步检验等复杂场景，在一些...
-
7
V2EX › React 求推荐一个轻量级的 react ui 库，不想用 antd dmjob2015222 · 1 小...
-
2
公司一个开发迭代两年的项目因后期需要扩展更多的业务板块需要进行拆分，一是要满足后期不断新增板块业务不对现有业务产生影响，再者就是目前存在单项目业务量过大，开发维护难度极大，于是不得不考虑将现有业务板块进行微服务化拆分，以满足后期的需求。
-
10
今天又来了个新的需求，需要两个联动的输入框，而它们之间的“联动”在于，前者为王，后者不能大于前者的值。举个简单的例子，卖商品的最低价格 <= 最高价格，最高价格不可能比最低价格要低吧。要知道 Antd 4 和 3 的写法不太相同，4 主要使用的...
-
3
antd mobile v5 它悄悄的来了桃翁公众号：前端桃园在 React 领域里，一直缺...
-
6
Vite 2.0 + React + TypeScript + Antd 搭建简单脚手架Vite 出来好一段时间了，最开始支持 Vue，而现在已经不受框架限制了。而 Vite 解决的是对于项目每次启动与打包构建等待时间长的问题...
-
40
antd解决select复制文本Antd 的 select 组件目前还不支持复制文本功能。详见[] 我临时封装的一个可以支持复制的 select 组件。 CopySelect 没有啥原理，很简单。就是控制下拉框的展开，不让一复制文字松开后又变成文本未...
-
3
antd 与 element-plus 的 form 模型 antd 的 form 模型 antd 的 form 模型实际上是需要建立 formModel 的。 内建里 form model 来完全控制整体表单各个表单项的值。有defaultValues 用来做初始化的默认值。且提供 resetFieldsValue 来...
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK