VTable: 不只是高性能的多维数据分析表格，更是行列间创作的方格艺术家！
VTable是字节跳动开源可视化解决方案 VisActor 的组件之一。
在现代应用程序中，表格组件是不可或缺的一部分，它们能够快速展示大量数据，并提供良好的可视化效果和交互体验。VTable是一款基于可视化渲染引擎VRender的高性能表格组件库，为用户提供卓越的性能和强大的多维分析能力，以及灵活强大的图形能力。
你可以通过以下几种方式获取 VTable。
首先，你需要在项目根目录下使用以下命令安装 VTable：
# 使用 npm 安装
npm install @visactor/vtable
# 使用 yarn 安装
yarn add @visactor/vtable
你还可以通过 CDN 获取构建好的 VTable 文件。
<script src="https://unpkg.com/@visactor/vtable/dist/vtable.min.js"></script>
在 JavaScript 文件顶部使用 import 引入 VTable：
import * as VTable from '@visactor/vtable';
or
import {ListTable, PivotTable, TYPES, themes} from '@visactor/vtable';
通过直接在 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);
效果如下：
详细代码见：visactor.io/vtable/guid…
VTable采用可视化渲染引擎VRender进行封装，提供了卓越的性能和渲染效果。VTable支持百万级数据的秒级渲染，可以快速展示大量数据。下面我们来看一个例子，展示VTable的快速渲染能力。也可转到官网亲自体验：visactor.io/vtable/demo…
VTable提供了三种主要的表格形态，包括基本表格、多维透视表格和透视组合图。可以满足不同用户的需求，帮助用户更好地展示和分析数据，并从中发现有价值的信息。
同时基本表格可以形变为转置****表格，还可以用树形结构展示层次关系：
透视表的行表头也可用树形结构展示维度间层级关系：
VTable提供了多种单元格呈现形式，可以满足不同的数据展示需求，帮助用户更好地呈现和分析数据。
具体支持的单元格呈现形式有：
VTable提供了丰富全面的交互能力。
交互类型包括：选中单元格，hover高亮，拖拽换位，排序，冻结列，调整列宽等。
交互类型包括：滚动条滚动，tooltip提示，dropdown下来菜单弹出等。
如果上述交互还不能满足需求，可以结合event事件监听来自定义交互行为。
VTable支持多种主题和样式，可以根据用户的需求进行自定义设置，以满足不同的视觉效果。
除了使用theme来设置样式外，还可以通过列维度或者行维度的配置style来设置单元格样式，可以达到单元格级别自定义样式的灵活程度。
VTable是一款基于可视化渲染引擎VRender的高性能表格组件库，提供了卓越的性能和强大的多维分析能力，以及灵活强大的图形能力。VTable支持百万级数据的快速运算和渲染，可以自动分析和呈现多维数据，无缝融合VChart，为用户提供了强大的数据分析和可视化能力。VTable提供了丰富的功能，包括多种表格类型、单元格内容类型、交互功能、主题、样式、自定义渲染等，以满足用户的各种需求。如果你正在寻找一款高效、易用的数据表格库，VTable是一个不错的选择！
我们愿意和数据产品相关产品经理、设计师、研发同学一起做更加深入的探讨和交流：
联系方式：
1）VisActor 微信订阅号留言（可以通过订阅号菜单加入微信群）：
2）VisActor Discord 社群：discord.gg/3wPyxVyH6m
3）VisActor 官网：www.visactor.io/vtable
4）欢迎Star github.com/visactor/vt…