diff --git a/components/vc-table/Body/BodyRow.tsx b/components/vc-table/Body/BodyRow.tsx
index 9e60d9f82..92f0c3e34 100644
--- a/components/vc-table/Body/BodyRow.tsx
+++ b/components/vc-table/Body/BodyRow.tsx
@@ -162,6 +162,7 @@ export default defineComponent<BodyRowProps<unknown>>({
                 customRender={customRender}
                 {...fixedInfo}
                 additionalProps={additionalCellProps}
+                column={column}
                 v-slots={{
                   // ============= Used for nest expandable =============
                   appendNode: () => {
diff --git a/examples/App.vue b/examples/App.vue
index a57385d1c..61c07f278 100644
--- a/examples/App.vue
+++ b/examples/App.vue
@@ -1,45 +1,73 @@
+<docs>
+---
+order: 0
+title:
+  en-US: Basic Usage
+  zh-CN: 基本用法
+---
+
+## zh-CN
+
+简单的表格，最后一列是各种操作。
+
+## en-US
+
+Simple table with actions.
+</docs>
+
 <template>
   <a-table :columns="columns" :data-source="data">
-    <template #customTitle>
-      <span>
-        <smile-outlined />
-        Name
-      </span>
+    <template #headerCell="{ title, column }">
+      <template v-if="column.key === 'name'">
+        <span>
+          <smile-outlined />
+          Name
+        </span>
+      </template>
+      <template v-else>{{ title }}</template>
     </template>
-    <template #tags="{ text: tags }">
-      <span>
-        <a-tag
-          v-for="tag in tags"
-          :key="tag"
-          :color="tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'"
-        >
-          {{ tag.toUpperCase() }}
-        </a-tag>
-      </span>
-    </template>
-    <template #action="{ record }">
-      <span>
-        <a>Invite 一 {{ record.name }}</a>
-        <a-divider type="vertical" />
-        <a>Delete</a>
-        <a-divider type="vertical" />
-        <a class="ant-dropdown-link">
-          More actions
-          <down-outlined />
+
+    <template #bodyCell="{ column, record }">
+      <template v-if="column.key === 'name'">
+        <a>
+          {{ record.name }}
         </a>
-      </span>
+      </template>
+      <template v-else-if="column.key === 'tags'">
+        <span>
+          <a-tag
+            v-for="tag in record.tags"
+            :key="tag"
+            :color="tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'"
+          >
+            {{ tag.toUpperCase() }}
+          </a-tag>
+        </span>
+      </template>
+      <template v-else-if="column.key === 'action'">
+        <span>
+          <a>Invite 一 {{ record.name }}</a>
+          <a-divider type="vertical" />
+          <a>Delete</a>
+          <a-divider type="vertical" />
+          <a class="ant-dropdown-link">
+            More actions
+            <down-outlined />
+          </a>
+        </span>
+      </template>
+      <template v-else>{{ record.name }}</template>
     </template>
   </a-table>
 </template>
 <script lang="ts">
 import { SmileOutlined, DownOutlined } from '@ant-design/icons-vue';
-import { defineComponent, ref } from 'vue';
+import { defineComponent } from 'vue';
 const columns = [
   {
-    title: 'Name',
+    name: 'Name',
     dataIndex: 'name',
     key: 'name',
-    slots: { title: 'customTitle', customRender: 'name' },
   },
   {
     title: 'Age',
@@ -55,12 +83,10 @@ const columns = [
     title: 'Tags',
     key: 'tags',
     dataIndex: 'tags',
-    slots: { customRender: 'tags' },
   },
   {
     title: 'Action',
     key: 'action',
-    slots: { customRender: 'action' },
   },
 ];
 
@@ -94,12 +120,9 @@ export default defineComponent({
     DownOutlined,
   },
   setup() {
-    const test = ref('111');
-    window.test = test;
     return {
       data,
       columns,
-      test,
     };
   },
 });
diff --git a/examples/themeConfig.ts b/examples/themeConfig.ts
new file mode 100644
index 000000000..6c38a978a
--- /dev/null
+++ b/examples/themeConfig.ts
@@ -0,0 +1,54 @@
+import less from 'less';
+import defaultVars from '../scripts/default-vars';
+import dark from '../scripts/dark-vars';
+const themeConfig = [
+  {
+    theme: 'dark',
+    htmlThemeAttr: 'dark',
+    modifyVars: {
+      hack: `true;@import "${require.resolve('../components/style/color/colorPalette.less')}";`,
+      ...defaultVars,
+      ...dark,
+      'text-color': 'fade(@white, 65%)',
+      'gray-8': '@text-color',
+      'background-color-base': '#555',
+      'skeleton-color': 'rgba(0,0,0,0.8)',
+    },
+  },
+];
+const additionalData = async (content: string, filename: string): Promise<string> => {
+  const themePromises = themeConfig.map(async t => {
+    const { htmlThemeAttr, modifyVars = {} } = t;
+    const options = {
+      javascriptEnabled: true,
+      modifyVars,
+      relativeUrls: true,
+      filename,
+    };
+    try {
+      const { css } = await less.render(content, options);
+      let res = '';
+      if (htmlThemeAttr && css) {
+        res = `
+        [data-doc-theme=${htmlThemeAttr}] {
+          ${css}
+        }
+        `;
+      }
+      return Promise.resolve(res);
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.log(error);
+      return Promise.reject(content);
+    }
+  });
+  let res = content;
+  for (const themePromise of themePromises) {
+    const theme = await themePromise;
+    res += theme;
+  }
+  return res;
+};
+
+export default themeConfig;
+export { themeConfig, additionalData };
diff --git a/examples/vite.config.ts b/examples/vite.config.ts
index 041d37ca0..6a3a643f1 100644
--- a/examples/vite.config.ts
+++ b/examples/vite.config.ts
@@ -3,14 +3,17 @@ import vue from '@vitejs/plugin-vue';
 import md from '../plugin/md';
 import docs from '../plugin/docs';
 import vueJsx from '@vitejs/plugin-vue-jsx';
-
+import { additionalData } from './themeConfig';
+import defaultVar from '../scripts/default-vars';
 /**
  * @type {import('vite').UserConfig}
  */
 export default {
   resolve: {
     alias: {
+      '@': path.join(__dirname, './src'),
       vue: 'vue/dist/vue.esm-bundler.js',
+      'ant-design-vue/es': path.resolve(__dirname, '../components'),
       'ant-design-vue': path.resolve(__dirname, '../components'),
     },
   },
@@ -31,16 +34,23 @@ export default {
       'fetch-jsonp',
       '@ant-design/icons-vue',
       'lodash-es',
+      'dayjs',
       'vue',
       'vue-router',
-      'dayjs',
+      'vue-i18n',
       'async-validator',
     ],
   },
   css: {
     preprocessorOptions: {
       less: {
+        modifyVars: {
+          hack: `true;@import "${require.resolve('../components/style/color/colorPalette.less')}";`,
+          ...defaultVar,
+        },
         javascriptEnabled: true,
+        // includePaths: ["node_modules/"],
+        additionalData,
       },
     },
   },
diff --git a/plugin/docs/index.ts b/plugin/docs/index.ts
index 48914c7d4..5c4f44058 100644
--- a/plugin/docs/index.ts
+++ b/plugin/docs/index.ts
@@ -15,7 +15,10 @@ export default (options: Options = {}): Plugin => {
   return {
     name: 'vueToMdToVue',
     transform(code, id) {
-      if (id.endsWith('.vue') && id.indexOf('/demo/') > -1 && id.indexOf('index.vue') === -1) {
+      if (
+        (id.endsWith('.vue') && id.indexOf('/demo/') > -1 && id.indexOf('index.vue') === -1) ||
+        id.indexOf('/examples/App.vue') > -1
+      ) {
         // transform .md files into vueSrc so plugin-vue can handle it
         return { code: markdownToVue(vueToMarkdown(code, id).vueSrc, id).vueSrc, map: null };
       }