From caa686cefd04906cee5ba5914a7e73507bd8d3a2 Mon Sep 17 00:00:00 2001
From: Rui-Sun <sunrui1992@foxmail.com>
Date: Thu, 24 Oct 2024 16:36:31 +0800
Subject: [PATCH] feat: add dark mode support in vtable

---
 src/views/plugin/charts/vchart/index.vue |  17 +-
 src/views/plugin/tables/vtable/data.ts   | 354 ++++++++++++++-
 src/views/plugin/tables/vtable/index.vue | 538 ++++++-----------------
 3 files changed, 489 insertions(+), 420 deletions(-)

diff --git a/src/views/plugin/charts/vchart/index.vue b/src/views/plugin/charts/vchart/index.vue
index ce2ce320..91d21ce2 100644
--- a/src/views/plugin/charts/vchart/index.vue
+++ b/src/views/plugin/charts/vchart/index.vue
@@ -39,27 +39,30 @@ onUnmounted(() => {
 
 <template>
   <NSpace vertical :size="16">
-    <NCard title="List Chart" :bordered="false" class="h-full card-wrapper">
+    <NCard title="Stacked Dash Area Chart" :bordered="false" class="h-full card-wrapper">
       <div ref="stackedDashAreaRef" class="h-400px" />
     </NCard>
-    <NCard title="List Chart" :bordered="false" class="h-full card-wrapper">
+    <NCard title="Bar Mark Point Chart" :bordered="false" class="h-full card-wrapper">
       <div ref="barMarkPointRef" class="h-400px" />
     </NCard>
-    <NCard title="List Chart" :bordered="false" class="h-full card-wrapper">
+    <NCard title="Histogram Different Bin Chart" :bordered="false" class="h-full card-wrapper">
       <div ref="histogramDifferentBinRef" class="h-400px" />
     </NCard>
-    <NCard title="List Chart" :bordered="false" class="h-full card-wrapper">
+    <NCard title="Ranking Bar Chart" :bordered="false" class="h-full card-wrapper">
       <div ref="rankingBarRef" class="h-400px" />
     </NCard>
-    <NCard title="List Chart" :bordered="false" class="h-full card-wrapper">
+    <NCard title="Circular Progress Tick Chart" :bordered="false" class="h-full card-wrapper">
       <div ref="circularProgressTickRef" class="h-400px" />
     </NCard>
-    <NCard title="List Chart" :bordered="false" class="h-full card-wrapper">
+    <NCard title="Liquid Chart Smart Invert Chart" :bordered="false" class="h-full card-wrapper">
       <div ref="liquidChartSmartInvertRef" class="h-400px" />
     </NCard>
-    <NCard title="List Chart" :bordered="false" class="h-full card-wrapper">
+    <NCard title="Shape Word Cloud Chart" :bordered="false" class="h-full card-wrapper">
       <div ref="shapeWordCloudRef" class="h-400px" />
     </NCard>
+    <NCard :bordered="false" class="h-full w-2/3 card-wrapper">
+      <WebSiteLink label="More VChart Demos: " link="https://www.visactor.com/vchart/example" />
+    </NCard>
   </NSpace>
 </template>
 
diff --git a/src/views/plugin/tables/vtable/data.ts b/src/views/plugin/tables/vtable/data.ts
index 0ef264cb..8a455d11 100644
--- a/src/views/plugin/tables/vtable/data.ts
+++ b/src/views/plugin/tables/vtable/data.ts
@@ -1,4 +1,4 @@
-const listTableRecords = [
+export const listTableRecords = [
   {
     'Row ID': '7981',
     'Order ID': 'CA-2015-103800',
@@ -691,4 +691,354 @@ const listTableRecords = [
   }
 ];
 
-export { listTableRecords };
+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
index a8a0395a..fa272d0a 100644
--- a/src/views/plugin/tables/vtable/index.vue
+++ b/src/views/plugin/tables/vtable/index.vue
@@ -1,5 +1,5 @@
 <script setup lang="tsx">
-import { onMounted, ref } from 'vue';
+import { computed, onMounted, ref } from 'vue';
 import {
   Group,
   Image,
@@ -14,32 +14,72 @@ import {
   PivotTable,
   Tag,
   Text,
+  VTable,
   registerChartModule
 } from '@visactor/vue-vtable';
 import VChart from '@visactor/vchart';
-import { listTableRecords } from './data';
+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 = ref({
-  tooltip: {
-    isShowOverflowTextTooltip: true
-  },
-  dataConfig: {
-    sortRules: [
-      {
-        sortField: 'Category',
-        sortBy: ['Office Supplies', 'Technology', 'Furniture']
-      }
-    ]
-  },
-  widthMode: 'standard'
+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([
   {
@@ -96,325 +136,54 @@ 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'
-          ]
-        }
+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' } }
       ]
     },
-    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 }
-  }
+    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 }) => {
@@ -428,84 +197,15 @@ const handleLegendItemClick = (args: { value: any }) => {
 
 // custom layout list table
 const customLayoutListTableRef = ref(null);
-const customLayoutListTableOptions = ref({
-  defaultRowHeight: 80
+const customLayoutListTableOptions = computed(() => {
+  return {
+    defaultRowHeight: 80,
+    theme: themeStore.darkMode ? VTable.themes.DARK : VTable.themes.DEFAULT
+  };
 });
-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 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')
@@ -529,7 +229,23 @@ onMounted(() => {
   <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">
+        <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>
+      </NCard>
+
+      <NCard title="Group Table" :bordered="false" 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" />
@@ -594,10 +310,10 @@ onMounted(() => {
           height="400px"
         >
           <!-- Order Number Column -->
-          <ListColumn field="bloggerId" title="order number" width="100" />
+          <ListColumn field="bloggerId" title="Order Number" width="100" />
 
           <!-- Anchor Nickname Column with Custom Layout -->
-          <ListColumn field="bloggerName" title="anchor nickname" :width="330">
+          <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 -->