vTable

字节跳动表格方格艺术家

VTable: 不只是高性能的多维数据分析表格，更是行列间创作的方格艺术家！免费，开源，基于Canvas 的百万数据秒级渲染前端表格组件库

VTable是字节跳动开源可视化解决方案 VisActor 的组件之一。

在现代应用程序中，表格组件是不可或缺的一部分，它们能够快速展示大量数据，并提供良好的可视化效果和交互体验。VTable是一款基于可视化渲染引擎VRender的高性能表格组件库，为用户提供卓越的性能和强大的多维分析能力，以及灵活强大的图形能力。

快速上手

获取 VTable

你可以通过以下几种方式获取 VTable。

使用 NPM 包

首先，你需要在项目根目录下使用以下命令安装 VTable：

# 使用 npm 安装
npm install @visactor/vtable
# 使用 yarn 安装
yarn add @visactor/vtable

使用 CDN

你还可以通过 CDN 获取构建好的 VTable 文件。

<script src="https://unpkg.com/@visactor/vtable/dist/vtable.min.js"></script>

引入 VTable

通过 NPM 包引入

在 JavaScript 文件顶部使用 import 引入 VTable：

import * as VTable from '@visactor/vtable';
or
import {ListTable, PivotTable, TYPES, themes}  from '@visactor/vtable';

使用 script 标签引入

通过直接在 HTML 文件中添加 <script> 标签，引入构建好的 vtable 文件：

<script src="https://unpkg.com/@visactor/vtable/dist/vtable.min.js"></script><script>const tableInstance = new VTable.ListTable(option);</script>

绘制一个简单的表格

在绘图前我们需要为 VTable 准备一个具备高宽的 DOM 容器。

<body>  <div id="tableContainer" style="width: 600px;height:400px;"></div></body>

接下来，我们创建一个 Vtable.ListTable 实例，传入表格配置项：

const records = [
{      
"230517143221027": "CA-2018-156720",      
"230517143221030": "JM-15580",      
"230517143221032": "Bagged Rubber Bands",      
"230517143221023": "Office Supplies",      
"230517143221034": "Fasteners",      
"230517143221037": "West",      
"230517143221024": "Loveland",      
"230517143221029": "2018-12-30",      
"230517143221042": "3",      
"230517143221040": "3.024",      
"230517143221041": "-0.605"  },  
{      
"230517143221027": "CA-2018-115427",      
"230517143221030": "EB-13975",      
"230517143221032": "GBC Binding covers",
      "230517143221023": "Office Supplies", 
           "230517143221034": "Binders",
                 "230517143221037": "West",
                       "230517143221024": "Fairfield",      
                       "230517143221029": "2018-12-30",      
                       "230517143221042": "2",      
                       "230517143221040": "20.72",      
                       "230517143221041": "6.475"  },  
                       (...)];
                       const columns =[
                           {
                                   "field": "230517143221027",        
                                   "title": "Order ID",        
                                   "width": "auto"    },
                                       {
                                               "field": "230517143221030",        
                                               "title": "Customer ID",        
                                               "width": "auto"    },   
                                               (...)
                           ];
  const option = {  records,  columns,  widthMode:'standard'};
// 创建 VTable 实例
const tableInstance = new VTable.ListTable(document.getElementById(CONTAINER_ID), option);

效果如下：