feat: add vtable plugin

package.json

@@ -58,6 +58,8 @@
     "@sa/hooks": "workspace:*",
     "@sa/materials": "workspace:*",
     "@sa/utils": "workspace:*",
+    "@visactor/vchart": "1.12.8",
+    "@visactor/vue-vtable": "1.10.1",
     "@vueuse/components": "^11.1.0",
     "@vueuse/core": "11.1.0",
     "clipboard": "2.0.11",

src/locales/langs/en-us.ts

@@ -200,6 +200,7 @@ const local: App.I18n.Schema = {
     plugin_charts: 'Charts',
     plugin_charts_echarts: 'ECharts',
     plugin_charts_antv: 'AntV',
+    plugin_charts_vchart: 'VChart',
     plugin_editor: 'Editor',
     plugin_editor_quill: 'Quill',
     plugin_editor_markdown: 'Markdown',
@@ -213,7 +214,9 @@ const local: App.I18n.Schema = {
     plugin_excel: 'Excel',
     plugin_pdf: 'PDF preview',
     plugin_gantt: 'Gantt Chart',
-    plugin_typeit: 'Typeit'
+    plugin_typeit: 'Typeit',
+    plugin_tables: 'Tables',
+    plugin_tables_vtable: 'VTable'
   },
   page: {
     login: {

src/locales/langs/zh-cn.ts

@@ -200,6 +200,7 @@ const local: App.I18n.Schema = {
     plugin_charts: '图表',
     plugin_charts_echarts: 'ECharts',
     plugin_charts_antv: 'AntV',
+    plugin_charts_vchart: 'VChart',
     plugin_editor: '编辑器',
     plugin_editor_quill: '富文本编辑器',
     plugin_editor_markdown: 'MD 编辑器',
@@ -213,7 +214,9 @@ const local: App.I18n.Schema = {
     plugin_excel: 'Excel',
     plugin_pdf: 'PDF 预览',
     plugin_gantt: '甘特图',
-    plugin_typeit: '打字机'
+    plugin_typeit: '打字机',
+    plugin_tables: '表格',
+    plugin_tables_vtable: 'VTable'
   },
   page: {
     login: {

src/router/elegant/imports.ts

@@ -42,6 +42,7 @@ export const views: Record<LastLevelRouteKey, RouteComponent | (() => Promise<Ro
   plugin_barcode: () => import("@/views/plugin/barcode/index.vue"),
   plugin_charts_antv: () => import("@/views/plugin/charts/antv/index.vue"),
   plugin_charts_echarts: () => import("@/views/plugin/charts/echarts/index.vue"),
+  plugin_charts_vchart: () => import("@/views/plugin/charts/vchart/index.vue"),
   plugin_copy: () => import("@/views/plugin/copy/index.vue"),
   plugin_editor_markdown: () => import("@/views/plugin/editor/markdown/index.vue"),
   plugin_editor_quill: () => import("@/views/plugin/editor/quill/index.vue"),
@@ -53,6 +54,7 @@ export const views: Record<LastLevelRouteKey, RouteComponent | (() => Promise<Ro
   plugin_pinyin: () => import("@/views/plugin/pinyin/index.vue"),
   plugin_print: () => import("@/views/plugin/print/index.vue"),
   plugin_swiper: () => import("@/views/plugin/swiper/index.vue"),
+  plugin_tables_vtable: () => import("@/views/plugin/tables/vtable/index.vue"),
   plugin_typeit: () => import("@/views/plugin/typeit/index.vue"),
   plugin_video: () => import("@/views/plugin/video/index.vue"),
   "user-center": () => import("@/views/user-center/index.vue"),

src/router/elegant/routes.ts

@@ -424,6 +424,15 @@ export const generatedRoutes: GeneratedRoute[] = [
               i18nKey: 'route.plugin_charts_echarts',
               icon: 'simple-icons:apacheecharts'
             }
+          },
+          {
+            name: 'plugin_charts_vchart',
+            path: '/plugin/charts/vchart',
+            component: 'view.plugin_charts_vchart',
+            meta: {
+              title: 'plugin_charts_vchart',
+              i18nKey: 'route.plugin_charts_vchart'
+            }
           }
         ]
       },
@@ -549,6 +558,26 @@ export const generatedRoutes: GeneratedRoute[] = [
           icon: 'simple-icons:swiper'
         }
       },
+      {
+        name: 'plugin_tables',
+        path: '/plugin/tables',
+        meta: {
+          title: 'plugin_tables',
+          i18nKey: 'route.plugin_tables',
+          icon: 'icon-park-outline:table'
+        },
+        children: [
+          {
+            name: 'plugin_tables_vtable',
+            path: '/plugin/tables/vtable',
+            component: 'view.plugin_tables_vtable',
+            meta: {
+              title: 'plugin_tables_vtable',
+              i18nKey: 'route.plugin_tables_vtable'
+            }
+          }
+        ]
+      },
       {
         name: 'plugin_typeit',
         path: '/plugin/typeit',

src/router/elegant/transform.ts

@@ -213,6 +213,7 @@ const routeMap: RouteMap = {
   "plugin_charts": "/plugin/charts",
   "plugin_charts_antv": "/plugin/charts/antv",
   "plugin_charts_echarts": "/plugin/charts/echarts",
+  "plugin_charts_vchart": "/plugin/charts/vchart",
   "plugin_copy": "/plugin/copy",
   "plugin_editor": "/plugin/editor",
   "plugin_editor_markdown": "/plugin/editor/markdown",
@@ -225,6 +226,8 @@ const routeMap: RouteMap = {
   "plugin_pinyin": "/plugin/pinyin",
   "plugin_print": "/plugin/print",
   "plugin_swiper": "/plugin/swiper",
+  "plugin_tables": "/plugin/tables",
+  "plugin_tables_vtable": "/plugin/tables/vtable",
   "plugin_typeit": "/plugin/typeit",
   "plugin_video": "/plugin/video",
   "user-center": "/user-center"

src/typings/elegant-router.d.ts

@@ -67,6 +67,7 @@ declare module "@elegant-router/types" {
     "plugin_charts": "/plugin/charts";
     "plugin_charts_antv": "/plugin/charts/antv";
     "plugin_charts_echarts": "/plugin/charts/echarts";
+    "plugin_charts_vchart": "/plugin/charts/vchart";
     "plugin_copy": "/plugin/copy";
     "plugin_editor": "/plugin/editor";
     "plugin_editor_markdown": "/plugin/editor/markdown";
@@ -79,6 +80,8 @@ declare module "@elegant-router/types" {
     "plugin_pinyin": "/plugin/pinyin";
     "plugin_print": "/plugin/print";
     "plugin_swiper": "/plugin/swiper";
+    "plugin_tables": "/plugin/tables";
+    "plugin_tables_vtable": "/plugin/tables/vtable";
     "plugin_typeit": "/plugin/typeit";
     "plugin_video": "/plugin/video";
     "user-center": "/user-center";
@@ -184,6 +187,7 @@ declare module "@elegant-router/types" {
     | "plugin_barcode"
     | "plugin_charts_antv"
     | "plugin_charts_echarts"
+    | "plugin_charts_vchart"
     | "plugin_copy"
     | "plugin_editor_markdown"
     | "plugin_editor_quill"
@@ -195,6 +199,7 @@ declare module "@elegant-router/types" {
     | "plugin_pinyin"
     | "plugin_print"
     | "plugin_swiper"
+    | "plugin_tables_vtable"
     | "plugin_typeit"
     | "plugin_video"
     | "user-center"

src/views/plugin/charts/vchart/index.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import { onUnmounted } from 'vue';
+// import { useEcharts } from '@/hooks/common/echarts';
+// import {
+//   barOptions,
+//   gaugeOptions,
+//   getPictorialBarOption,
+//   getScatterOption,
+//   lineOptions,
+//   pieOptions,
+//   radarOptions
+// } from './data';
+
+// const { domRef: pieRef } = useEcharts(() => pieOptions, { onRender() {} });
+// const { domRef: lineRef } = useEcharts(() => lineOptions, { onRender() {} });
+// const { domRef: barRef } = useEcharts(() => barOptions, { onRender() {} });
+// const { domRef: pictorialBarRef } = useEcharts(() => getPictorialBarOption(), { onRender() {} });
+// const { domRef: radarRef } = useEcharts(() => radarOptions, { onRender() {} });
+// const { domRef: scatterRef } = useEcharts(() => getScatterOption(), { onRender() {} });
+// const { domRef: gaugeRef, setOptions: setGaugeOptions } = useEcharts(() => gaugeOptions, { onRender() {} });
+
+// let intervalId: NodeJS.Timeout;
+
+// function initGaugeChart() {
+//   intervalId = setInterval(() => {
+//     const date = new Date();
+//     const second = date.getSeconds();
+//     const minute = date.getMinutes() + second / 60;
+//     const hour = (date.getHours() % 12) + minute / 60;
+
+//     setGaugeOptions({
+//       animationDurationUpdate: 300,
+//       series: [
+//         {
+//           name: 'hour',
+//           animation: hour !== 0,
+//           data: [{ value: hour }]
+//         },
+//         {
+//           name: 'minute',
+//           animation: minute !== 0,
+//           data: [{ value: minute }]
+//         },
+//         {
+//           animation: second !== 0,
+//           name: 'second',
+//           data: [{ value: second }]
+//         }
+//       ]
+//     });
+//   }, 1000);
+// }
+
+// function clearGaugeChart() {
+//   clearInterval(intervalId);
+// }
+
+// initGaugeChart();
+
+onUnmounted(() => {
+  // clearGaugeChart();
+});
+</script>
+
+<template>
+  <NSpace vertical :size="16">
+    <div>vchart</div>
+  </NSpace>
+</template>
+
+<style scoped></style>

src/views/plugin/tables/vtable/data.ts

@@ -0,0 +1,694 @@
+const listTableRecords = [
+  {
+    'Row ID': '7981',
+    'Order ID': 'CA-2015-103800',
+    'Order Date': '2015/1/3',
+    'Ship Date': '2015/1/7',
+    'Ship Mode': 'Standard Class',
+    'Customer ID': 'DP-13000',
+    'Customer Name': 'Darren Powers',
+    Segment: 'Consumer',
+    Country: 'United States',
+    City: 'Houston',
+    State: 'Texas',
+    'Postal Code': '77095',
+    Region: 'Central',
+    'Product ID': 'OFF-PA-10000174',
+    Category: 'Office Supplies',
+    'Sub-Category': 'Paper',
+    'Product Name': 'Message Book, Wirebound, Four 5 1/2" X 4" Forms/Pg., 200 Dupl. Sets/Book',
+    Sales: '16.448',
+    Quantity: '2',
+    Discount: '0.2',
+    Profit: '5.5512'
+  },
+  {
+    'Row ID': '740',
+    'Order ID': 'CA-2015-112326',
+    'Order Date': '2015/1/4',
+    'Ship Date': '2015/1/8',
+    'Ship Mode': 'Standard Class',
+    'Customer ID': 'PO-19195',
+    'Customer Name': 'Phillina Ober',
+    Segment: 'Home Office',
+    Country: 'United States',
+    City: 'Naperville',
+    State: 'Illinois',
+    'Postal Code': '60540',
+    Region: 'Central',
+    'Product ID': 'OFF-LA-10003223',
+    Category: 'Office Supplies',
+    'Sub-Category': 'Labels',
+    'Product Name': 'Avery 508',
+    Sales: '11.784',
+    Quantity: '3',
+    Discount: '0.2',
+    Profit: '4.2717'
+  },
+  {
+    'Row ID': '741',
+    'Order ID': 'CA-2015-112326',
+    'Order Date': '2015/1/4',
+    'Ship Date': '2015/1/8',
+    'Ship Mode': 'Standard Class',
+    'Customer ID': 'PO-19195',
+    'Customer Name': 'Phillina Ober',
+    Segment: 'Home Office',
+    Country: 'United States',
+    City: 'Naperville',
+    State: 'Illinois',
+    'Postal Code': '60540',
+    Region: 'Central',
+    'Product ID': 'OFF-ST-10002743',
+    Category: 'Office Supplies',
+    'Sub-Category': 'Storage',
+    'Product Name': 'SAFCO Boltless Steel Shelving',
+    Sales: '272.736',
+    Quantity: '3',
+    Discount: '0.2',
+    Profit: '-64.7748'
+  },
+  {
+    'Row ID': '742',
+    'Order ID': 'CA-2015-112326',
+    'Order Date': '2015/1/4',
+    'Ship Date': '2015/1/8',
+    'Ship Mode': 'Standard Class',
+    'Customer ID': 'PO-19195',
+    'Customer Name': 'Phillina Ober',
+    Segment: 'Home Office',
+    Country: 'United States',
+    City: 'Naperville',
+    State: 'Illinois',
+    'Postal Code': '60540',
+    Region: 'Central',
+    'Product ID': 'OFF-BI-10004094',
+    Category: 'Office Supplies',
+    'Sub-Category': 'Binders',
+    'Product Name': 'GBC Standard Plastic Binding Systems Combs',
+    Sales: '3.54',
+    Quantity: '2',
+    Discount: '0.8',
+    Profit: '-5.487'
+  },
+  {
+    'Row ID': '1760',
+    'Order ID': 'CA-2015-141817',
+    'Order Date': '2015/1/5',
+    'Ship Date': '2015/1/12',
+    'Ship Mode': 'Standard Class',
+    'Customer ID': 'MB-18085',
+    'Customer Name': 'Mick Brown',
+    Segment: 'Consumer',
+    Country: 'United States',
+    City: 'Philadelphia',
+    State: 'Pennsylvania',
+    'Postal Code': '19143',
+    Region: 'East',
+    'Product ID': 'OFF-AR-10003478',
+    Category: 'Office Supplies',
+    'Sub-Category': 'Art',
+    'Product Name': 'Avery Hi-Liter EverBold Pen Style Fluorescent Highlighters, 4/Pack',
+    Sales: '19.536',
+    Quantity: '3',
+    Discount: '0.2',
+    Profit: '4.884'
+  },
+  {
+    'Row ID': '5328',
+    'Order ID': 'CA-2015-130813',
+    'Order Date': '2015/1/6',
+    'Ship Date': '2015/1/8',
+    'Ship Mode': 'Second Class',
+    'Customer ID': 'LS-17230',
+    'Customer Name': 'Lycoris Saunders',
+    Segment: 'Consumer',
+    Country: 'United States',
+    City: 'Los Angeles',
+    State: 'California',
+    'Postal Code': '90049',
+    Region: 'West',
+    'Product ID': 'OFF-PA-10002005',
+    Category: 'Office Supplies',
+    'Sub-Category': 'Paper',
+    'Product Name': 'Xerox 225',
+    Sales: '19.44',
+    Quantity: '3',
+    Discount: '0',
+    Profit: '9.3312'
+  },
+  {
+    'Row ID': '7181',
+    'Order ID': 'CA-2015-106054',
+    'Order Date': '2015/1/6',
+    'Ship Date': '2015/1/7',
+    'Ship Mode': 'First Class',
+    'Customer ID': 'JO-15145',
+    'Customer Name': "Jack O'Briant",
+    Segment: 'Corporate',
+    Country: 'United States',
+    City: 'Athens',
+    State: 'Georgia',
+    'Postal Code': '30605',
+    Region: 'South',
+    'Product ID': 'OFF-AR-10002399',
+    Category: 'Office Supplies',
+    'Sub-Category': 'Art',
+    'Product Name': 'Dixon Prang Watercolor Pencils, 10-Color Set with Brush',
+    Sales: '12.78',
+    Quantity: '3',
+    Discount: '0',
+    Profit: '5.2398'
+  },
+  {
+    'Row ID': '7475',
+    'Order ID': 'CA-2015-167199',
+    'Order Date': '2015/1/6',
+    'Ship Date': '2015/1/10',
+    'Ship Mode': 'Standard Class',
+    'Customer ID': 'ME-17320',
+    'Customer Name': 'Maria Etezadi',
+    Segment: 'Home Office',
+    Country: 'United States',
+    City: 'Henderson',
+    State: 'Kentucky',
+    'Postal Code': '42420',
+    Region: 'South',
+    'Product ID': 'FUR-CH-10004063',
+    Category: 'Furniture',
+    'Sub-Category': 'Chairs',
+    'Product Name': "Global Deluxe High-Back Manager's Chair",
+    Sales: '2573.82',
+    Quantity: '9',
+    Discount: '0',
+    Profit: '746.4078'
+  },
+  {
+    'Row ID': '7476',
+    'Order ID': 'CA-2015-167199',
+    'Order Date': '2015/1/6',
+    'Ship Date': '2015/1/10',
+    'Ship Mode': 'Standard Class',
+    'Customer ID': 'ME-17320',
+    'Customer Name': 'Maria Etezadi',
+    Segment: 'Home Office',
+    Country: 'United States',
+    City: 'Henderson',
+    State: 'Kentucky',
+    'Postal Code': '42420',
+    Region: 'South',
+    'Product ID': 'OFF-BI-10004632',
+    Category: 'Office Supplies',
+    'Sub-Category': 'Binders',
+    'Product Name': 'Ibico Hi-Tech Manual Binding System',
+    Sales: '609.98',
+    Quantity: '2',
+    Discount: '0',
+    Profit: '274.491'
+  },
+  {
+    'Row ID': '7477',
+    'Order ID': 'CA-2015-167199',
+    'Order Date': '2015/1/6',
+    'Ship Date': '2015/1/10',
+    'Ship Mode': 'Standard Class',
+    'Customer ID': 'ME-17320',
+    'Customer Name': 'Maria Etezadi',
+    Segment: 'Home Office',
+    Country: 'United States',
+    City: 'Henderson',
+    State: 'Kentucky',
+    'Postal Code': '42420',
+    Region: 'South',
+    'Product ID': 'OFF-AR-10001662',
+    Category: 'Office Supplies',
+    'Sub-Category': 'Art',
+    'Product Name': 'Rogers Handheld Barrel Pencil Sharpener',
+    Sales: '5.48',
+    Quantity: '2',
+    Discount: '0',
+    Profit: '1.4796'
+  },
+  {
+    'Row ID': '7478',
+    'Order ID': 'CA-2015-167199',
+    'Order Date': '2015/1/6',
+    'Ship Date': '2015/1/10',
+    'Ship Mode': 'Standard Class',
+    'Customer ID': 'ME-17320',
+    'Customer Name': 'Maria Etezadi',
+    Segment: 'Home Office',
+    Country: 'United States',
+    City: 'Henderson',
+    State: 'Kentucky',
+    'Postal Code': '42420',
+    Region: 'South',
+    'Product ID': 'TEC-PH-10004977',
+    Category: 'Technology',
+    'Sub-Category': 'Phones',
+    'Product Name': 'GE 30524EE4',
+    Sales: '391.98',
+    Quantity: '2',
+    Discount: '0',
+    Profit: '113.6742'
+  },
+  {
+    'Row ID': '7479',
+    'Order ID': 'CA-2015-167199',
+    'Order Date': '2015/1/6',
+    'Ship Date': '2015/1/10',
+    'Ship Mode': 'Standard Class',
+    'Customer ID': 'ME-17320',
+    'Customer Name': 'Maria Etezadi',
+    Segment: 'Home Office',
+    Country: 'United States',
+    City: 'Henderson',
+    State: 'Kentucky',
+    'Postal Code': '42420',
+    Region: 'South',
+    'Product ID': 'TEC-PH-10004539',
+    Category: 'Technology',
+    'Sub-Category': 'Phones',
+    'Product Name': 'Wireless Extenders zBoost YX545 SOHO Signal Booster',
+    Sales: '755.96',
+    Quantity: '4',
+    Discount: '0',
+    Profit: '204.1092'
+  },
+  {
+    'Row ID': '7480',
+    'Order ID': 'CA-2015-167199',
+    'Order Date': '2015/1/6',
+    'Ship Date': '2015/1/10',
+    'Ship Mode': 'Standard Class',
+    'Customer ID': 'ME-17320',
+    'Customer Name': 'Maria Etezadi',
+    Segment: 'Home Office',
+    Country: 'United States',
+    City: 'Henderson',
+    State: 'Kentucky',
+    'Postal Code': '42420',
+    Region: 'South',
+    'Product ID': 'OFF-FA-10001883',
+    Category: 'Office Supplies',
+    'Sub-Category': 'Fasteners',
+    'Product Name': 'Alliance Super-Size Bands, Assorted Sizes',
+    Sales: '31.12',
+    Quantity: '4',
+    Discount: '0',
+    Profit: '0.3112'
+  },
+  {
+    'Row ID': '7481',
+    'Order ID': 'CA-2015-167199',
+    'Order Date': '2015/1/6',
+    'Ship Date': '2015/1/10',
+    'Ship Mode': 'Standard Class',
+    'Customer ID': 'ME-17320',
+    'Customer Name': 'Maria Etezadi',
+    Segment: 'Home Office',
+    Country: 'United States',
+    City: 'Henderson',
+    State: 'Kentucky',
+    'Postal Code': '42420',
+    Region: 'South',
+    'Product ID': 'OFF-PA-10000955',
+    Category: 'Office Supplies',
+    'Sub-Category': 'Paper',
+    'Product Name': 'Southworth 25% Cotton Granite Paper & Envelopes',
+    Sales: '6.54',
+    Quantity: '1',
+    Discount: '0',
+    Profit: '3.0084'
+  },
+  {
+    'Row ID': '7661',
+    'Order ID': 'CA-2015-105417',
+    'Order Date': '2015/1/7',
+    'Ship Date': '2015/1/12',
+    'Ship Mode': 'Standard Class',
+    'Customer ID': 'VS-21820',
+    'Customer Name': 'Vivek Sundaresam',
+    Segment: 'Consumer',
+    Country: 'United States',
+    City: 'Huntsville',
+    State: 'Texas',
+    'Postal Code': '77340',
+    Region: 'Central',
+    'Product ID': 'FUR-FU-10004864',
+    Category: 'Furniture',
+    'Sub-Category': 'Furnishings',
+    'Product Name': 'Howard Miller 14-1/2" Diameter Chrome Round Wall Clock',
+    Sales: '76.728',
+    Quantity: '3',
+    Discount: '0.6',
+    Profit: '-53.7096'
+  },
+  {
+    'Row ID': '7662',
+    'Order ID': 'CA-2015-105417',
+    'Order Date': '2015/1/7',
+    'Ship Date': '2015/1/12',
+    'Ship Mode': 'Standard Class',
+    'Customer ID': 'VS-21820',
+    'Customer Name': 'Vivek Sundaresam',
+    Segment: 'Consumer',
+    Country: 'United States',
+    City: 'Huntsville',
+    State: 'Texas',
+    'Postal Code': '77340',
+    Region: 'Central',
+    'Product ID': 'OFF-BI-10003708',
+    Category: 'Office Supplies',
+    'Sub-Category': 'Binders',
+    'Product Name': 'Acco Four Pocket Poly Ring Binder with Label Holder, Smoke, 1"',
+    Sales: '10.43',
+    Quantity: '7',
+    Discount: '0.8',
+    Profit: '-18.2525'
+  },
+  {
+    'Row ID': '593',
+    'Order ID': 'CA-2015-135405',
+    'Order Date': '2015/1/9',
+    'Ship Date': '2015/1/13',
+    'Ship Mode': 'Standard Class',
+    'Customer ID': 'MS-17830',
+    'Customer Name': 'Melanie Seite',
+    Segment: 'Consumer',
+    Country: 'United States',
+    City: 'Laredo',
+    State: 'Texas',
+    'Postal Code': '78041',
+    Region: 'Central',
+    'Product ID': 'OFF-AR-10004078',
+    Category: 'Office Supplies',
+    'Sub-Category': 'Art',
+    'Product Name': 'Newell 312',
+    Sales: '9.344',
+    Quantity: '2',
+    Discount: '0.2',
+    Profit: '1.168'
+  },
+  {
+    'Row ID': '594',
+    'Order ID': 'CA-2015-135405',
+    'Order Date': '2015/1/9',
+    'Ship Date': '2015/1/13',
+    'Ship Mode': 'Standard Class',
+    'Customer ID': 'MS-17830',
+    'Customer Name': 'Melanie Seite',
+    Segment: 'Consumer',
+    Country: 'United States',
+    City: 'Laredo',
+    State: 'Texas',
+    'Postal Code': '78041',
+    Region: 'Central',
+    'Product ID': 'TEC-AC-10001266',
+    Category: 'Technology',
+    'Sub-Category': 'Accessories',
+    'Product Name': 'Memorex Micro Travel Drive 8 GB',
+    Sales: '31.2',
+    Quantity: '3',
+    Discount: '0.2',
+    Profit: '9.75'
+  },
+  {
+    'Row ID': '866',
+    'Order ID': 'CA-2015-149020',
+    'Order Date': '2015/1/10',
+    'Ship Date': '2015/1/15',
+    'Ship Mode': 'Standard Class',
+    'Customer ID': 'AJ-10780',
+    'Customer Name': 'Anthony Jacobs',
+    Segment: 'Corporate',
+    Country: 'United States',
+    City: 'Springfield',
+    State: 'Virginia',
+    'Postal Code': '22153',
+    Region: 'South',
+    'Product ID': 'OFF-LA-10004272',
+    Category: 'Office Supplies',
+    'Sub-Category': 'Labels',
+    'Product Name': 'Avery 482',
+    Sales: '2.89',
+    Quantity: '1',
+    Discount: '0',
+    Profit: '1.3583'
+  },
+  {
+    'Row ID': '867',
+    'Order ID': 'CA-2015-149020',
+    'Order Date': '2015/1/10',
+    'Ship Date': '2015/1/15',
+    'Ship Mode': 'Standard Class',
+    'Customer ID': 'AJ-10780',
+    'Customer Name': 'Anthony Jacobs',
+    Segment: 'Corporate',
+    Country: 'United States',
+    City: 'Springfield',
+    State: 'Virginia',
+    'Postal Code': '22153',
+    Region: 'South',
+    'Product ID': 'FUR-FU-10000965',
+    Category: 'Furniture',
+    'Sub-Category': 'Furnishings',
+    'Product Name': 'Howard Miller 11-1/2" Diameter Ridgewood Wall Clock',
+    Sales: '51.94',
+    Quantity: '1',
+    Discount: '0',
+    Profit: '21.2954'
+  },
+  {
+    'Row ID': '717',
+    'Order ID': 'CA-2015-130092',
+    'Order Date': '2015/1/11',
+    'Ship Date': '2015/1/14',
+    'Ship Mode': 'First Class',
+    'Customer ID': 'SV-20365',
+    'Customer Name': 'Seth Vernon',
+    Segment: 'Consumer',
+    Country: 'United States',
+    City: 'Dover',
+    State: 'Delaware',
+    'Postal Code': '19901',
+    Region: 'East',
+    'Product ID': 'FUR-FU-10000010',
+    Category: 'Furniture',
+    'Sub-Category': 'Furnishings',
+    'Product Name': 'DAX Value U-Channel Document Frames, Easel Back',
+    Sales: '9.94',
+    Quantity: '2',
+    Discount: '0',
+    Profit: '3.0814'
+  },
+  {
+    'Row ID': '764',
+    'Order ID': 'CA-2015-162775',
+    'Order Date': '2015/1/13',
+    'Ship Date': '2015/1/15',
+    'Ship Mode': 'Second Class',
+    'Customer ID': 'CS-12250',
+    'Customer Name': 'Chris Selesnick',
+    Segment: 'Corporate',
+    Country: 'United States',
+    City: 'Bossier City',
+    State: 'Louisiana',
+    'Postal Code': '71111',
+    Region: 'South',
+    'Product ID': 'OFF-EN-10001990',
+    Category: 'Office Supplies',
+    'Sub-Category': 'Envelopes',
+    'Product Name': 'Staple envelope',
+    Sales: '11.36',
+    Quantity: '2',
+    Discount: '0',
+    Profit: '5.3392'
+  },
+  {
+    'Row ID': '765',
+    'Order ID': 'CA-2015-162775',
+    'Order Date': '2015/1/13',
+    'Ship Date': '2015/1/15',
+    'Ship Mode': 'Second Class',
+    'Customer ID': 'CS-12250',
+    'Customer Name': 'Chris Selesnick',
+    Segment: 'Corporate',
+    Country: 'United States',
+    City: 'Bossier City',
+    State: 'Louisiana',
+    'Postal Code': '71111',
+    Region: 'South',
+    'Product ID': 'OFF-EN-10001532',
+    Category: 'Office Supplies',
+    'Sub-Category': 'Envelopes',
+    'Product Name': 'Brown Kraft Recycled Envelopes',
+    Sales: '50.94',
+    Quantity: '3',
+    Discount: '0',
+    Profit: '25.47'
+  },
+  {
+    'Row ID': '766',
+    'Order ID': 'CA-2015-162775',
+    'Order Date': '2015/1/13',
+    'Ship Date': '2015/1/15',
+    'Ship Mode': 'Second Class',
+    'Customer ID': 'CS-12250',
+    'Customer Name': 'Chris Selesnick',
+    Segment: 'Corporate',
+    Country: 'United States',
+    City: 'Bossier City',
+    State: 'Louisiana',
+    'Postal Code': '71111',
+    Region: 'South',
+    'Product ID': 'TEC-AC-10003174',
+    Category: 'Technology',
+    'Sub-Category': 'Accessories',
+    'Product Name': 'Plantronics S12 Corded Telephone Headset System',
+    Sales: '646.74',
+    Quantity: '6',
+    Discount: '0',
+    Profit: '258.696'
+  },
+  {
+    'Row ID': '767',
+    'Order ID': 'CA-2015-162775',
+    'Order Date': '2015/1/13',
+    'Ship Date': '2015/1/15',
+    'Ship Mode': 'Second Class',
+    'Customer ID': 'CS-12250',
+    'Customer Name': 'Chris Selesnick',
+    Segment: 'Corporate',
+    Country: 'United States',
+    City: 'Bossier City',
+    State: 'Louisiana',
+    'Postal Code': '71111',
+    Region: 'South',
+    'Product ID': 'OFF-BI-10004187',
+    Category: 'Office Supplies',
+    'Sub-Category': 'Binders',
+    'Product Name': '3-ring staple pack',
+    Sales: '5.64',
+    Quantity: '3',
+    Discount: '0',
+    Profit: '2.7072'
+  },
+  {
+    'Row ID': '768',
+    'Order ID': 'CA-2015-162775',
+    'Order Date': '2015/1/13',
+    'Ship Date': '2015/1/15',
+    'Ship Mode': 'Second Class',
+    'Customer ID': 'CS-12250',
+    'Customer Name': 'Chris Selesnick',
+    Segment: 'Corporate',
+    Country: 'United States',
+    City: 'Bossier City',
+    State: 'Louisiana',
+    'Postal Code': '71111',
+    Region: 'South',
+    'Product ID': 'OFF-ST-10000025',
+    Category: 'Office Supplies',
+    'Sub-Category': 'Storage',
+    'Product Name': 'Fellowes Stor/Drawer Steel Plus Storage Drawers',
+    Sales: '572.58',
+    Quantity: '6',
+    Discount: '0',
+    Profit: '34.3548'
+  },
+  {
+    'Row ID': '2979',
+    'Order ID': 'CA-2015-109232',
+    'Order Date': '2015/1/13',
+    'Ship Date': '2015/1/16',
+    'Ship Mode': 'Second Class',
+    'Customer ID': 'ND-18370',
+    'Customer Name': 'Natalie DeCherney',
+    Segment: 'Consumer',
+    Country: 'United States',
+    City: 'Mount Pleasant',
+    State: 'South Carolina',
+    'Postal Code': '29464',
+    Region: 'South',
+    'Product ID': 'FUR-CH-10000422',
+    Category: 'Furniture',
+    'Sub-Category': 'Chairs',
+    'Product Name': 'Global Highback Leather Tilter in Burgundy',
+    Sales: '545.94',
+    Quantity: '6',
+    Discount: '0',
+    Profit: '87.3504'
+  },
+  {
+    'Row ID': '4938',
+    'Order ID': 'CA-2015-157147',
+    'Order Date': '2015/1/13',
+    'Ship Date': '2015/1/18',
+    'Ship Mode': 'Standard Class',
+    'Customer ID': 'BD-11605',
+    'Customer Name': 'Brian Dahlen',
+    Segment: 'Consumer',
+    Country: 'United States',
+    City: 'San Francisco',
+    State: 'California',
+    'Postal Code': '94109',
+    Region: 'West',
+    'Product ID': 'OFF-ST-10000078',
+    Category: 'Office Supplies',
+    'Sub-Category': 'Storage',
+    'Product Name': 'Tennsco 6- and 18-Compartment Lockers',
+    Sales: '1325.85',
+    Quantity: '5',
+    Discount: '0',
+    Profit: '238.653'
+  },
+  {
+    'Row ID': '4939',
+    'Order ID': 'CA-2015-157147',
+    'Order Date': '2015/1/13',
+    'Ship Date': '2015/1/18',
+    'Ship Mode': 'Standard Class',
+    'Customer ID': 'BD-11605',
+    'Customer Name': 'Brian Dahlen',
+    Segment: 'Consumer',
+    Country: 'United States',
+    City: 'San Francisco',
+    State: 'California',
+    'Postal Code': '94109',
+    Region: 'West',
+    'Product ID': 'FUR-BO-10003034',
+    Category: 'Furniture',
+    'Sub-Category': 'Bookcases',
+    'Product Name': "O'Sullivan Elevations Bookcase, Cherry Finish",
+    Sales: '333.999',
+    Quantity: '3',
+    Discount: '0.15',
+    Profit: '3.9294'
+  },
+  {
+    'Row ID': '4940',
+    'Order ID': 'CA-2015-157147',
+    'Order Date': '2015/1/13',
+    'Ship Date': '2015/1/18',
+    'Ship Mode': 'Standard Class',
+    'Customer ID': 'BD-11605',
+    'Customer Name': 'Brian Dahlen',
+    Segment: 'Consumer',
+    Country: 'United States',
+    City: 'San Francisco',
+    State: 'California',
+    'Postal Code': '94109',
+    Region: 'West',
+    'Product ID': 'OFF-AR-10003514',
+    Category: 'Office Supplies',
+    'Sub-Category': 'Art',
+    'Product Name': '4009 Highlighters by Sanford',
+    Sales: '19.9',
+    Quantity: '5',
+    Discount: '0',
+    Profit: '6.567'
+  }
+];
+
+export { listTableRecords };

src/views/plugin/tables/vtable/index.vue

@@ -0,0 +1,692 @@
+<script setup lang="tsx">
+import { onMounted, ref } from 'vue';
+import {
+  Group,
+  Image,
+  ListColumn,
+  ListTable,
+  Menu,
+  PivotChart,
+  PivotColumnDimension,
+  PivotCorner,
+  PivotIndicator,
+  PivotRowDimension,
+  PivotTable,
+  Tag,
+  Text,
+  registerChartModule
+} from '@visactor/vue-vtable';
+import VChart from '@visactor/vchart';
+import { listTableRecords } from './data';
+
+registerChartModule('vchart', VChart);
+
+// list table
+const listTableRef = ref(null);
+const listRecords = ref<Record<string, string | number>[]>(listTableRecords);
+
+// pivot table
+const pivotTableRef = ref(null);
+const pivotTableOptions = ref({
+  tooltip: {
+    isShowOverflowTextTooltip: true
+  },
+  dataConfig: {
+    sortRules: [
+      {
+        sortField: 'Category',
+        sortBy: ['Office Supplies', 'Technology', 'Furniture']
+      }
+    ]
+  },
+  widthMode: 'standard'
+});
+const pivotTableIndicators = ref([
+  {
+    indicatorKey: 'Quantity',
+    title: 'Quantity',
+    width: 'auto',
+    showSort: false,
+    headerStyle: { fontWeight: 'normal' },
+    style: {
+      padding: [16, 28, 16, 28],
+      color(args: any) {
+        return args.dataValue >= 0 ? 'black' : 'red';
+      }
+    }
+  },
+  {
+    indicatorKey: 'Sales',
+    title: 'Sales',
+    width: 'auto',
+    showSort: false,
+    headerStyle: { fontWeight: 'normal' },
+    format: (rec: string) => `$${Number(rec).toFixed(2)}`,
+    style: {
+      padding: [16, 28, 16, 28],
+      color(args: any) {
+        return args.dataValue >= 0 ? 'black' : 'red';
+      }
+    }
+  },
+  {
+    indicatorKey: 'Profit',
+    title: 'Profit',
+    width: 'auto',
+    showSort: false,
+    headerStyle: { fontWeight: 'normal' },
+    format: (rec: string) => `$${Number(rec).toFixed(2)}`,
+    style: {
+      padding: [16, 28, 16, 28],
+      color(args: any) {
+        return args.dataValue >= 0 ? 'black' : 'red';
+      }
+    }
+  }
+]);
+const pivotTableRows = ref([
+  {
+    dimensionKey: 'City',
+    title: 'City',
+    headerStyle: { textStick: true },
+    width: 'auto'
+  }
+]);
+const pivotTableRecords = ref([]);
+
+// pivot chart
+const pivotChartRef = ref(null);
+const pivotChartColumns = [
+  {
+    dimensionKey: 'Region',
+    title: 'Region',
+    headerStyle: {
+      textStick: true
+    }
+  },
+  'Category'
+];
+const pivotChartRows = [
+  {
+    dimensionKey: 'Order Year',
+    title: 'Order Year',
+    headerStyle: {
+      textStick: true
+    }
+  },
+  'Ship Mode'
+];
+const pivotChartIndicators = [
+  {
+    indicatorKey: 'Quantity',
+    title: 'Quantity',
+    width: 'auto',
+    cellType: 'chart',
+    chartModule: 'vchart',
+    chartSpec: {
+      stack: true,
+      type: 'bar',
+      data: {
+        id: 'data',
+        fields: {
+          'Sub-Category': {
+            sortIndex: 0,
+            domain: [
+              'Chairs',
+              'Tables',
+              'Bookcases',
+              'Furnishings',
+              'Binders',
+              'Art',
+              'Storage',
+              'Appliances',
+              'Envelopes',
+              'Fasteners',
+              'Paper',
+              'Labels',
+              'Supplies',
+              'Accessories',
+              'Phones',
+              'Copiers',
+              'Machines'
+            ]
+          },
+          'Segment-Indicator': {
+            sortIndex: 1,
+            domain: [
+              'Consumer-Quantity',
+              'Corporate-Quantity',
+              'Home Office-Quantity',
+              'Consumer-Sales',
+              'Corporate-Sales',
+              'Home Office-Sales',
+              'Consumer-Profit',
+              'Corporate-Profit',
+              'Home Office-Profit'
+            ]
+          }
+        }
+      },
+      xField: ['Sub-Category'],
+      yField: 'Quantity',
+      seriesField: 'Segment-Indicator',
+      axes: [
+        { orient: 'left', visible: true, label: { visible: true } },
+        { orient: 'bottom', visible: true }
+      ],
+      bar: {
+        state: {
+          selected: { fill: 'yellow' },
+          selected_reverse: { opacity: 0.2 }
+        }
+      },
+      scales: [
+        {
+          id: 'color',
+          type: 'ordinal',
+          domain: [
+            'Consumer-Quantity',
+            'Corporate-Quantity',
+            'Home Office-Quantity',
+            'Consumer-Sales',
+            'Corporate-Sales',
+            'Home Office-Sales',
+            'Consumer-Profit',
+            'Corporate-Profit',
+            'Home Office-Profit'
+          ],
+          range: [
+            '#2E62F1',
+            '#4DC36A',
+            '#FF8406',
+            '#FFCC00',
+            '#4F44CF',
+            '#5AC8FA',
+            '#003A8C',
+            '#B08AE2',
+            '#FF6341',
+            '#98DD62',
+            '#07A199',
+            '#87DBDD'
+          ]
+        }
+      ]
+    },
+    style: { padding: 1 }
+  },
+  {
+    indicatorKey: 'Sales',
+    title: 'Sales & Profit',
+    cellType: 'chart',
+    chartModule: 'vchart',
+    chartSpec: {
+      type: 'common',
+      series: [
+        {
+          type: 'bar',
+          data: {
+            id: 'data1',
+            fields: {
+              'Sub-Category': {
+                sortIndex: 0,
+                domain: [
+                  'Chairs',
+                  'Tables',
+                  'Bookcases',
+                  'Furnishings',
+                  'Binders',
+                  'Art',
+                  'Storage',
+                  'Appliances',
+                  'Envelopes',
+                  'Fasteners',
+                  'Paper',
+                  'Labels',
+                  'Supplies',
+                  'Accessories',
+                  'Phones',
+                  'Copiers',
+                  'Machines'
+                ]
+              },
+              'Segment-Indicator': {
+                sortIndex: 1,
+                domain: [
+                  'Consumer-Quantity',
+                  'Corporate-Quantity',
+                  'Home Office-Quantity',
+                  'Consumer-Sales',
+                  'Corporate-Sales',
+                  'Home Office-Sales',
+                  'Consumer-Profit',
+                  'Corporate-Profit',
+                  'Home Office-Profit'
+                ]
+              }
+            }
+          },
+          stack: true,
+          xField: ['Sub-Category'],
+          yField: 'Sales',
+          seriesField: 'Segment-Indicator',
+          bar: {
+            state: {
+              selected: { fill: 'yellow' },
+              selected_reverse: { opacity: 0.2 }
+            }
+          }
+        },
+        {
+          type: 'line',
+          data: {
+            id: 'data2',
+            fields: {
+              'Sub-Category': {
+                sortIndex: 0,
+                domain: [
+                  'Chairs',
+                  'Tables',
+                  'Bookcases',
+                  'Furnishings',
+                  'Binders',
+                  'Art',
+                  'Storage',
+                  'Appliances',
+                  'Envelopes',
+                  'Fasteners',
+                  'Paper',
+                  'Labels',
+                  'Supplies',
+                  'Phones',
+                  'Accessories',
+                  'Machines',
+                  'Copiers'
+                ]
+              },
+              'Segment-Indicator': {
+                sortIndex: 1,
+                domain: [
+                  'Consumer-Quantity',
+                  'Corporate-Quantity',
+                  'Home Office-Quantity',
+                  'Consumer-Sales',
+                  'Corporate-Sales',
+                  'Home Office-Sales',
+                  'Consumer-Profit',
+                  'Corporate-Profit',
+                  'Home Office-Profit'
+                ]
+              }
+            }
+          },
+          stack: false,
+          xField: ['Sub-Category'],
+          yField: 'Profit',
+          seriesField: 'Segment-Indicator',
+          line: {
+            state: {
+              selected: { lineWidth: 3 },
+              selected_reverse: { lineWidth: 1 }
+            }
+          },
+          point: {
+            state: {
+              selected: { fill: 'yellow' },
+              selected_reverse: { fill: '#ddd' }
+            }
+          }
+        }
+      ],
+      scales: [
+        {
+          id: 'color',
+          type: 'ordinal',
+          domain: [
+            'Consumer-Quantity',
+            'Corporate-Quantity',
+            'Home Office-Quantity',
+            'Consumer-Sales',
+            'Corporate-Sales',
+            'Home Office-Sales',
+            'Consumer-Profit',
+            'Corporate-Profit',
+            'Home Office-Profit'
+          ],
+          range: [
+            '#2E62F1',
+            '#4DC36A',
+            '#FF8406',
+            '#FFCC00',
+            '#4F44CF',
+            '#5AC8FA',
+            '#003A8C',
+            '#B08AE2',
+            '#FF6341',
+            '#98DD62',
+            '#07A199',
+            '#87DBDD'
+          ]
+        }
+      ]
+    },
+    style: { padding: 1 }
+  }
+];
+const pivotChartOptions = ref({
+  rows: pivotChartRows,
+  columns: pivotChartColumns,
+  indicators: pivotChartIndicators,
+  indicatorsAsCol: false,
+  defaultRowHeight: 200,
+  defaultHeaderRowHeight: 50,
+  defaultColWidth: 280,
+  defaultHeaderColWidth: 100,
+  indicatorTitle: '指标',
+  autoWrapText: true,
+  corner: {
+    titleOnDimension: 'row',
+    headerStyle: { autoWrapText: true }
+  },
+  legends: {
+    orient: 'bottom',
+    type: 'discrete',
+    data: [
+      { label: 'Consumer-Quantity', shape: { fill: '#2E62F1', symbolType: 'circle' } },
+      { label: 'Consumer-Quantity', shape: { fill: '#4DC36A', symbolType: 'square' } },
+      { label: 'Home Office-Quantity', shape: { fill: '#FF8406', symbolType: 'square' } },
+      { label: 'Consumer-Sales', shape: { fill: '#FFCC00', symbolType: 'square' } },
+      { label: 'Consumer-Sales', shape: { fill: '#4F44CF', symbolType: 'square' } },
+      { label: 'Home Office-Sales', shape: { fill: '#5AC8FA', symbolType: 'square' } },
+      { label: 'Consumer-Profit', shape: { fill: '#003A8C', symbolType: 'square' } },
+      { label: 'Consumer-Profit', shape: { fill: '#B08AE2', symbolType: 'square' } },
+      { label: 'Home Office-Profit', shape: { fill: '#FF6341', symbolType: 'square' } }
+    ]
+  },
+  theme: {
+    bodyStyle: { borderColor: 'gray', borderLineWidth: [1, 0, 0, 1] },
+    headerStyle: { borderColor: 'gray', borderLineWidth: [0, 0, 1, 1], hover: { cellBgColor: '#CCE0FF' } },
+    rowHeaderStyle: { borderColor: 'gray', borderLineWidth: [1, 1, 0, 0], hover: { cellBgColor: '#CCE0FF' } },
+    cornerHeaderStyle: { borderColor: 'gray', borderLineWidth: [0, 1, 1, 0], hover: { cellBgColor: '' } },
+    cornerRightTopCellStyle: { borderColor: 'gray', borderLineWidth: [0, 0, 1, 1], hover: { cellBgColor: '' } },
+    cornerLeftBottomCellStyle: { borderColor: 'gray', borderLineWidth: [1, 1, 0, 0], hover: { cellBgColor: '' } },
+    cornerRightBottomCellStyle: { borderColor: 'gray', borderLineWidth: [1, 0, 0, 1], hover: { cellBgColor: '' } },
+    rightFrozenStyle: { borderColor: 'gray', borderLineWidth: [1, 0, 1, 1], hover: { cellBgColor: '' } },
+    bottomFrozenStyle: { borderColor: 'gray', borderLineWidth: [1, 1, 0, 1], hover: { cellBgColor: '' } },
+    selectionStyle: { cellBgColor: '', cellBorderColor: '' },
+    frameStyle: { borderLineWidth: 0 }
+  }
+});
+const pivotChartRecords = ref({} as any);
+const handleLegendItemClick = (args: { value: any }) => {
+  (pivotChartRef?.value as any)?.vTableInstance.updateFilterRules([
+    {
+      filterKey: 'Segment-Indicator',
+      filteredValues: args.value
+    }
+  ]);
+};
+
+// custom layout list table
+const customLayoutListTableRef = ref(null);
+const customLayoutListTableOptions = ref({
+  defaultRowHeight: 80
+});
+const customLayoutListTableRecords = ref([
+  {
+    bloggerId: 1,
+    bloggerName: 'Virtual Anchor Xiaohua',
+    bloggerAvatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/flower.jpg',
+    introduction:
+      'Hi everyone, I am Xiaohua, the virtual host. I am a little fairy who likes games, animation and food. I hope to share happy moments with you through live broadcast.',
+    fansCount: 400,
+    worksCount: 10,
+    viewCount: 5,
+    city: 'Dream City',
+    tags: ['game', 'anime', 'food']
+  },
+  {
+    bloggerId: 2,
+    bloggerName: 'Virtual anchor little wolf',
+    bloggerAvatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/wolf.jpg',
+    introduction:
+      'Hello everyone, I am the virtual anchor Little Wolf. I like music, travel and photography, and I hope to explore the beauty of the world with you through live broadcast.',
+    fansCount: 800,
+    worksCount: 20,
+    viewCount: 15,
+    city: 'City of Music',
+    tags: ['music', 'travel', 'photography']
+  },
+  {
+    bloggerId: 3,
+    bloggerName: 'Virtual anchor bunny',
+    bloggerAvatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/rabbit.jpg',
+    introduction:
+      'Hello everyone, I am the virtual anchor Xiaotu. I like painting, handicrafts and beauty makeup. I hope to share creativity and fashion with you through live broadcast.',
+    fansCount: 600,
+    worksCount: 15,
+    viewCount: 10,
+    city: 'City of Art',
+    tags: ['painting', 'handmade', 'beauty makeup']
+  },
+  {
+    bloggerId: 4,
+    bloggerName: 'Virtual anchor kitten',
+    bloggerAvatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/cat.jpg',
+    introduction:
+      'Hello everyone, I am the virtual host Kitty. I am a lazy cat who likes dancing, fitness and cooking. I hope to live a healthy and happy life with everyone through the live broadcast.',
+    fansCount: 1000,
+    worksCount: 30,
+    viewCount: 20,
+    city: 'Health City',
+    tags: ['dance', 'fitness', 'cooking']
+  },
+  {
+    bloggerId: 5,
+    bloggerName: 'Virtual anchor Bear',
+    bloggerAvatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/bear.jpg',
+    introduction:
+      'Hello everyone, I am the virtual host Xiaoxiong. A little wise man who likes movies, reading and philosophy, I hope to explore the meaning of life with you through live broadcast.',
+    fansCount: 1200,
+    worksCount: 25,
+    viewCount: 18,
+    city: 'City of Wisdom',
+    tags: ['Movie', 'Literature']
+  },
+  {
+    bloggerId: 6,
+    bloggerName: 'Virtual anchor bird',
+    bloggerAvatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/bird.jpeg',
+    introduction:
+      'Hello everyone, I am the virtual anchor Xiaoniao. I like singing, acting and variety shows. I hope to be happy with everyone through the live broadcast.',
+    fansCount: 900,
+    worksCount: 12,
+    viewCount: 8,
+    city: 'Happy City',
+    tags: ['music', 'performance', 'variety']
+  }
+]);
+const customLayoutListTableColumnStyle = ref({ fontFamily: 'Arial', fontSize: 12, fontWeight: 'bold' });
+onMounted(() => {
+  // pivot tablt records
+  fetch('https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/North_American_Superstore_Pivot_data.json')
+    .then(res => res.json())
+    .then(jsonData => {
+      // update record
+      pivotTableRecords.value = jsonData;
+    });
+
+  // pivot chart records
+  fetch('https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/North_American_Superstore_Pivot_Chart_data.json')
+    .then(res => res.json())
+    .then(data => {
+      // update record
+      pivotChartRecords.value = data;
+    });
+});
+</script>
+
+<template>
+  <div class="h-full">
+    <NSpace vertical :size="16">
+      <NCard title="List Table" :bordered="false" class="h-full w-2/3 card-wrapper">
+        <ListTable ref="listTableRef" :options="{}" :records="listRecords" height="400px">
+          <ListColumn field="Order ID" title="Order ID" width="auto" />
+          <ListColumn field="Customer ID" title="Customer ID" width="auto" />
+          <ListColumn field="Product Name" title="Product Name" width="auto" />
+          <ListColumn field="Category" title="Category" width="auto" />
+          <ListColumn field="Sub-Category" title="Sub-Category" width="auto" />
+          <ListColumn field="Region" title="Region" width="auto" />
+          <ListColumn field="City" title="City" width="auto" />
+          <ListColumn field="Order Date" title="Order Date" width="auto" />
+          <ListColumn field="Quantity" title="Quantity" width="auto" />
+          <ListColumn field="Sales" title="Sales" width="auto" />
+          <ListColumn field="Profit" title="Profit" width="auto" />
+        </ListTable>
+      </NCard>
+
+      <NCard title="Pivot Table" :bordered="false" class="h-full w-2/3 card-wrapper">
+        <PivotTable ref="pivotTableRef" :options="pivotTableOptions" :records="pivotTableRecords" height="400px">
+          <PivotColumnDimension
+            title="Category"
+            dimension-key="Category"
+            :header-style="{ textStick: true }"
+            width="auto"
+          />
+          <PivotRowDimension
+            v-for="(row, index) in pivotTableRows"
+            :key="index"
+            :dimension-key="row.dimensionKey"
+            :title="row.title"
+            :header-style="row.headerStyle"
+            :width="row.width"
+          />
+          <PivotIndicator
+            v-for="(indicator, index) in pivotTableIndicators"
+            :key="index"
+            :indicator-key="indicator.indicatorKey"
+            :title="indicator.title"
+            :width="indicator.width"
+            :show-sort="indicator.showSort"
+            :header-style="indicator.headerStyle"
+            :format="indicator.format"
+            :style="indicator.style"
+          />
+          <PivotCorner title-on-dimension="row" />
+          <Menu menu-type="html" :context-menu-items="['copy', 'paste', 'delete', '...']" />
+        </PivotTable>
+      </NCard>
+
+      <NCard title="Pivot Chart" :bordered="false" class="h-full w-2/3 card-wrapper">
+        <PivotChart
+          ref="pivotChartRef"
+          :options="pivotChartOptions"
+          :records="pivotChartRecords"
+          height="800px"
+          @on-legend-item-click="handleLegendItemClick"
+        />
+      </NCard>
+
+      <NCard title="Custom Component" :bordered="false" class="h-full w-2/3 card-wrapper">
+        <ListTable
+          ref="customLayoutListTableRef"
+          :options="customLayoutListTableOptions"
+          :records="customLayoutListTableRecords"
+          height="400px"
+        >
+          <!-- Order Number Column -->
+          <ListColumn field="bloggerId" title="order number" width="100" />
+
+          <!-- Anchor Nickname Column with Custom Layout -->
+          <ListColumn field="bloggerName" title="anchor nickname" :width="330">
+            <template #customLayout="{ record, height, width }">
+              <Group :height="height" :width="width" display="flex" flex-direction="row" flex-wrap="nowrap">
+                <!-- Avatar Group -->
+                <Group
+                  :height="height"
+                  :width="60"
+                  display="flex"
+                  flex-direction="column"
+                  align-items="center"
+                  justify-content="space-around"
+                  fill="red"
+                  :opacity="0.1"
+                >
+                  <Image id="icon0" :width="50" :height="50" :image="record.bloggerAvatar" :corner-radius="25" />
+                </Group>
+                <!-- Blogger Info Group -->
+                <Group :height="height" :width="width - 60" display="flex" flex-direction="column" flex-wrap="nowrap">
+                  <Group
+                    :height="height / 2"
+                    :width="width - 60"
+                    display="flex"
+                    flex-wrap="wrap"
+                    align-items="center"
+                    fill="orange"
+                    :opacity="0.1"
+                  >
+                    <Text
+                      :text="record.bloggerName"
+                      :font-size="13"
+                      font-family="sans-serif"
+                      fill="black"
+                      :bounds-padding="[0, 0, 0, 10]"
+                    />
+                    <Image
+                      id="location"
+                      image="https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/location.svg"
+                      :width="15"
+                      :height="15"
+                      :bounds-padding="[0, 0, 0, 10]"
+                      cursor="pointer"
+                    />
+                    <Text :text="record.city" :font-size="11" font-family="sans-serif" fill="#6f7070" />
+                  </Group>
+                  <!-- Tags Group -->
+                  <Group
+                    :height="height / 2"
+                    :width="width - 60"
+                    display="flex"
+                    align-items="center"
+                    fill="yellow"
+                    :opacity="0.1"
+                  >
+                    <Tag
+                      v-for="tag in record?.tags"
+                      :key="tag"
+                      :text="tag"
+                      :text-style="{ fontSize: 10, fontFamily: 'sans-serif', fill: 'rgb(51, 101, 238)' }"
+                      :panel="{ visible: true, fill: '#f4f4f2', cornerRadius: 5 }"
+                      :space="5"
+                      :bounds-padding="[0, 0, 0, 5]"
+                    />
+                  </Group>
+                </Group>
+              </Group>
+            </template>
+          </ListColumn>
+
+          <!-- Other Columns -->
+          <ListColumn
+            field="fansCount"
+            title="Fans Count"
+            width="120"
+            :field-format="rec => rec.fansCount + 'w'"
+            :style="customLayoutListTableColumnStyle"
+          />
+          <ListColumn field="worksCount" title="Works Count" :style="customLayoutListTableColumnStyle" width="135" />
+          <ListColumn
+            field="viewCount"
+            title="View Count"
+            width="120"
+            :field-format="rec => rec.viewCount + 'w'"
+            :style="customLayoutListTableColumnStyle"
+          />
+        </ListTable>
+      </NCard>
+
+      <NCard :bordered="false" class="h-full w-2/3 card-wrapper">
+        <WebSiteLink label="More VTable Demos: " link="https://www.visactor.com/vtable/example" />
+      </NCard>
+    </NSpace>
+  </div>
+</template>