導讀

VTable: 不只是高性能的多維數據分析表格，更是行列間創作的方格藝術家！

VTable是字節跳動開源可視化解決方案 VisActor 的組件之一。

在現代應用程序中，表格組件是不可或缺的一部分，它們能夠快速展示大量數據，並提供良好的可視化效果和交互體驗。VTable是一款基於可視化渲染引擎VRender的高性能表格組件庫，爲用戶提供卓越的性能和強大的多維分析能力，以及靈活強大的圖形能力。

快速上手

獲取 VTable

你可以通過以下幾種方式獲取 VTable。

使用 NPM 包

首先，你需要在項目根目錄下使用以下命令安裝 VTable：

 
bash複製代碼

# 使用 npm 安裝
npm install @visactor/vtable

# 使用 yarn 安裝
yarn add @visactor/vtable

使用 CDN

你還可以通過 CDN 獲取構建好的 VTable 文件。

 
xml複製代碼

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

引入 VTable

通過 NPM 包引入

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

 
javascript複製代碼

import * as VTable from '@visactor/vtable';

or

import {ListTable, PivotTable, TYPES, themes}  from '@visactor/vtable';

使用 script 標籤引入

通過直接在 HTML 文件中添加 <script> 標籤，引入構建好的 vtable 文件：

 
xml複製代碼

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

繪製一個簡單的表格

在繪圖前我們需要爲 VTable 準備一個具備高寬的 DOM 容器。

 
css複製代碼

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

接下來，我們創建一個 Vtable.ListTable 實例，傳入表格配置項：

 
js複製代碼

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提供了多種單元格呈現形式，可以滿足不同的數據展示需求，幫助用戶更好地呈現和分析數據。

具體支持的單元格呈現形式有：

'text'文本類型：用於展示文字數據。同時支持多種樣式和格式，如字體大小、顏色、加粗、斜體、自動換行等，也可對數據進行格式化，來滿足不同的排版需求。
'link'鏈接類型：將數據轉化爲超鏈接，點擊鏈接可以跳轉到指定的網頁或文件
'image'圖像類型：將有效url轉化爲圖像展示，如照片、圖標等。
'video'視頻類型：將有效url轉化爲視頻展示，如YouTube視頻、本地視頻文件等。
'sparkline'迷你圖類型：將數據轉化爲小型圖表展示，如折線圖、面積圖，在表格中展示數據趨勢和變化。
'progressbar'進度條類型：將數據轉化爲進度條展示，可自定義進度條顏色、大小和文本，可以方便地在表格中展示任務進度和狀態。
'chart'圖表類型：將數據轉化爲VChart圖表在單元格中展示。
自定義渲染：如果想要單元格呈現更爲豐富的內容或佈局形態，還可以通過自定義渲染來實現。

全面的交互能力

VTable提供了豐富全面的交互能力。

表格交互

交互類型包括：選中單元格，hover高亮，拖拽換位，排序，凍結列，調整列寬等。

組件級交互

交互類型包括：滾動條滾動，tooltip提示，dropdown下來菜單彈出等。

如果上述交互還不能滿足需求，可以結合event事件監聽來自定義交互行爲。

靈活多樣的UI風格

VTable支持多種主題和樣式，可以根據用戶的需求進行自定義設置，以滿足不同的視覺效果。

多套theme主題

單元格style

除了使用theme來設置樣式外，還可以通過列維度或者行維度的配置style來設置單元格樣式，可以達到單元格級別自定義樣式的靈活程度。

用戶CASES

結語

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…

作者：玄魂
鏈接：https://juejin.cn/post/7287214029449805836
來源：稀土掘金
著作權歸作者所有。商業轉載請聯繫作者獲得授權，非商業轉載請註明出處。

VTable——不只是高性能的多維數據分析表格

導讀