????????VTable源于VisActor體系，該體系是從字節跳動大量可視化場景沉淀而來，旨在提供面向敘事的智能可視化解決方案。VisActor包括渲染引擎、可視化語法、數據分析組件、圖表組件、表格組件、GIS組件、圖可視化組件、智能組件等多個模塊，以及周邊生態組成的可視化解決方案。VTable作為其中的表格組件庫，基于可視化渲染引擎VRender進行封裝，專為處理復雜的多維數據分析而設計。

一、應用場景與優勢

????????VTable廣泛應用于各種需要數據分析和展示的場景中，如企業報表、數據分析平臺、商業智能（BI）工具等。通過VTable，用戶可以輕松構建出復雜的多維表格，實現數據的快速分析和可視化展示。其優勢在于高性能、多維分析能力以及靈活的配置與定制選項，這些特點使得VTable成為數據分析師和開發人員在進行復雜數據分析時的有力工具。

二、表格構成與配置

????????VTable的表格由五部分組成，分別是行表頭、列表頭、角表頭、body數據單元格和框架。不同形態的表格在構成上可能有所差異，但基本結構相似。

• 行表頭：顯示在表格左側，主要顯示行維度信息的描述。
• 列表頭：位于表格頂部，主要展示列維度信息的描述。
• 角表頭：位于表格的左上角，用于顯示行表頭和列表頭的交集信息。
• body數據單元格：表格最主要的顯示數據的部分，展示了表格內的詳細數據。
• 框架：表格的整體外邊框，可以通過配置來改變其樣式。

????????在使用VTable構建多維表格時，用戶需要配置相應的參數。例如，通過“rows”定義行維度的字段，通過“columns”定義列維度的字段，通過“indicators”定義要展示的指標（如銷售額、成本等），通過“dataConfig”配置數據處理的相關參數（如聚合規則、排序規則、過濾規則等），以及通過“theme”配置表格的整體樣式（包括邊框、顏色、字體等）。

三、快速上手

????????VTable 是一款簡單易用、高性能、可視化類型豐富的前端可視化表格庫。本章將介紹如何使用 VTable 繪制一個簡單的基本表格。

3.1 獲取VTable

1）使用NPM包

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

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

2）使用CDN

????????可以通過 CDN 獲取構建好的 VTable 文件。代碼如下：

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

3.2 引入VTable

1）通過 NPM 包引入

????????在 JavaScript 文件頂部使用 import 引入 VTable，代碼如下：

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

2）使用 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 容器，保證容器的寬高值為整數，VTable 內部邏輯中會用到容器的 offsetWidth、offsetHeight、clientWidth、clientHeight 屬性，如果容器的 width 和 height 為小數會造成取值有誤差，可能產生表格抖動問題。

4.1 繪制基本表格

? ? ? ? 這里使用的是Vue2的開發環境，要使用npm包安裝和引入VTable，可以按照上述的NPM方式進行操作。

4.1.1 模擬數據

? ? ? ? 在Vue項目中創建data.json文件，用于存儲表格的模擬數據。代碼如下：

[{"id": 1,"orderId": "CA-2018-156720","customer": "JM-15580","productName": "Bagged Rubber Bands"},{"id": 2,"orderId": "CA-2018-115427","customer": "EB-13975","productName": "GBC Binding covers"},{"id": 3,"orderId": "CA-2018-115427","customer": "EB-13975","productName": "Cardinal Slant-D Ring Binder, Heavy Gauge Vinyl"},{"id": 4,"orderId": "CA-2018-123259","customer": "PO-18865","productName": "Wilson Jones Legal Size Ring Binders"},{"id": 5,"orderId": "CA-2018-113259","customer": "PO-18865","productName": "Gear Head AU3700S Headset"},{"id": 6,"orderId": "CA-2018-103259","customer": "PO-18865","productName": "Bush Westfield Collection Bookcases, Fully Assembled"},{"id": 7,"orderId": "CA-2018-126221","customer": "CC-12430","productName": "Eureka The Boss Plus 12-Amp Hard Box Upright Vacuum, Red"},{"id": 8,"orderId": "CA-2018-158526","customer": "KH-16360","productName": "Harbour Creations Steel Folding Chair"},{"id": 9,"orderId": "CA-2018-148526","customer": "KH-16360","productName": "Global Leather and Oak Executive Chair, Black"}
]

4.1.2 創建Vue模板

? ? ? ? 在HTML中，為VTable準備一個具備寬高的DOM容器。代碼如下：

<template><div class="container" ref="vtable"></div>
</template>
<script>
export default {data () {return {}}
}
</script>
<style lang="less" scoped>
.container {width: 800px;height: 500px;
}
</style>

4.1.3 VTable實例

? ? ? ? 在Script中，引入VTable和data.json模擬數據，并在mounted周期函數中，創建VTable實例，并傳入表格的配置項。代碼如下：

<template><div class="container" ref="vtable"></div>
</template>
<script>
import * as VTable from '@visactor/vtable'
import TestData from './data/data.json'
export default {data () {return {tableInstance: null,options: {records: TestData,columns: [{field: 'orderId', title: '訂單ID', width: 'auto'},{field: 'customer', title: '客戶ID', width: 'auto'},{field: 'productName', title: '產品名稱', width: 'auto'}],widthMode: 'standard'}}},mounted () {this.tableInstance = new VTable.ListTable(this.$refs['vtable'], this.options)}
}
</script>
<style lang="less" scoped>
.container {width: 800px;height: 500px;
}
</style>

? ? ? ? 頁面效果如下圖：

4.2?widthMode

????????表格列寬度的計算模式，可以是 'standard'（標準模式）、'adaptive'（自適應容器寬度模式）或 'autoWidth'（自動寬度模式），默認為 'standard'。

• 'standard'：使用 width 屬性指定的寬度作為列寬度。
• 'adaptive'：使用表格容器的寬度分配列寬度。
• 'autoWidth'：根據列頭和 body 單元格中內容的寬度自動計算列寬度，忽略 width 屬性的設置。

4.2.1 autoWidth模式

? ? ? ? 開啟自動列寬 widthMode:'autoWidth'或者 columns 中設置了 width:'auto'，如剛“4.1.3 VTable實例”中配置項中通過columns設置width: 'auto'，這里修改為widthMode: 'autoWidth'，代碼如下：

<template><div class="container" ref="vtable"></div>
</template>
<script>
import * as VTable from '@visactor/vtable'
import TestData from './data/data.json'
export default {data () {return {tableInstance: null,options: {records: TestData,columns: [{field: 'orderId', title: '訂單ID'},{field: 'customer', title: '客戶ID'},{field: 'productName', title: '產品名稱'}],widthMode: 'autoWidth'}}},mounted () {this.tableInstance = new VTable.ListTable(this.$refs['vtable'], this.options)}
}
</script>
<style lang="less" scoped>
.container {width: 800px;height: 500px;
}
</style>

? ? ? ? 效果如下圖：

4.2.2?adaptive模式

? ? ? ? 如上圖可見，雖然列的寬度開啟了自適應，但是并未根據容器的寬度進行分配。所以，這里將widthMode設置為adaptive，代碼如下：

<template><div class="container" ref="vtable"></div>
</template>
<script>
import * as VTable from '@visactor/vtable'
import TestData from './data/data.json'
export default {data () {return {tableInstance: null,options: {records: TestData,columns: [{field: 'orderId', title: '訂單ID'},{field: 'customer', title: '客戶ID'},{field: 'productName', title: '產品名稱'}],widthMode: 'adaptive'}}},mounted () {this.tableInstance = new VTable.ListTable(this.$refs['vtable'], this.options)}
}
</script>
<style lang="less" scoped>
.container {width: 800px;height: 500px;
}
</style>

? ? ? ? 效果如下圖：

4.3?heightMode

????????表格行高的計算模式，可以是 'standard'（標準模式）、'adaptive'（自適應容器高度模式）或 'autoHeight'（自動行高模式），默認為 'standard'。

• 'standard'：采用 defaultRowHeight 及 defaultHeaderRowHeight 作為行高。
• 'adaptive'：使用容器的高度分配每行高度，基于每行內容計算后的高度比例來分配。
• 'autoHeight'：根據內容自動計算行高，計算依據 fontSize 和 lineHeight(文字行高)，以及 padding。相關搭配設置項autoWrapText自動換行，可以根據換行后的多行文本內容來計算行高。

4.3.1?adaptive模式

? ? ? ? 同樣，將heightMode設置為adaptive，表格的行高也會根據容器的調度進行分配。代碼如下：

<template><div class="container" ref="vtable"></div>
</template>
<script>
import * as VTable from '@visactor/vtable'
import TestData from './data/data.json'
export default {data () {return {tableInstance: null,options: {records: TestData,columns: [{field: 'orderId', title: '訂單ID'},{field: 'customer', title: '客戶ID'},{field: 'productName', title: '產品名稱'}],widthMode: 'adaptive',heightMode: 'adaptive'}}},mounted () {this.tableInstance = new VTable.ListTable(this.$refs['vtable'], this.options)}
}
</script>
<style lang="less" scoped>
.container {width: 800px;height: 500px;
}
</style>

? ? ? ? 效果如下圖：

五、theme主題

????????表格主題，其中內置主題名稱有 DEFAULT, ARCO, BRIGHT, DARK, SIMPLIFY，具體配置方式可用內置類型或者直接使用字符串名稱配置：???????

    VTable.themes.DEFAULTVTable.themes.ARCO;VTable.themes.BRIGHTVTable.themes.DARKVTable.themes.SIMPLIFYor'default''arco''bright''dark''simplify'?

5.1 修改主題

? ? ? ? 為適應數據大屏的暗黑模式，也可以滿足用戶在性能、可讀性和定制化方面的需求。故可以使用VTable中內置主題，將表格修改為暗黑模式。代碼如下：

<template><div class="container" ref="vtable"></div>
</template>
<script>
import * as VTable from '@visactor/vtable'
import TestData from './data/data.json'
export default {data () {return {tableInstance: null,options: {records: TestData,columns: [{field: 'orderId', title: '訂單ID'},{field: 'customer', title: '客戶ID'},{field: 'productName', title: '產品名稱'}],widthMode: 'adaptive',heightMode: 'adaptive',theme: VTable.themes.DARK}}},mounted () {this.tableInstance = new VTable.ListTable(this.$refs['vtable'], this.options)}
}
</script>
<style lang="less" scoped>
.container {width: 800px;height: 500px;
}
</style>

? ? ? ? 效果如下圖：

5.2 主題的擴展

????????同時可以基于內置主題進行擴展，例如想基于 DARK 主題將表格圓角去除，以及外邊框設置為虛線。

????????在 VTable 中，可以通過 borderLineDash 屬性來設置表格線條為虛線。borderLineDash 是一個數組，用于定義虛線的樣式，其中包含兩個值：第一個值表示虛線的長度，第二個值表示虛線之間的間隔。代碼如下：

<template><div class="container" ref="vtable"></div>
</template>
<script>
import * as VTable from '@visactor/vtable'
import TestData from './data/data.json'
export default {data () {return {tableInstance: null,options: {records: TestData,columns: [{field: 'orderId', title: '訂單ID'},{field: 'customer', title: '客戶ID'},{field: 'productName', title: '產品名稱'}],widthMode: 'adaptive',heightMode: 'adaptive',theme: VTable.themes.DARK.extends({frameStyle: {cornerRadius: 0,borderLineDash: [5, 5] // 虛線樣式，表示虛線長度為5，間隔為5}})}}},mounted () {this.tableInstance = new VTable.ListTable(this.$refs['vtable'], this.options)}
}
</script>
<style lang="less" scoped>
.container {width: 800px;height: 500px;
}
</style>

? ? ? ? 通過borderLineDash這種方式，可以輕松地將 VTable 的表格線條設置為虛線。如下圖：

六、列的層級結構

????????在 VTable 中設置合并列頭，可以通過定義列的層級結構來實現。具體方法是在columns列數據中增加?columns 子數組屬性來定義子列，從而實現多級表頭的合并效果。

6.1 更新數據

? ? ? ? 在模擬數據中添加用戶名稱，并且將姓名分為姓和名兩部分。數據如下：

[{"id": 1,"orderId": "CA-2018-156720","customer": "JM-15580","productName": "Bagged Rubber Bands","firstName": "王","lastName": "小明"},{"id": 2,"orderId": "CA-2018-115427","customer": "EB-13975","productName": "GBC Binding covers","firstName": "李","lastName": "紅光"},{"id": 3,"orderId": "CA-2018-115427","customer": "EB-13975","productName": "Cardinal Slant-D Ring Binder, Heavy Gauge Vinyl","firstName": "孫","lastName": "旺"},{"id": 4,"orderId": "CA-2018-123259","customer": "PO-18865","productName": "Wilson Jones Legal Size Ring Binders","firstName": "童","lastName": "大牛"},{"id": 5,"orderId": "CA-2018-113259","customer": "PO-18865","productName": "Gear Head AU3700S Headset","firstName": "楊","lastName": "紅"},{"id": 6,"orderId": "CA-2018-103259","customer": "PO-18865","productName": "Bush Westfield Collection Bookcases, Fully Assembled","firstName": "王","lastName": "順"},{"id": 7,"orderId": "CA-2018-126221","customer": "CC-12430","productName": "Eureka The Boss Plus 12-Amp Hard Box Upright Vacuum, Red","firstName": "劉","lastName": "大年"},{"id": 8,"orderId": "CA-2018-158526","customer": "KH-16360","productName": "Harbour Creations Steel Folding Chair","firstName": "朱","lastName": "棣"},{"id": 9,"orderId": "CA-2018-148526","customer": "KH-16360","productName": "Global Leather and Oak Executive Chair, Black","firstName": "章","lastName": "紅光"}
]

6.2 合并列頭

? ? ? ? 以下示例代碼，展示如何設置合并列頭：

<template><div class="container" ref="vtable"></div>
</template>
<script>
import * as VTable from '@visactor/vtable'
import TestData from './data/data.json'
export default {data () {return {tableInstance: null,options: {records: TestData,columns: [{field: 'orderId', title: '訂單ID'},{field: 'customer', title: '客戶ID'},{title: '姓名',columns: [{field: 'firstName', title: '姓', width: '50px'},{field: 'lastName', title: '名'}]},{field: 'productName', title: '產品名稱', width: '200px'}],widthMode: 'adaptive',heightMode: 'adaptive',theme: VTable.themes.DARK.extends({frameStyle: {cornerRadius: 0,borderLineDash: [5, 5]}})}}},mounted () {this.tableInstance = new VTable.ListTable(this.$refs['vtable'], this.options)}
}
</script>
<style lang="less" scoped>
.container {width: 800px;height: 500px;
}
</style>

? ? ? ? 效果如下圖：

說明：

• 多級表頭結構：通過在 columns 中定義 columns 屬性，可以創建多級表頭。
• 字段綁定：子列的 field 屬性需要與數據源中的字段對應，以確保數據能夠正確顯示。
• 通過這種方式，可以靈活地實現表頭的合并和分組效果。

? ? ? ? 注意：VTable的API和用法可能會隨著版本的更新而發生變化，因此，建議查閱最新的VTable官方文檔 ，地址：VTable —— 不只是高性能的多維數據分析表格，更是行列間創作的方格藝術家，以獲取最準備的信息。