diff --git a/package.json b/package.json
index 6aec83f..479220c 100644
--- a/package.json
+++ b/package.json
@@ -61,6 +61,7 @@
     "@visactor/vchart-theme": "1.12.2",
     "@visactor/vtable-editors": "1.10.5",
     "@visactor/vtable-gantt": "1.10.5",
+    "@visactor/vue-vtable": "1.10.5",
     "@vueuse/components": "11.2.0",
     "@vueuse/core": "11.2.0",
     "clipboard": "2.0.11",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0427c67..7d3705f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -53,6 +53,9 @@ importers:
       '@visactor/vtable-gantt':
         specifier: 1.10.5
         version: 1.10.5
+      '@visactor/vue-vtable':
+        specifier: 1.10.5
+        version: 1.10.5
       '@vueuse/components':
         specifier: 11.2.0
         version: 11.2.0(vue@3.5.13)
@@ -3551,6 +3554,13 @@ packages:
       cssfontparser: 1.2.1
     dev: false
 
+  /@visactor/vue-vtable@1.10.5:
+    resolution: {integrity: sha512-e71e8U9+or3wWuS6yjkkP8V55rutiOnfQRtj0uWJF1zihc1T9xb8Ba30pQ3co1vXOah86/1HpyzWlQ/2Gq3+DA==}
+    dependencies:
+      '@visactor/vtable': 1.10.5
+      '@visactor/vutils': 0.18.18
+    dev: false
+
   /@visactor/vutils-extension@1.11.14:
     resolution: {integrity: sha512-vfViZphXJBH0NwCHIoe8S1/+tDtykEKIfsLMIHprh7Azv7fVSB1eotG00SAegK75E18ARQGNXF1DxixUFiXSIQ==}
     dependencies:
diff --git a/src/locales/langs/en-us.ts b/src/locales/langs/en-us.ts
index da74dc9..eed191e 100644
--- a/src/locales/langs/en-us.ts
+++ b/src/locales/langs/en-us.ts
@@ -220,7 +220,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: {
diff --git a/src/locales/langs/zh-cn.ts b/src/locales/langs/zh-cn.ts
index 1ee8fce..9c34400 100644
--- a/src/locales/langs/zh-cn.ts
+++ b/src/locales/langs/zh-cn.ts
@@ -220,7 +220,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: {
diff --git a/src/router/elegant/imports.ts b/src/router/elegant/imports.ts
index 924ae51..40a4ff0 100644
--- a/src/router/elegant/imports.ts
+++ b/src/router/elegant/imports.ts
@@ -54,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"),
diff --git a/src/router/elegant/routes.ts b/src/router/elegant/routes.ts
index ca294bb..d0105ad 100644
--- a/src/router/elegant/routes.ts
+++ b/src/router/elegant/routes.ts
@@ -559,6 +559,25 @@ export const generatedRoutes: GeneratedRoute[] = [
           icon: 'simple-icons:swiper'
         }
       },
+      {
+        name: 'plugin_tables',
+        path: '/plugin/tables',
+        meta: {
+          title: 'plugin_tables',
+          i18nKey: 'route.plugin_tables'
+        },
+        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',
diff --git a/src/router/elegant/transform.ts b/src/router/elegant/transform.ts
index 3aaafbf..5eb0871 100644
--- a/src/router/elegant/transform.ts
+++ b/src/router/elegant/transform.ts
@@ -227,6 +227,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"
diff --git a/src/typings/elegant-router.d.ts b/src/typings/elegant-router.d.ts
index 42d384e..30f8723 100644
--- a/src/typings/elegant-router.d.ts
+++ b/src/typings/elegant-router.d.ts
@@ -81,6 +81,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";
@@ -199,6 +201,7 @@ declare module "@elegant-router/types" {
     | "plugin_pinyin"
     | "plugin_print"
     | "plugin_swiper"
+    | "plugin_tables_vtable"
     | "plugin_typeit"
     | "plugin_video"
     | "user-center"
diff --git a/src/views/plugin/tables/vtable/data.ts b/src/views/plugin/tables/vtable/data.ts
new file mode 100644
index 0000000..8a455d1
--- /dev/null
+++ b/src/views/plugin/tables/vtable/data.ts
@@ -0,0 +1,1044 @@
+export 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 const customListRecords = [
+  {
+    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']
+  }
+];
+
+export const pivotChartColumns = [
+  {
+    dimensionKey: 'Region',
+    title: 'Region',
+    headerStyle: {
+      textStick: true
+    }
+  },
+  'Category'
+];
+export const pivotChartRows = [
+  {
+    dimensionKey: 'Order Year',
+    title: 'Order Year',
+    headerStyle: {
+      textStick: true
+    }
+  },
+  'Ship Mode'
+];
+export 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 }
+  }
+];
diff --git a/src/views/plugin/tables/vtable/index.vue b/src/views/plugin/tables/vtable/index.vue
new file mode 100644
index 0000000..85cf4e4
--- /dev/null
+++ b/src/views/plugin/tables/vtable/index.vue
@@ -0,0 +1,408 @@
+<script setup lang="tsx">
+import { computed, onMounted, ref } from 'vue';
+import {
+  Group,
+  Image,
+  ListColumn,
+  ListTable,
+  Menu,
+  PivotChart,
+  PivotColumnDimension,
+  PivotCorner,
+  PivotIndicator,
+  PivotRowDimension,
+  PivotTable,
+  Tag,
+  Text,
+  VTable,
+  registerChartModule
+} from '@visactor/vue-vtable';
+import VChart from '@visactor/vchart';
+import { useThemeStore } from '@/store/modules/theme';
+import { customListRecords, listTableRecords, pivotChartColumns, pivotChartIndicators, pivotChartRows } from './data';
+
+registerChartModule('vchart', VChart);
+const titleColorPool = ['#3370ff', '#34c724', '#ff9f1a', '#ff4050', '#1f2329'];
+
+const themeStore = useThemeStore();
+
+// list table
+const listTableRef = ref(null);
+const listOptions = computed(() => {
+  const options = {
+    theme: themeStore.darkMode ? VTable.themes.DARK : VTable.themes.DEFAULT
+  };
+  return options;
+});
+const listRecords = ref<Record<string, string | number>[]>(listTableRecords);
+
+// group table
+const groupTableRef = ref(null);
+const groupOptions = computed(() => {
+  const options = {
+    groupBy: ['Category', 'Sub-Category'],
+    theme: (themeStore.darkMode ? VTable.themes.DARK : VTable.themes.DEFAULT).extends({
+      groupTitleStyle: {
+        fontWeight: 'bold',
+        bgColor: (args: any) => {
+          const { col, row, table } = args;
+          const index = table.getGroupTitleLevel(col, row);
+          if (index !== undefined) {
+            return titleColorPool[index % titleColorPool.length] as string;
+          }
+          return 'white';
+        }
+      }
+    })
+  };
+  return options;
+});
+const groupRecords = ref<Record<string, string | number>[]>(listTableRecords);
+
+// pivot table
+const pivotTableRef = ref(null);
+const pivotTableOptions = computed(() => {
+  return {
+    tooltip: {
+      isShowOverflowTextTooltip: true
+    },
+    dataConfig: {
+      sortRules: [
+        {
+          sortField: 'Category',
+          sortBy: ['Office Supplies', 'Technology', 'Furniture']
+        }
+      ]
+    },
+    widthMode: 'standard',
+    theme: themeStore.darkMode ? VTable.themes.DARK : VTable.themes.DEFAULT,
+    emptyTip: {
+      text: 'no data records'
+    }
+  };
+});
+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 pivotChartOptions = computed(() => {
+  return {
+    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: (themeStore.darkMode ? VTable.themes.DARK : VTable.themes.DEFAULT).extends({
+      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 }
+    }),
+    emptyTip: {
+      text: 'no data records'
+    }
+  };
+});
+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 = computed(() => {
+  return {
+    defaultRowHeight: 80,
+    theme: themeStore.darkMode ? VTable.themes.DARK : VTable.themes.DEFAULT
+  };
+});
+const customLayoutListTableRecords = ref(customListRecords);
+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">
+    <ElSpace fill direction="vertical" class="mb-16px w-full" :size="16">
+      <ElCard header="List Table" class="h-full w-2/3 card-wrapper">
+        <ListTable ref="listTableRef" :options="listOptions" :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>
+      </ElCard>
+
+      <ElCard header="Group Table" class="h-full w-2/3 card-wrapper">
+        <ListTable ref="groupTableRef" :options="groupOptions" :records="groupRecords" 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>
+      </ElCard>
+
+      <ElCard header="Pivot Table" 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>
+      </ElCard>
+
+      <ElCard header="Pivot Chart" class="h-full w-2/3 card-wrapper">
+        <PivotChart
+          ref="pivotChartRef"
+          :options="pivotChartOptions"
+          :records="pivotChartRecords"
+          height="800px"
+          @on-legend-item-click="handleLegendItemClick"
+        />
+      </ElCard>
+
+      <ElCard header="Custom Component" 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>
+      </ElCard>
+
+      <ElCard class="h-full w-2/3 card-wrapper">
+        <WebSiteLink label="More VTable Demos: " link="https://www.visactor.com/vtable/example" />
+      </ElCard>
+    </ElSpace>
+  </div>
+</template>