基于 Canvas 的高性能表格插件

• 基于 @gluttons 生态及 Typescript
• 作者：GT<[email protected]>
• 日期：2025-07-30

安装使用

• npm i @gluttons/tablex -S

<div id="container"></div>

import { TableX } from '@gluttons/tablex';

/**
 * 原始 tablex 对象，核心
 */
const tablex = new Tablex({
    /**
     * 模块配置
     */
    modules: [{
        /**
         * 表格数据
         */
        data: [
            // 行
            ['分类', '名称', '数量'],
            [{
                value: '大类1',
                // 跨越两行
                rowspan: 2
            }, '小分类1', 10],
            ['小分类2', 15]
        ]
    }],
});

const {
    /**
     * 视图实例对象
     */
    view,
    /**
     * 绘制钩子
     * @description 调用可强制重绘
     */
    draw,
    /**
     * 卸载钩子
     * @description 卸载此视图实例
     */
    unmount,
} = tablex.mount(container);

上面代码显示以下效果

使用编辑器

import { TableX, Editor } from '@gluttons/tablex';

const tablex = new TableX({
    // ...省略代码
});

const editor = new Editor(container, tablex);
tablex.mount(editor);