以 antd Table组件为基准，在满足中台 Table的展示的基础上；
从实现原理和对大数据量的渲染上，对比 Table 高性能的解决方案。

Table渲染原理

  • DOM
    • 优化点：虚拟滚动
  • Canvas
  • 类似 Excel 的数据网格组件
    • Spreadsheets 电子表格

数据网格是一个表格组件，通常用于加载、展示和操作一个大型数据集；
通常带有扩展功能，如数据过滤、排序、选择、流媒体、聚合、高度可配置的列和行等，
帮助用户更好地阅读和处理大量的数据集，
专业的数据网格甚至嵌入了其他组件，如图表，并实现了表内编辑。由于它们处理的数据量巨大，数据网格在构建时往往考虑到效率和精简性能。

DOM Table

  1. antd-table，不支持虚拟滚动，大数据卡顿
    1. 底层依赖 rc-table
    2. antd-table封装 https://npm.io/package/ant-virtual-table
  2. ali-react-table，支持虚拟滚动，要自定义css
    1. 很多虚拟滚动的表格都是用 div模拟 table布局，这个库用的是 table布局
  3. TanStack/table https://github.com/TanStack/table
  4. react-table，支持虚拟滚动，css样式要自定义
    1. 不支持 sticky固定列
  5. 表格大数据渲染
    1. react-data-grid

airtable

https://airtable.com
airtable 演示：https://airtable.com/shrNLOmMbnwtr2tqN/tblI89Jwk2X2QAZlu/viwNd9KUv2cwad9QM
airtable 类似的 grid 技术库 ag-grid 演示：https://www.ag-grid.com/example
为啥 ag-grid 能支持 100 万条数据的 grid，
对象池技术：https://element-plus.org/zh-CN/component/tree-v2.html

airtable适用场景

  • 数据量在 1万以下
  • 受众精通 Excel

image.png
AirTable 打造自己专属的个人数据库
https://www.yuque.com/arvinxx/note/airtable

image.png

ag-grid

https://www.ag-grid.com/example
https://airtable.com/shrNLOmMbnwtr2tqN/tblI89Jwk2X2QAZlu/viwNd9KUv2cwad9QM
image.png
image.png
https://www.163.com/dy/article/H1ICJ3560539KWTD.html

react-data-grid

https://github.com/adazzle/react-data-grid
在线案例 https://adazzle.github.io/react-data-grid/#/common-features
image.png

nocoBase

快速生成页面
lowcode 重塑中后台
noco 演示：https://demo-cn.nocobase.com/new
noco 依赖的核心 formily 搭建演示：https://designable-antd.formilyjs.org
image.png

页面搭建选择

  • json Schema
  • 不能用 jsx，因为不好存储，无法引用别的库
  • 避免栅格拖拽，因为能拖拽出奇怪的问题
  • 事件流解决方案

canvas 表格

  1. canvas-spreadsheet
  2. S2 交叉表

canvas 渲染 grid 演示，反正就是绘图 https://harlen.cn/canvas-spreadsheet
image.png

S2 交叉表

spreadjs Canvas

spreadjs 葡萄城
通过 Canvas绘图实现 Cell

维格表

https://vika.cn

react bricks

https://reactbricks.com/