基于Canvas+React的高性能Table表格

已于 2022-03-31 19:26:03 修改
阅读量4.8k 收藏 10
点赞数 6
分类专栏： Canvas React JavaScript 文章标签： javascript canvas react
于 2022-03-27 18:07:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Ray_Ning/article/details/123774596
版权

        本人之前擅长客户端GDI+，疫情期间偶然了解到Web前端的Canvas画布。突发奇想，遂一发不可收拾，于是就有了这么个产物--基于Canvas+React的高性能Table表格，可咸可甜。

        语言：JavaScript、TypeScript、ES6语法；

        框架：React；

        技术：Canvas画布；

        性能：以装载并渲染18列、N行为标准，压测有以下性能指标（附，测试硬盘状态不是太好，08年的老盘）。

1如需自适应列宽，30万行（30万，耗时24S）
2若无需自适应列宽，可达百万级（30万，耗时5S）
3自适应列宽模式，14500行，耗时1.5S
4无自适应列宽，14500行，耗时忽略不计

        特色：高性能、渲染流畅、操控顺滑、高扩展性（自定义派生列、单元格）、装载灵活、ES6语法、全程面向对象（class）、样式全部属性化（颜色、字体、尺寸、高度……抛弃繁杂的CSS样式表，降低入手门槛、维护复杂度）；

目前已经支持的功能：

1、序号列、颜色（矩形、圆形）、进度、复选框、复选框集、按钮集、金额线、普通单元格；

2、右键显示隐藏列；

3、拖拽列索引顺序；

4、拖拽列宽；

5、自适应列宽；

6、数据结构（列表结构、树结构）；

7、自定义行、单元格背景色、前景色；

8、自定义选中行、单元格的背景色；

9、焦点行背景色；

10、展开、折叠父子行；

11、表格数据排序；

12、表格内数据查找、定位；

13、数据选择模式（单选、多选--Shift辅助、鼠标滑动拖拽）；

14、快捷键：↑（向上选择单元格或行）、↓（向下选择单元格或行）、←（向左选择单元格）、→（向右选择单元格）、PageUp（上翻一个显示范围）、PageDown（下翻一个显示范围）、Home（定位首行）、End（定位末行）、Ctrl+C（复制选中内容）、Ctrl+F（表格内数据查找、定位）；

15、表格数据打印（目前针对页边距，还有点小瑕疵，需要手工调整一次页边距。大数据打印，尚且存有性能缺陷）；

16、表格数据导出（时间紧迫，目前仅支持Excel）；

17、多表头（支持表头合并）；

18、单元格合并；

19、表头数据筛选、过滤（类似Excel数据筛选）；

20、表格内容动态编辑（目前仅支持文本内容编辑，后续补充支持下拉框、日期框、数字框……）；

21、表内，行数据拖拽交换（同级交换、父子级交换）；

22、表外，行数据拖拽交换（不同表格之间，拖拽移除、或插入、或交换）；

23、自定义右键菜单；

24、行定位（定位可视范围外、未渲染区域的选中行，并主动更新滚动条，使目标行处于可视范围内）；

25、丰富的事件行为，总有一款适合您。单元格单击事件、行单击事件、行选择改变事件、表格勾选事件（行、列、单元格）、表格失焦事件、右键上下文选项单击事件……；

列表结构：

树结构：

右键菜单：

显示、隐藏列：

 列头数据筛选：

 

案例一：绑定Column、Row、Cell对象

import React, { useEffect, useState } from 'react';
import ColumnCollection from '@/EniacComponents/Table/Collections/ColumnCollection';
import RowCollection from '@/EniacComponents/Table/Collections/RowCollection';
import TableCore, { IFieldData } from '@/EniacComponents/Table/TableCore';
import Table from '@/EniacComponents/Table/Index';

const PageTableBindColumns = () => {
  const [columns, setColumns] = useState(new ColumnCollection());
  const [rows, setRows] = useState(new RowCollection());

  const BuildColumns = () => {
    let loColumns = columns;
    if (!loColumns || loColumns.Count === 0) {
      let loFieldList: IFieldData[] = [
        { Name: 'colSequenceColumn', Text: '', Type: 'SequenceColumn' },
        { Name: 'colCheckBoxColumn', Text: '', Type: 'CheckBoxColumn' },
        { Name: 'name', Text: '姓名', Type: 'Column' },
        { Name: 'age', Text: '年龄', Type: 'Column' },
        { Name: 'sex', Text: '性别', Type: 'Column' },
        { Name: 'items', Text: '功能清单', Type: 'CheckBoxListColumn' },
        { Name: 'address', Text: '地址', Type: 'Column' },
        { Name: 'assets_b', Text: '资产-本币', Type: 'AmountColumn' },
        { Name: 'assets_y', Text: '资产-原币', Type: 'AmountColumn' },
        { Name: 'controls', Text: '操作列', Type: 'ButtonColumn' },
      ];

      loColumns = new ColumnCollection();
      for (let liIndex = 0; liIndex < loFieldList.length; liIndex++) {
        let loCulumnData = loFieldList[liIndex];
        let loColumn = TableCore.CreateColumn(loCulumnData);
        loColumns.Add(loColumn);
      }

      setColumns(loColumns);
    }

    return loColumns;
  };

  const BuildRows = (poColumns: ColumnCollection) => {
    if (!rows || rows.length === 0) {
      let loDataList = [
        {
          name: '辛弃疾',
          age: 37,
          items: '喝酒,true;文臣,true;武将,true',
          sex: '男',
          address: '南宋',
          assets_b: 56832.215,
          assets_y: 56832.215,
          controls: '新增;修改;复制;审核;反审核;删除',
        },
        {
          name: '苏洵',
          age: 62,
          items: '喝酒,true;文臣,true;武将,false',
          sex: '男',
          address: '北宋',
          assets_b: 65912.32,
          assets_y: 65912.32,
          controls: '新增;修改;复制;审核;反审核;删除',
        },
        {
          name: '苏轼',
          age: 46,
          items: '喝酒,true;文臣,true;武将,true',
          sex: '男',
          address: '北宋',
          assets_b: 92615.68,
          assets_y: 92615.68,
          controls: '新增;修改;复制;审核;反审核;删除',
        },
        {
          name: '苏辙',
          age: 43,
          items: '喝酒,true;文臣,true;武将,true',
          sex: '男',
          address: '北宋',
          assets_b: 4689.36,
          assets_y: 4689.36,
          controls: '新增;修改;复制;审核;反审核;删除',
        },
        {
          name: '欧阳修',
          age: 78,
          items: '喝酒,true;文臣,true;武将,false',
          sex: '男',
          address: '北宋',
          assets_b: 9956592.36,
          assets_y: 9956592.36,
          controls: '新增;修改;复制;审核;反审核;删除',
        },
        {
          name: '王维',
          age: 66,
          items: '喝酒,true;文臣,true;武将,false',
          sex: '男',
          address: '大唐',
          assets_b: 6588.66,
          assets_y: 6588.66,
          controls: '新增;修改;复制;审核;反审核;删除',
        },
        {
          name: '杜甫',
          age: 48,
          items: '喝酒,true;文臣,true;武将,false',
          sex: '男',
          address: '大唐',
          assets_b: 6523698.99,
          assets_y: 6523698.99,
          controls: '新增;修改;复制;审核;反审核;删除',
        },
        {
          name: '李白',
          age: 63,
          items: '喝酒,true;文臣,true;武将,true',
          sex: '男',
          address: '大唐',
          assets_b: 98217365.922,
          assets_y: 98217365.922,
          controls: '新增;修改;复制;审核;反审核;删除',
        },
        {
          name: '李清照',
          age: 53,
          items: '喝酒,true;文臣,true;武将,true',
          sex: '女',
          address: '大宋',
          assets_b: 16591.52,
          assets_y: 16591.52,
          controls: '新增;修改;复制;审核;反审核;删除',
        },
        {
          name: '施耐庵',
          age: 56,
          items: '喝酒,true;文臣,true;武将,true',
          sex: '男',
          address: '大明',
          assets_b: 32336.12,
          assets_y: 32336.12,
          controls: '新增;修改;复制;审核;反审核;删除',
        },
        {
          name: '曹雪芹',
          age: 36,
          items: '喝酒,true;文臣,true;武将,true',
          sex: '男',
          address: '大清',
          assets_b: 615292.77,
          assets_y: 615292.77,
          controls: '新增;修改;复制;审核;反审核;删除',
        },
        {
          name: '罗贯中',
          age: 68,
          items: '喝酒,true;文臣,true;武将,true',
          sex: '男',
          address: '元末明初',
          assets_b: 6668214.53,
          assets_y: 6668214.53,
          controls: '新增;修改;复制;审核;反审核;删除',
        },
      ];

      let loRows = new RowCollection();
      loDataList.forEach((loRowData: object) => {
        let loRow = TableCore.CreateRow(poColumns, loRowData);
        if (loRow) {
          loRows.Add(loRow);
        }
      });

      setRows(loRows);
    }
  };

  const BuildTableData = () => {
    let loColumns = BuildColumns();
    BuildRows(loColumns);
  };

  useEffect(() => {
    BuildTableData();
  }, [columns, rows]);

  return (
    <Table
      Width={'100%'}
      Height={'100%'}
      Properties={{
        Draggable: true,
        ShowCheckBoxColumn: true,
        ShowSequenceColumn: true,
        ContextMenuVisible: true,
        ColumnHeight: 40,
      }}
      DataSource={null}
      Items={{ Columns: columns, Rows: rows }}
    ></Table>
  );
};

export default PageTableBindColumns;

案例二：绑定数据源、事件的使用

import React, { useEffect, useState } from 'react';
import Table from '@/EniacComponents/Table/Index';
import ToolStripView from '../Components/ToolStrip/ToolStripView';
import { IFieldData } from '@/EniacComponents/Table/TableCore';

const PageTableBindFields = () => {
  const [fieldList, setFieldList] = useState([] as IFieldData[]);
  const [dataList, setDataList] = useState([] as object[]);

  const BuildFieldList = () => {
    if (!fieldList || fieldList.length === 0) {
      let loFieldList: IFieldData[] = [
        { Name: 'name', Text: '姓名', Type: 'Column' },
        { Name: 'age', Text: '年龄', Type: 'Column' },
        { Name: 'items', Text: '功能清单', Type: 'CheckBoxListColumn' },
        { Name: 'sex', Text: '性别', Type: 'Column' },
        { Name: 'address', Text: '地址', Type: 'Column' },
      ];

      setFieldList(loFieldList);
    }
  };

  const BuildDataList = () => {
    if (!dataList || dataList.length === 0) {
      let loDataList: any[] = [
        { name: '辛弃疾', age: 37, items: '新增;修改;复制;删除;', sex: '男', address: '南宋' },
        { name: '苏洵', age: 62, items: '新增;修改;复制;删除;', sex: '男', address: '北宋' },
        { name: '苏轼', age: 46, items: '新增;修改;复制;删除;', sex: '男', address: '北宋' },
        { name: '苏辙', age: 43, items: '新增;修改;复制;删除;', sex: '男', address: '北宋' },
        { name: '欧阳修', age: 78, items: '新增;修改;复制;删除;', sex: '男', address: '北宋' },
        { name: '王维', age: 66, items: '新增;修改;复制;删除;', sex: '男', address: '大唐' },
        { name: '杜甫', age: 48, items: '新增;修改;复制;删除;', sex: '男', address: '大唐' },
        { name: '李白', age: 63, items: '新增;修改;复制;删除;', sex: '男', address: '大唐' },
        { name: '李清照', age: 53, items: '新增;修改;复制;删除;', sex: '女', address: '大宋' },
        { name: '施耐庵', age: 56, items: '新增;修改;复制;删除;', sex: '男', address: '大明' },
        { name: '曹雪芹', age: 36, items: '新增;修改;复制;删除;', sex: '男', address: '大清' },
        { name: '罗贯中', age: 68, items: '新增;修改;复制;删除;', sex: '男', address: '元末明初' },
        { name: '辛弃疾', age: 37, items: '新增;修改;复制;删除;', sex: '男', address: '南宋' },
        { name: '苏洵', age: 62, items: '新增;修改;复制;删除;', sex: '男', address: '北宋' },
        { name: '苏轼', age: 46, items: '新增;修改;复制;删除;', sex: '男', address: '北宋' },
        { name: '苏辙', age: 43, items: '新增;修改;复制;删除;', sex: '男', address: '北宋' },
        { name: '欧阳修', age: 78, items: '新增;修改;复制;删除;', sex: '男', address: '北宋' },
        { name: '王维', age: 66, items: '新增;修改;复制;删除;', sex: '男', address: '大唐' },
        { name: '杜甫', age: 48, items: '新增;修改;复制;删除;', sex: '男', address: '大唐' },
        { name: '李白', age: 63, items: '新增;修改;复制;删除;', sex: '男', address: '大唐' },
        { name: '李清照', age: 53, items: '新增;修改;复制;删除;', sex: '女', address: '大宋' },
        { name: '施耐庵', age: 56, items: '新增;修改;复制;删除;', sex: '男', address: '大明' },
        { name: '曹雪芹', age: 36, items: '新增;修改;复制;删除;', sex: '男', address: '大清' },
        { name: '罗贯中', age: 68, items: '新增;修改;复制;删除;', sex: '男', address: '元末明初' },
        { name: '辛弃疾', age: 37, items: '新增;修改;复制;删除;', sex: '男', address: '南宋' },
        { name: '苏洵', age: 62, items: '新增;修改;复制;删除;', sex: '男', address: '北宋' },
        { name: '苏轼', age: 46, items: '新增;修改;复制;删除;', sex: '男', address: '北宋' },
        { name: '苏辙', age: 43, items: '新增;修改;复制;删除;', sex: '男', address: '北宋' },
        { name: '欧阳修', age: 78, items: '新增;修改;复制;删除;', sex: '男', address: '北宋' },
        { name: '王维', age: 66, items: '新增;修改;复制;删除;', sex: '男', address: '大唐' },
        { name: '杜甫', age: 48, items: '新增;修改;复制;删除;', sex: '男', address: '大唐' },
        { name: '李白', age: 63, items: '新增;修改;复制;删除;', sex: '男', address: '大唐' },
        { name: '李清照', age: 53, items: '新增;修改;复制;删除;', sex: '女', address: '大宋' },
        { name: '施耐庵', age: 56, items: '新增;修改;复制;删除;', sex: '男', address: '大明' },
        { name: '曹雪芹', age: 36, items: '新增;修改;复制;删除;', sex: '男', address: '大清' },
        { name: '罗贯中', age: 68, items: '新增;修改;复制;删除;', sex: '男', address: '元末明初' },
        { name: '辛弃疾', age: 37, items: '新增;修改;复制;删除;', sex: '男', address: '南宋' },
        { name: '苏洵', age: 62, items: '新增;修改;复制;删除;', sex: '男', address: '北宋' },
        { name: '苏轼', age: 46, items: '新增;修改;复制;删除;', sex: '男', address: '北宋' },
        { name: '苏辙', age: 43, items: '新增;修改;复制;删除;', sex: '男', address: '北宋' },
        { name: '欧阳修', age: 78, items: '新增;修改;复制;删除;', sex: '男', address: '北宋' },
        { name: '王维', age: 66, items: '新增;修改;复制;删除;', sex: '男', address: '大唐' },
        { name: '杜甫', age: 48, items: '新增;修改;复制;删除;', sex: '男', address: '大唐' },
        { name: '李白', age: 63, items: '新增;修改;复制;删除;', sex: '男', address: '大唐' },
        { name: '李清照', age: 53, items: '新增;修改;复制;删除;', sex: '女', address: '大宋' },
        { name: '施耐庵', age: 56, items: '新增;修改;复制;删除;', sex: '男', address: '大明' },
        { name: '曹雪芹', age: 36, items: '新增;修改;复制;删除;', sex: '男', address: '大清' },
        { name: '罗贯中', age: 68, items: '新增;修改;复制;删除;', sex: '男', address: '元末明初' },
        { name: '辛弃疾', age: 37, items: '新增;修改;复制;删除;', sex: '男', address: '南宋' },
        { name: '苏洵', age: 62, items: '新增;修改;复制;删除;', sex: '男', address: '北宋' },
        { name: '苏轼', age: 46, items: '新增;修改;复制;删除;', sex: '男', address: '北宋' },
        { name: '苏辙', age: 43, items: '新增;修改;复制;删除;', sex: '男', address: '北宋' },
        { name: '欧阳修', age: 78, items: '新增;修改;复制;删除;', sex: '男', address: '北宋' },
        { name: '王维', age: 66, items: '新增;修改;复制;删除;', sex: '男', address: '大唐' },
        { name: '杜甫', age: 48, items: '新增;修改;复制;删除;', sex: '男', address: '大唐' },
        { name: '李白', age: 63, items: '新增;修改;复制;删除;', sex: '男', address: '大唐' },
        { name: '李清照', age: 53, items: '新增;修改;复制;删除;', sex: '女', address: '大宋' },
        { name: '施耐庵', age: 56, items: '新增;修改;复制;删除;', sex: '男', address: '大明' },
        { name: '曹雪芹', age: 36, items: '新增;修改;复制;删除;', sex: '男', address: '大清' },
        { name: '罗贯中', age: 68, items: '新增;修改;复制;删除;', sex: '男', address: '元末明初' },
      ];

      setDataList(loDataList);
    }
  };

  useEffect(() => {
    BuildFieldList();
    BuildDataList();
  }, [fieldList, dataList]);

  const table_CellClick = (e: any) => {
    console.log('table_CellClick', e.Cell.Text);
  };

  const table_RowClick = (e: any) => {
    console.log('table_RowClick', e.Row);
  };

  const table_SelectionChanged = (e: any) => {
    console.log('table_SelectionChanged', e.Row);
  };

  const table_CheckStateChanged = (e: any) => {
    if (e.Cell) {
      console.log('勾选单元格', e.Cell);
    } else if (e.Row) {
      console.log('勾选行', e.Row);
    } else if (e.Column) {
      console.log('勾选列', e.Column);
    }
  };

  const table_ContextItemClick = (e: any) => {
    console.log('table_ContextMenuItemClick', e.Item);
  };

  const table_GotFocus = (e: any) => {
    console.log('table_GotFocus', '获得焦点');
  };

  const table_LostFocus = (e: any) => {
    console.log('table_LostFocus', '失去焦点');
  };

  return (
    <div style={{ width: '100%', height: '100%' }}>
      <div>
        <ToolStripView ItemStyle={'ImageBeforeText'}></ToolStripView>
      </div>
      <div style={{ width: '100%', height: 'calc(100% - 43px)' }}>
        <Table
          Width={'100%'}
          Height={'100%'}
          Properties={{
            AllowDragRow: true,
            ShowCheckBoxColumn: true,
            ShowSequenceColumn: true,
            ContextMenuVisible: true,
            CustomContextItems: [
              { Name: 'CustomItem1', Text: '自定义选项1号' },
              { Name: 'CustomItem2', Text: '自定义选项2号' },
            ],
          }}
          DataSource={{ FieldList: fieldList, DataList: dataList }}
          Items={null}
          OnCellClick={table_CellClick}
          OnRowClick={table_RowClick}
          OnSelectionChanged={table_SelectionChanged}
          OnCheckStateChanged={table_CheckStateChanged}
          OnContextItemClick={table_ContextItemClick}
          OnGotFocus={table_GotFocus}
          OnLostFocus={table_LostFocus}
        ></Table>
      </div>
    </div>
  );
};

export default PageTableBindFields;

本人对GDI+、Canvas相当痴迷，并小有成就。欢迎咨询、洽谈，相互学习、互相进步。 

使用React和Canvas绘制大数据表格的JavaScript
python_bug262的博客
09-21 278
在这篇文章中，我们将探讨如何使用React和Canvas来绘制大数据表格。使用Canvas可以提供更好的性能和用户体验，因为它可以直接操作像素，并且能够处理大量数据而不会导致性能问题。通过使用Canvas，我们可以高效地处理大量数据并提供良好的用户体验。在上面的代码中，我们首先导入了React、useEffect和useRef，以及canvas库。然后，我们计算每个单元格的宽度和高度，并使用嵌套的循环遍历。最后，我们将canvas元素作为组件的返回值，并将。的二维数组，包含要展示的数据。
React技术原理与代码开发实战：React的表格库ReactTable
AI天才研究院
11-01 757
作者：禅与计算机程序设计艺术 1.背景介绍 React Table是基于React的开源可复用的数据表格组件，能够轻松实现数据分页、排序、过滤、搜索等功能。它的设计思想是基于React Hooks API，能够帮助开发者快速构建复杂的表格。本文将对React Table的基本概念、主要特性和使用方式
react-reactcanvas一个高性能canva渲染的React组件
08-15
react-canvas 一个高性能canva渲染的React组件
react-virtual-table:高性能虚拟加载表格，支持表头缩放
08-04
React-virtual-table 虚拟加载表格 轻量级实现不到100行代码 支持表格宽度拖拽调节 demo 源码见github snapshot
React 实现动态数据表格组件（包含排序、分页、过滤）
最新发布
安
03-30 511
React 实现动态数据表格组件（包含排序、分页、过滤）
react-BaseTable是一个react表格组件能够以高性能和灵活性的显示大型数据集
08-15
BaseTable是一个react表格组件，能够以高性能和灵活性的显示大型数据集
CanvasDataTable:基于画布的数据表性能高，内存低
06-26
画布数据表 基于画布的数据表。 数据表是指显示表格数据的地方。 基于画布意味着它具有高性能和低内存 - 即使是数百万行！ 仍处于早期阶段，目前它是概念验证。
推荐：React高性能表格组件——Fixed Data Table 2
gitblog_00053的博客
05-14 719
推荐：React高性能表格组件——Fixed Data Table 2 fixed-data-table-2 A React table component designed to allow presenting millions of rows of data. ...
react-base-table：react表组件，用于显示具有高性能和灵活性的大型数据集
02-05
React基表 BaseTable是一个React表组件，可显示具有高性能和灵活性的大型数据集 安装 # npm npm install react-base-table --save # yarn yarn add react-base-table 用法 import BaseTable , { Column } from 'react-base-table' import 'react-base-table/styles.css' // Important: if you fail to import react-base-table/styles.css then // BaseTab
react-reactpdf使用React创建PDF文件
08-14
5. **表格和列表**：通过`<Table>`和`<List>`组件，你可以方便地创建复杂的表格和列表结构，这对于报告和数据分析尤为重要。 6. **交互性**：虽然PDF主要是静态的，但`react-pdf`允许添加一些基本的交互元素，如...
Glide-data-grid：React高性能网格组件特性解析
资源摘要信息:"glide-data-grid是一个高性能的React网格组件，它提供了一个用于数据展示和管理的强大解决方案。组件基于HTML Canvas构建，支持处理数百万行数据，同时保证了流畅的滚动体验。它支持多种单元格类型，...
react-spreadsheet:用于 React 的简单、可定制且高性能的电子表格
07-24
React电子表格 用于 React 的简单、可定制且高性能的电子表格。 npm install react-spreadsheet 要么 yarn add react-spreadsheet 特征 简单直接的 API 专注于常见用例，同时保持灵活性 高性能（尚未虚拟化） 实现 Just Components:trade_mark: 用法 入门 import React from "react" ; import Spreadsheet from "react-spreadsheet" ; const data = [ [ { value : "Vanilla" } , { value : "Chocolate" } ] , [ { value : "Strawberry" } , { value : "Cookies" } ] , ] ; const MyComponent = ( ) => <
react-spreadsheet-grid：类似于Excel的网格组件，用于带有自定义单元格编辑器，高性能滚动和可调整大小的列的React
02-05
React电子表格网格 类似于Excel的网格组件，用于带有自定义单元格编辑器，高性能滚动和可调整大小的列的React 主要特点 这是一个类似于Excel的Spreadsheet Grid组件，它支持： :check_mark_button: 自定义单元格编辑器（使用内置的Input and Select或任何其他组件）和标题内容 :check_mark_button: 性能滚动所需的行数 :check_mark_button: 可调整大小的列 :check_mark_button: 通过鼠标和键盘控制 :check_mark_button: 灵活设置残疾细胞 :check_mark_button: 延迟加载支持 :check_mark_button: 可定制CSS样式 :check_mark_button: 挂钩兼容 目录 现场游乐场 有关运行中的网格的示例，您可以在自己的计算机上运行演示： 克隆此存储库 npm install npm run sto
react-ReactTable一个快速轻量级固执己见的React数据表格
08-15
React Table - 一个快速、轻量级、固执己见的React数据表格
canvas-table:在Canvas中快速执行表格
05-02
帆布桌 Canvas中可自定义的小型快速表实现，带有字符串截断支持。 同时支持浏览器和 演示版 屏幕截图 安装 npm i canvas-table 用法 在NodeJS中的用法 import { CanvasTable , CTConfig } from "canvas-table" ; import { createCanvas } from "canvas" ; const canvas = createCanvas ( 640 , 250 ) ; const config : CTConfig = { columns , data } ; const ct = new CanvasTable ( canvas , config ) ; await ct . generateTable ( ) ; await ct . renderToFile ( "test-table.png"
tabtoy：高性能表格数据导出器
02-03
tabtoy v3 高级表格数据导出工具 特性 支持Xlsx / CSV作为表格数据混合输入 支持JSON / Golang / C＃/ Java / Lua /二进制二进制文件，数据，类型输出 自动单元格数据格式检查，精确到单元格的报错 支持预定义枚举，可使用中文枚举类型 支持表细分，支持多人协作 支持KV配置表，方便将表格作为配置文件 多核并发导出，缓存加速，上百文件秒级导出 继承历程 2020年6月：tabtoy v3支持Xlsx / CSV混合导出 新的表格格式 开拓代码 2016年8月：第六代导出器，tabtoy v2调整为以电子表格为中心的方式，支持v1 90％常用功能 增加：所有导出文件替换1个文件，提高加载重新速度 增加：二进制合并生成（第五代导出器需要使用2个工具才能完成） 增加：C＃原始代码导出和索引创建，无需protobuf支持 增加：proto格式导出，支持v2，v3格式 开拓代码，逐步加快速度 2016年3月：第五代导出器，tabtoy v1在四代基础上重构，开源，支持并发转化 2015年：第四代导出器，基于Golang导出器，增加ID重复检查，排列格的多重写
设计高性能的表格控件
网站开发初中级代码参考-转载
02-21 157
简单的实现 一行数据创建一行显示。这种方法实现起来比较简单，数据与界面行一一对应，数据操作，表格滚动也非常方便，所以，大多数界面控件都采用这种实现方式。 但是，在大数据量的时候这种方式就显得非常的低效，因为创建了大量在显示区域外的行。要知道，创建、显示界面元素是非常耗计算资源的。 高效的实现 知道了上述方式的不足后，就能设计优化的方案了。因为界面元素是影响性能的大户，所以，改良后的方式是，...
前端高性能表格推荐（虚拟表格，大数据表格）
m0_69896158的博客
03-12 1457
高性能的表格控件
开源高性能多维数据表格VTable
xuweilin的博客
08-27 2451
VTable多维表格是VisActor可视化体系中的一款高性能表格组件库，它基于可视化渲染引擎VRender进行封装，专为处理复杂的多维数据分析而设计。VTable支持百万级数据的快速运算与渲染，能够帮助用户更好地展示和分析数据，并从中发现有价值的信息。
评论 11
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值