高性能、灵活且现代的 React 表组件 ali-react-table

简介: 高性能、灵活且现代的 React 表组件。

ali-react-table

React 表格组件。https://ali-react-table.js.org/

消息

v2.0发布,详见官方文档

安装

npm install ali-react-table

特点

  • 播放,模拟虚拟滚动,数据量预测时自动开启
  • 简单灵活的API,深度的定制能力
  • 实用的表格特性:头吸顶&左侧表锁列&粘性定位的滚动条

表格适用场景

  • 需要用表格展示大量数据,对表格表现敏感
  • 页面没有引入 React 组件库,需要一个小型的表格组件
  • 原有的表格组件可定制化的生物,需要更加丰富的表格组件

效果演示

image.png

通过数据源一个长度超过5万的数组,表格保留表格。当表格滚动时,基础表格默认会为表格头设置样式。=粘性,表格头将在页面或滚动容器的顶部。在线示例

image.png

BaseTable提供了灵活且详细的API,方便上层各种业务需求表格进行,定制的内容包括单元格定制内容与样式、鼠标事件等。留矩阵在线示例存动态分析表格在线示例

image.png

↑ 优化的加载图标位置,加载图标会位于附近的中心位置,并经常出现状态。

image.png

基础表的简单透视表。,透视表展示的数据量一般可以,但基础表内置的虚拟滚动保证了表格在大数据量下仍具有良好的性能,上层不会出现异常的性能问题。在线示例

说明

表格只显示react ^16.8.0 || ^17.0.0

此外,还有更多的手机API浏览器,只有更新版本的PC端或浏览器,详见问题

相关链接

相关文章
|
3月前
|
设计模式 前端开发 数据可视化
【第4期】一文了解React UI 组件库
【第4期】一文了解React UI 组件库
85 0
|
3月前
|
存储 前端开发 JavaScript
【第34期】一文学会React组件传值
【第34期】一文学会React组件传值
31 0
|
3月前
|
前端开发
【第31期】一文学会用React Hooks组件编写组件
【第31期】一文学会用React Hooks组件编写组件
34 0
|
3月前
|
存储 前端开发 JavaScript
【第29期】一文学会用React类组件编写组件
【第29期】一文学会用React类组件编写组件
30 0
|
3月前
|
前端开发 开发者
【第26期】一文读懂React组件编写方式
【第26期】一文读懂React组件编写方式
28 0
|
3月前
|
资源调度 前端开发 JavaScript
React 的antd-mobile 组件库,嵌套路由
React 的antd-mobile 组件库,嵌套路由
40 0
|
2月前
|
存储 前端开发 中间件
React组件间的通信
React组件间的通信
15 1
|
2月前
|
前端开发 应用服务中间件 数据库
react服务端组件
react服务端组件
21 0
|
2月前
|
前端开发 JavaScript
快速上手React:从概述到组件与事件处理
快速上手React:从概述到组件与事件处理
|
3月前
|
前端开发 JavaScript API
React组件生命周期
React组件生命周期
74 1