vTable
<p>VTable: 不只是高性能的多维数据分析表格，更是行列间创作的方格艺术家！免费，开源，基于Canvas 的 百万数据秒级渲染前端表格组件库</p>
<p>VTable是字节跳动开源可视化解决方案 VisActor 的组件之一。</p>
<p>在现代应用程序中，表格组件是不可或缺的一部分，它们能够快速展示大量数据，并提供良好的可视化效果和交互体验。VTable是一款基于可视化渲染引擎VRender的高性能表格组件库，为用户提供卓越的性能和强大的多维分析能力，以及灵活强大的图形能力。</p>
<h2 style="font-size: 20px;">快速上手</h2>
<h2 style="font-size: 20px;">获取 VTable</h2>
<p>你可以通过以下几种方式获取 VTable。</p>
<h3 style="font-size: 18px;">使用 NPM 包</h3>
<p>首先，你需要在项目根目录下使用以下命令安装 VTable：</p>
<div class="highlight">
<pre><code class="language-text"># 使用 npm 安装
npm install @visactor/vtable
# 使用 yarn 安装
yarn add @visactor/vtable
</code></pre>
</div>
<h3 style="font-size: 18px;">使用 CDN</h3>
<p>你还可以通过 CDN 获取构建好的 VTable 文件。</p>
<div class="highlight">
<pre><code class="language-text">&lt;script src="https://unpkg.com/@visactor/vtable/dist/vtable.min.js"&gt;&lt;/script&gt;
</code></pre>
</div>
<h2 style="font-size: 20px;">引入 VTable</h2>
<h3 style="font-size: 18px;">通过 NPM 包引入</h3>
<p>在 JavaScript 文件顶部使用 <code>import</code> 引入 VTable：</p>
<div class="highlight">
<pre><code class="language-text">import * as VTable from '@visactor/vtable';
or
import {ListTable, PivotTable, TYPES, themes} from '@visactor/vtable';
</code></pre>
</div>
<h3 style="font-size: 18px;">使用 script 标签引入</h3>
<p>通过直接在 HTML 文件中添加 <code>&lt;script&gt;</code> 标签，引入构建好的 vtable 文件：</p>
<div class="highlight">
<pre><code class="language-text">&lt;script src="https://unpkg.com/@visactor/vtable/dist/vtable.min.js"&gt;&lt;/script&gt;&lt;script&gt;const tableInstance = new VTable.ListTable(option);&lt;/script&gt;
</code></pre>
</div>
<h2 style="font-size: 20px;">绘制一个简单的表格</h2>
<p>在绘图前我们需要为 VTable 准备一个具备高宽的 DOM 容器。</p>
<div class="highlight">
<pre><code class="language-text">&lt;body&gt; &lt;div id="tableContainer" style="width: 600px;height:400px;"&gt;&lt;/div&gt;&lt;/body&gt;
</code></pre>
</div>
<p>接下来，我们创建一个 <code>Vtable.ListTable</code> 实例，传入表格配置项：</p>
<div class="highlight">
<pre><code class="language-text">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);</code></pre>
</div>
<p>效果如下：</p>
<figure data-size="normal">
<div><img style="display: block; margin-left: auto; margin-right: auto;" src="https://img.medsci.cn/aisite/tinymce/2025/06/10/1749584916_huI3nVQ4qq.jpg"></div>
</figure>
