每个数据密集型产品都有那样一张表格。
起初,它看起来很简单:
“只需在行中显示这些记录。”
随后,各种需求接踵而至。
用户能否编辑单元格?固定列?过滤十万行数据?无需鼠标即可导航?导出为 CSV 格式?添加公式?在 Angular 框架中使用它吗?
在某个阶段,这张表格不再仅仅是一张表格。它变成了你应用程序内部的一个小型应用。
正是这个反复出现的问题,促使我构建了 Ace Grid,这是一个具备电子表格级别功能的 JavaScript 数据网格,其核心版本免费且采用 MIT 许可证。
我想要解决的问题
团队通常面临两个不完美的选择:
- 不断向基础表格添加功能,直到它变得难以维护。
- 在产品实际上并不需要所有功能之前,就采用一个庞大的网格平台。
Ace Grid 采取渐进式方法:从实用的数据网格基础开始,仅当你的使用场景需要时,才添加电子表格功能和服务器端支持能力。
第一个示例中没有复杂的功能迷宫。无需在第一天就采用整个平台。只是一个可用的网格。
免费核心版包含的内容
@ace-grid/core 是免费的 React 运行时。它包含了那些往往能将表格转变为真正产品工作流的功能:
- 内联单元格编辑和键盘导航
- 单元格和区域选择
- 排序、过滤、搜索和分页
- 列调整大小、重新排序和固定
- 针对大型数据集的虚拟化渲染
- CSV 导入和导出
- 主题和自定义单元格渲染器
- 可序列化的、感知架构的网格状态
该软件包采用 MIT 许可证,核心源代码在 GitHub 上公开。
最小的实用示例
安装核心版及其 React 对等依赖项:
npm install @ace-grid/core react react-dom
然后为网格提供行数据、列定义和高度:
import { Grid } from "@ace-grid/core";
const rows = [
{ id: "1", data: { company: "HelioBank", segment: "Enterprise" } },
{ id: "2", data: { company: "Northstar AI", 免责声明:本文内容来自互联网,该文观点不代表本站观点。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,请到页面底部单击反馈,一经查实,本站将立刻删除。