最近在 GitHub 上刷到一个挺有意思的东西:Glide Data Grid。 基于 Canvas 渲染,号称能流畅扛住百万行数据,这波我是真有点好奇地去看了看。
它的思路其实很简单也很务实: 不要什么都画,只画“你现在真的看得见的那一块”。 按需渲染可视区域,配合浏览器原生滚动,滚动条甩到底那种,依旧顺滑,不再是 PPT 播放现场。
更重要的是,它不是那种“性能是有了,但体验像个 Demo”的极简组件。 单元格类型给得挺全:文本、数字、勾选、多行、图标之类,常见场景基本都能兜住。 还内置了编辑能力,直接在表格里改数据,交互上跟传统 UI 差不多,不需要你自己再造一层。
表格的交互细节,也做得比较对味: 列支持拖拽调整顺序、拉宽拉窄,行高可以变化,单元格能合并。 选中这块也是一整套:单选、多选行列、单元格选区,都能玩,做管理后台、报表那类非常顺手。
如果你家业务比较花,UI 设计又爱整点花活,那 Glide Data Grid 也留了口子。 它允许你完全自定义单元格渲染逻辑,直接用 Canvas 去画,文字、图形、小可视化都能往里塞。 简单说,就是给你一块高性能画布,随便画,但滚动、选择这些底层通通帮你打好底座。
这种大数据表格离不开两个刚需:搜索和冻结列。 Glide 这边也都考虑到了: 内置搜索能力,左边关键字段还能冻结,右边随便拖动,用户不用来回找列,体验上挺像桌面应用。
兼容性也算给足了面子。 官方说是支持 React 16 到 19 全版本,这对老项目、存量系统很友好,不用为一个表格大改技术栈。
现在前端做业务,经常会被一句话拿捏: “这个表我们要支持导入 50 万行哈,滚动要像 Excel 一样流畅。” 以前听完只能心里默念一句阿弥陀佛,现在多了一个可以直接甩过去的方案,起码底气足一点。
如果你项目里正好有大数据量表格在卡、在抖、在掉帧,不妨找个时间拉个分支,把 Glide Data Grid 接进来跑一跑。 真香不香,用过一次就知道。