https://github.com/handsontable/handsontable
react 版本 文档 https://handsontable.com/docs/react-data-grid/installation
类似 Excel 的数据网格，支持丰富的展现和交互，以及多样的单元格展现和配置

  1. pnpm add handsontable @handsontable/react

image.png
handsontable 案例

商业收费版

  1. 自定义列标题和菜单
  2. 总结
  3. 列和行的隐藏、移动和冻结
  4. 列过滤、排序、分组
  5. 列和行的虚拟化
  6. 自定义行标题
  7. 行排序、预填充和修剪
  8. 剪贴板功能
  9. 选择
  10. 单元格的合并和渲染
  11. 单元格编辑器和验证器
  12. 评论
  13. 多种单元格类型，如日期、密码、复选框等
  14. CSV和其他文件类型的导出
  15. 国际化

Handsontable

image.png

  1. import { HotTable } from '@handsontable/react';
  2. import { registerAllModules } from 'handsontable/registry';
  3. import 'handsontable/dist/handsontable.full.min.css';
  5. // register Handsontable's modules
  6. registerAllModules();
  8. const Handsontable = () => {
  9.   return (
  10.     <HotTable
  11.       data={[
  12.         ['', 'Tesla', 'Volvo', 'Toyota', 'Ford'],
  13.         ['2019', 10, 11, 12, 13],
  14.         ['2020', 20, 11, 14, 13],
  15.         ['2021', 30, 15, 12, 13]
  16.       ]}
  17.       rowHeaders={true}
  18.       colHeaders={true}
  19.       height="auto"
  20.       // for non-commercial use only
  21.       licenseKey="non-commercial-and-evaluation"
  22.     />
  23.   )
  24. };
  26. export default Handsontable;