diff --git a/packages/nutui-taro-demo/src/exhibition/pages/table/align.vue b/packages/nutui-taro-demo/src/exhibition/pages/table/align.vue
new file mode 100644
index 0000000000..090eecacd0
--- /dev/null
+++ b/packages/nutui-taro-demo/src/exhibition/pages/table/align.vue
@@ -0,0 +1,40 @@
+<template>
+  <nut-table :columns="columns" :data="data"></nut-table>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const columns = ref([
+  {
+    title: '姓名',
+    key: 'name',
+    align: 'left'
+  },
+  {
+    title: '性别',
+    key: 'sex',
+    align: 'center'
+  },
+  {
+    title: '学历',
+    key: 'record',
+    align: 'right'
+  }
+]);
+const data = ref([
+  {
+    name: 'Tom',
+    sex: '男',
+    record: '小学'
+  },
+  {
+    name: 'Lucy',
+    sex: '女',
+    record: '本科'
+  },
+  {
+    name: 'Jack',
+    sex: '男',
+    record: '高中'
+  }
+]);
+</script>
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/table/async.vue b/packages/nutui-taro-demo/src/exhibition/pages/table/async.vue
new file mode 100644
index 0000000000..3728947726
--- /dev/null
+++ b/packages/nutui-taro-demo/src/exhibition/pages/table/async.vue
@@ -0,0 +1,59 @@
+<template>
+  <nut-table :columns="columns" :data="data">
+    <template #nodata>Loading...</template>
+  </nut-table>
+</template>
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+const columns = ref([
+  {
+    title: '姓名',
+    key: 'name'
+  },
+  {
+    title: '性别',
+    key: 'sex'
+  },
+  {
+    title: '学历',
+    key: 'record'
+  },
+  {
+    title: '年龄',
+    key: 'age'
+  },
+  {
+    title: '地址',
+    key: 'address'
+  }
+]);
+
+const data = ref<Array<any>>([]);
+onMounted(() => {
+  setTimeout(() => {
+    data.value = [
+      {
+        address: '北京',
+        name: 'Tom',
+        sex: '男',
+        record: '小学',
+        age: 13
+      },
+      {
+        record: '本科',
+        name: 'Lucy',
+        sex: '女',
+        age: 34,
+        address: '上海'
+      },
+      {
+        name: 'Jack',
+        sex: '男',
+        record: '高中',
+        age: 4,
+        address: '杭州'
+      }
+    ];
+  }, 5000);
+});
+</script>
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/table/basic.vue b/packages/nutui-taro-demo/src/exhibition/pages/table/basic.vue
new file mode 100644
index 0000000000..9f40b30fbb
--- /dev/null
+++ b/packages/nutui-taro-demo/src/exhibition/pages/table/basic.vue
@@ -0,0 +1,37 @@
+<template>
+  <nut-table :columns="columns" :data="data"></nut-table>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const columns = ref([
+  {
+    title: '姓名',
+    key: 'name'
+  },
+  {
+    title: '性别',
+    key: 'sex'
+  },
+  {
+    title: '学历',
+    key: 'record'
+  }
+]);
+const data = ref([
+  {
+    name: 'Tom',
+    sex: '男',
+    record: '小学'
+  },
+  {
+    name: 'Lucy',
+    sex: '女',
+    record: '本科'
+  },
+  {
+    name: 'Jack',
+    sex: '男',
+    record: '高中'
+  }
+]);
+</script>
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/table/border.vue b/packages/nutui-taro-demo/src/exhibition/pages/table/border.vue
new file mode 100644
index 0000000000..bc1c535cb5
--- /dev/null
+++ b/packages/nutui-taro-demo/src/exhibition/pages/table/border.vue
@@ -0,0 +1,37 @@
+<template>
+  <nut-table :columns="columns" :data="data" :bordered="false"></nut-table>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const columns = ref([
+  {
+    title: '姓名',
+    key: 'name'
+  },
+  {
+    title: '性别',
+    key: 'sex'
+  },
+  {
+    title: '学历',
+    key: 'record'
+  }
+]);
+const data = ref([
+  {
+    name: 'Tom',
+    sex: '男',
+    record: '小学'
+  },
+  {
+    name: 'Lucy',
+    sex: '女',
+    record: '本科'
+  },
+  {
+    name: 'Jack',
+    sex: '男',
+    record: '高中'
+  }
+]);
+</script>
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/table/custom.vue b/packages/nutui-taro-demo/src/exhibition/pages/table/custom.vue
new file mode 100644
index 0000000000..cf4e6cdb6d
--- /dev/null
+++ b/packages/nutui-taro-demo/src/exhibition/pages/table/custom.vue
@@ -0,0 +1,68 @@
+<template>
+  <nut-table :columns="columns" :data="data"></nut-table>
+</template>
+<script setup lang="ts">
+import { ref, h } from 'vue';
+import { Dongdong } from '@nutui/icons-vue-taro';
+const columns = ref([
+  {
+    title: '姓名',
+    key: 'name'
+  },
+  {
+    title: '性别',
+    key: 'sex'
+  },
+  {
+    title: '学历',
+    key: 'record'
+  },
+  {
+    title: '操作',
+    key: 'render'
+  }
+]);
+
+const data = ref([
+  {
+    name: 'Tom',
+    sex: '男',
+    record: '小学',
+    render: () => {
+      return h(
+        'button',
+        {
+          onClick: () => {
+            console.log('hello');
+          }
+        },
+        'Hello'
+      );
+    }
+  },
+  {
+    name: 'Lucy',
+    sex: '女',
+    record: '本科',
+    render: () => {
+      return h(Dongdong, { width: '14px', height: '14px ' });
+    }
+  },
+  {
+    name: 'Jack',
+    sex: '男',
+    record: '高中',
+    render: () => {
+      return h(
+        'button',
+        {
+          onClick: () => {
+            window.open('https://www.jd.com');
+          }
+        },
+        '打开京东'
+      );
+    }
+  }
+]);
+</script>
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/table/index.config.js b/packages/nutui-taro-demo/src/exhibition/pages/table/index.config.ts
similarity index 100%
rename from packages/nutui-taro-demo/src/exhibition/pages/table/index.config.js
rename to packages/nutui-taro-demo/src/exhibition/pages/table/index.config.ts
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/table/index.vue b/packages/nutui-taro-demo/src/exhibition/pages/table/index.vue
index eba7b1dc5c..025691e2f6 100644
--- a/packages/nutui-taro-demo/src/exhibition/pages/table/index.vue
+++ b/packages/nutui-taro-demo/src/exhibition/pages/table/index.vue
@@ -1,247 +1,69 @@
 <template>
-  <Demo>
-    <h2>基础用法</h2>
-    <nut-table :columns="state.columns1" :data="state.data1"></nut-table>
-    <h2>是否显示边框，文字对齐</h2>
-    <nut-table :columns="state.columns2" :data="state.data1" :bordered="state.bordered1"></nut-table>
-    <h2>显示总结栏</h2>
-    <nut-table :columns="state.columns3" :data="state.data2" :summary="state.summary"></nut-table>
-    <h2>条纹、明暗交替</h2>
-    <nut-table :columns="state.columns3" :data="state.data2" :striped="state.striped"></nut-table>
-    <h2>无数据默认展示，支持自定义</h2>
-    <nut-table :columns="state.columns3" :data="state.data3"> </nut-table>
-    <br />
-    <nut-table :columns="state.columns3" :data="state.data3">
-      <template #nodata>
-        <div class="no-data"> 这里是自定义展示 </div>
-      </template>
-    </nut-table>
-    <h2>自定义单元格</h2>
-    <nut-table :columns="state.columns4" :data="state.data4"> </nut-table>
-    <h2>支持异步渲染(5s之后看效果)</h2>
-    <nut-table :columns="state.columns3" :data="state.data5"> </nut-table>
-    <h2>支持排序</h2>
-    <nut-table :columns="state.columns6" :data="state.data6" @sorter="handleSorter"> </nut-table>
+  <Demo class="bg-w">
+    <h2>{{ t('basic') }}</h2>
+    <Basic />
+
+    <h2>{{ t('border') }}</h2>
+    <Border />
+
+    <h2>{{ t('align') }}</h2>
+    <Align />
+
+    <h2>{{ t('summary') }}</h2>
+    <Summary />
+
+    <h2>{{ t('striped') }}</h2>
+    <Striped />
+
+    <h2>{{ t('nodata') }}</h2>
+    <Nodata />
+
+    <h2>{{ t('custom') }}</h2>
+    <Custom />
+
+    <h2>{{ t('async') }}</h2>
+    <Async />
+
+    <h2>{{ t('sort') }}</h2>
+    <Sort />
   </Demo>
 </template>
 
 <script setup lang="ts">
-import { reactive, onMounted, onUnmounted, h } from 'vue';
-import { TableColumnProps } from '@/packages/__VUE/table/types';
-import { Dongdong } from '@nutui/icons-vue-taro';
-const state = reactive({
-  bordered1: false,
-  striped: true,
-  columns1: [
-    {
-      title: '姓名',
-      key: 'name'
-    },
-    {
-      title: '性别',
-      key: 'sex'
-    },
-    {
-      title: '学历',
-      key: 'record'
-    }
-  ],
-  columns2: [
-    {
-      title: '姓名',
-      key: 'name',
-      align: 'center'
-    },
-    {
-      title: '性别',
-      key: 'sex'
-    },
-    {
-      title: '学历',
-      key: 'record'
-    }
-  ],
-  columns3: [
-    {
-      title: '姓名',
-      key: 'name'
-    },
-    {
-      title: '性别',
-      key: 'sex'
-    },
-    {
-      title: '学历',
-      key: 'record'
-    },
-    {
-      title: '年龄',
-      key: 'age'
-    },
-    {
-      title: '地址',
-      key: 'address'
-    }
-  ],
-  columns4: [
-    {
-      title: '姓名',
-      key: 'name',
-      align: 'center'
-    },
-    {
-      title: '性别',
-      key: 'sex'
-    },
-    {
-      title: '学历',
-      key: 'record'
-    },
-    {
-      title: '操作',
-      key: 'render'
-    }
-  ],
-  columns6: [
-    {
-      title: '姓名',
-      key: 'name',
-      align: 'center',
-      sorter: true
-    },
-    {
-      title: '性别',
-      key: 'sex'
-    },
-    {
-      title: '学历',
-      key: 'record'
-    },
-    {
-      title: '年龄',
-      key: 'age',
-      sorter: (row1: any, row2: any) => {
-        return row1.age - row2.age;
-      }
-    }
-  ],
-  data1: [
-    {
-      name: 'Tom',
-      sex: '男',
-      record: '小学'
-    },
-    {
-      name: 'Lucy',
-      sex: '女',
-      record: '本科'
-    },
-    {
-      name: 'Jack',
-      sex: '男',
-      record: '高中'
-    }
-  ],
-  data2: [
-    {
-      name: 'Tom',
-      sex: '男',
-      record: '小学',
-      age: 13,
-      address: '北京'
-    },
-    {
-      name: 'Lucy',
-      sex: '女',
-      record: '本科',
-      age: 34,
-      address: '上海'
-    },
-    {
-      name: 'Jack',
-      sex: '男',
-      record: '高中',
-      age: 4,
-      address: '杭州'
-    }
-  ],
-  data3: [],
-  data4: [
-    {
-      name: 'Tom',
-      sex: '男',
-      record: '小学',
-      render: () => {
-        return h('button', {}, () => 'Hello');
-      }
-    },
-    {
-      name: 'Lucy',
-      sex: '女',
-      record: '本科',
-      render: () => {
-        return h(Dongdong, { size: '14px' });
-      }
-    },
-    {
-      name: 'Jack',
-      sex: '男',
-      record: '高中',
-      render: () => {
-        return h('button', {}, () => '编辑按钮');
-      }
-    }
-  ],
-  data5: [],
-  data6: [
-    {
-      name: 'Tom',
-      sex: '男',
-      record: '小学',
-      age: 10
-    },
-    {
-      name: 'Lucy',
-      sex: '女',
-      record: '本科',
-      age: 30
-    },
-    {
-      name: 'Jack',
-      sex: '男',
-      record: '高中',
-      age: 4
-    }
-  ],
-  timer: null as number | null,
-  summary: () => {
-    return {
-      value: '这是总结栏',
-      colspan: 5
-    };
-  }
-});
+import { useTranslate } from '../../../utils';
+import Basic from './basic.vue';
+import Border from './border.vue';
+import Align from './align.vue';
+import Summary from './summary.vue';
+import Striped from './striped.vue';
+import Nodata from './nodata.vue';
+import Custom from './custom.vue';
+import Async from './async.vue';
+import Sort from './sort.vue';
 
-const handleSorter = (item: TableColumnProps) => {
-  console.log(JSON.stringify(item));
-};
-
-onMounted(() => {
-  state.timer = setTimeout(() => {
-    state.data5 = state.data2.slice() as any;
-  }, 5000);
-});
-
-onUnmounted(() => {
-  state.timer = null;
+const t = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    border: '是否显示边框',
+    align: '文字对齐方式',
+    summary: '显示总结栏',
+    striped: '条纹、明暗交替',
+    nodata: '无数据默认展示，支持自定义',
+    custom: '自定义单元格',
+    async: '异步渲染(等待 5s)',
+    sort: '支持排序'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    border: 'Whether to display border',
+    align: 'Text Align',
+    summary: 'Show summary bar',
+    striped: 'Stripes, alternating light and shade',
+    nodata: 'No data is displayed by default, and customization is supported',
+    title5: 'Here is the custom display',
+    custom: 'Custom cell',
+    async: 'Asynchronous rendering(See the effect after 5S)',
+    sort: 'Support sorting'
+  }
 });
 </script>
-
-<style lang="scss">
-.demo {
-  padding-bottom: 20px !important;
-}
-.nut-table {
-  background-color: #fff;
-}
-</style>
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/table/nodata.vue b/packages/nutui-taro-demo/src/exhibition/pages/table/nodata.vue
new file mode 100644
index 0000000000..0e31860cb9
--- /dev/null
+++ b/packages/nutui-taro-demo/src/exhibition/pages/table/nodata.vue
@@ -0,0 +1,34 @@
+<template>
+  <nut-table :columns="columns" :data="data"></nut-table>
+  <nut-table :columns="columns" :data="data">
+    <template #nodata>
+      <div class="no-data"> 这里是自定义展示 </div>
+    </template>
+  </nut-table>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const columns = ref([
+  {
+    title: '姓名',
+    key: 'name'
+  },
+  {
+    title: '性别',
+    key: 'sex'
+  },
+  {
+    title: '学历',
+    key: 'record'
+  },
+  {
+    title: '年龄',
+    key: 'age'
+  },
+  {
+    title: '地址',
+    key: 'address'
+  }
+]);
+const data = ref([]);
+</script>
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/table/sort.vue b/packages/nutui-taro-demo/src/exhibition/pages/table/sort.vue
new file mode 100644
index 0000000000..cf71f7eea0
--- /dev/null
+++ b/packages/nutui-taro-demo/src/exhibition/pages/table/sort.vue
@@ -0,0 +1,52 @@
+<template>
+  <nut-table :columns="columns" :data="data" @sorter="handleSorter"></nut-table>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const columns = ref<any[]>([
+  {
+    title: '姓名',
+    key: 'name',
+    sorter: 'default'
+  },
+  {
+    title: '性别',
+    key: 'sex'
+  },
+  {
+    title: '学历',
+    key: 'record'
+  },
+  {
+    title: '年龄',
+    key: 'age',
+    sorter: (row1: any, row2: any) => {
+      return row1.age - row2.age;
+    }
+  }
+]);
+const data = ref([
+  {
+    name: 'Tom',
+    sex: '男',
+    record: '小学',
+    age: 10
+  },
+  {
+    name: 'Lucy',
+    sex: '女',
+    record: '本科',
+    age: 30
+  },
+  {
+    name: 'Jack',
+    sex: '男',
+    record: '高中',
+    age: 4
+  }
+]);
+
+const handleSorter = (item: any) => {
+  console.log(`${JSON.stringify(item)}`);
+};
+</script>
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/table/striped.vue b/packages/nutui-taro-demo/src/exhibition/pages/table/striped.vue
new file mode 100644
index 0000000000..6b20a7fa36
--- /dev/null
+++ b/packages/nutui-taro-demo/src/exhibition/pages/table/striped.vue
@@ -0,0 +1,37 @@
+<template>
+  <nut-table :columns="columns" :data="data" striped></nut-table>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const columns = ref([
+  {
+    title: '姓名',
+    key: 'name'
+  },
+  {
+    title: '性别',
+    key: 'sex'
+  },
+  {
+    title: '学历',
+    key: 'record'
+  }
+]);
+const data = ref([
+  {
+    name: 'Tom',
+    sex: '男',
+    record: '小学'
+  },
+  {
+    name: 'Lucy',
+    sex: '女',
+    record: '本科'
+  },
+  {
+    name: 'Jack',
+    sex: '男',
+    record: '高中'
+  }
+]);
+</script>
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/table/summary.vue b/packages/nutui-taro-demo/src/exhibition/pages/table/summary.vue
new file mode 100644
index 0000000000..fa28b26ca7
--- /dev/null
+++ b/packages/nutui-taro-demo/src/exhibition/pages/table/summary.vue
@@ -0,0 +1,42 @@
+<template>
+  <nut-table :columns="columns" :data="data" :summary="summary"></nut-table>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const summary = () => {
+  return {
+    value: '这是总结栏'
+  };
+};
+const columns = ref([
+  {
+    title: '姓名',
+    key: 'name'
+  },
+  {
+    title: '性别',
+    key: 'sex'
+  },
+  {
+    title: '学历',
+    key: 'record'
+  }
+]);
+const data = ref([
+  {
+    name: 'Tom',
+    sex: '男',
+    record: '小学'
+  },
+  {
+    name: 'Lucy',
+    sex: '女',
+    record: '本科'
+  },
+  {
+    name: 'Jack',
+    sex: '男',
+    record: '高中'
+  }
+]);
+</script>
diff --git a/src/packages/__VUE/table/demo.vue b/src/packages/__VUE/table/demo.vue
deleted file mode 100644
index b31366d4c8..0000000000
--- a/src/packages/__VUE/table/demo.vue
+++ /dev/null
@@ -1,337 +0,0 @@
-<template>
-  <div class="demo">
-    <h2>{{ translate('basic') }}</h2>
-    <nut-table :columns="state.columns1" :data="state.data1"></nut-table>
-    <h2>{{ translate('title1') }}</h2>
-    <nut-table :columns="state.columns2" :data="state.data1" :bordered="state.bordered1"></nut-table>
-    <h2>{{ translate('title2') }}</h2>
-    <nut-table :columns="state.columns3" :data="state.data2" :summary="state.summary"></nut-table>
-    <h2>{{ translate('title3') }}</h2>
-    <nut-table :columns="state.columns3" :data="state.data2" :striped="state.striped"></nut-table>
-    <h2>{{ translate('title4') }}</h2>
-    <nut-table :columns="state.columns3" :data="state.data3"> </nut-table>
-    <br />
-    <nut-table :columns="state.columns3" :data="state.data3">
-      <template #nodata>
-        <div class="no-data"> {{ translate('title5') }} </div>
-      </template>
-    </nut-table>
-    <h2>{{ translate('title6') }}</h2>
-    <nut-table :columns="state.columns4" :data="state.data4"> </nut-table>
-    <h2>{{ translate('title7') }}</h2>
-    <nut-table :columns="state.columns3" :data="state.data5"> </nut-table>
-    <h2>{{ translate('title8') }}</h2>
-    <nut-table :columns="state.columns6" :data="state.data6" @sorter="handleSorter"> </nut-table>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { reactive, onMounted, onUnmounted, h } from 'vue';
-import { TableColumns } from './types';
-import { showToast } from '@/packages/nutui.vue';
-import Button from '@/packages/__VUE/button/index.vue';
-import { Dongdong } from '@nutui/icons-vue';
-import { useTranslate } from '@/sites/assets/util/useTranslate';
-const translate = useTranslate({
-  'zh-CN': {
-    basic: '基础用法',
-    title1: '是否显示边框，文字对齐',
-    title2: '显示总结栏',
-    title3: '条纹、明暗交替',
-    title4: '无数据默认展示，支持自定义',
-    title5: '这里是自定义展示',
-    title6: '自定义单元格',
-    title7: '支持异步渲染(5s之后看效果)',
-    title8: '支持排序',
-    name: '姓名',
-    age: '年龄',
-    sex: '性别',
-    man: '男',
-    woman: '女',
-    education: '学历',
-    address: '地址',
-    oper: '操作',
-    primary: '小学',
-    high: '高中',
-    undergraduate: '本科',
-    jump: '跳转到京东',
-    summary: '这是总结栏',
-    beijing: '北京',
-    shanghai: '上海',
-    hangzhou: '杭州'
-  },
-  'en-US': {
-    basic: 'Basic Usage',
-    title1: 'Whether to display border and align text',
-    title2: 'Show summary bar',
-    title3: 'Stripes, alternating light and shade',
-    title4: 'No data is displayed by default, and customization is supported',
-    title5: 'Here is the custom display',
-    title6: 'Custom cell',
-    title7: 'Support asynchronous rendering(See the effect after 5S)',
-    title8: 'Support sorting',
-    name: 'name',
-    age: 'age',
-    sex: 'sex',
-    man: 'man',
-    woman: 'woman',
-    education: 'education',
-    address: 'address',
-    oper: 'operation',
-    primary: 'primary school',
-    high: 'high school',
-    undergraduate: 'undergraduate',
-    jump: 'Jump To Jingdong',
-    summary: 'This is the summary column',
-    beijing: 'beijing',
-    shanghai: 'shanghai',
-    hangzhou: 'hangzhou'
-  }
-});
-const state = reactive({
-  bordered1: false,
-  striped: true,
-  columns1: [
-    {
-      title: translate('name'),
-      key: 'name',
-      stylehead: 'font-size:20px;color:red;font-weight:bolder;',
-      stylecolumn: 'font-size:10px;'
-    },
-    {
-      title: translate('sex'),
-      key: 'sex',
-      stylecolumn: 'font-size:20px;',
-      render: ({ sex }: any) => {
-        return h(
-          'span',
-          {
-            style: {
-              color: sex === translate('woman') ? 'blue' : 'green'
-            }
-          },
-          sex
-        );
-      }
-    },
-    {
-      title: translate('education'),
-      key: 'record'
-    }
-  ],
-  columns2: [
-    {
-      title: translate('name'),
-      key: 'name',
-      align: 'center'
-    },
-    {
-      title: translate('sex'),
-      key: 'sex'
-    },
-    {
-      title: translate('education'),
-      key: 'record'
-    }
-  ],
-  columns3: [
-    {
-      title: translate('name'),
-      key: 'name'
-    },
-    {
-      title: translate('sex'),
-      key: 'sex'
-    },
-    {
-      title: translate('education'),
-      key: 'record'
-    },
-    {
-      title: translate('age'),
-      key: 'age'
-    },
-    {
-      title: translate('address'),
-      key: 'address'
-    }
-  ],
-  columns4: [
-    {
-      title: translate('name'),
-      key: 'name',
-      align: 'center'
-    },
-    {
-      title: translate('sex'),
-      key: 'sex'
-    },
-    {
-      title: translate('education'),
-      key: 'record'
-    },
-    {
-      title: translate('oper'),
-      key: 'render'
-    }
-  ],
-  columns6: [
-    {
-      title: translate('name'),
-      key: 'name',
-      align: 'center',
-      sorter: true
-    },
-    {
-      title: translate('sex'),
-      key: 'sex'
-    },
-    {
-      title: translate('education'),
-      key: 'record'
-    },
-    {
-      title: translate('age'),
-      key: 'age',
-      sorter: (row1: any, row2: any) => {
-        return row1.age - row2.age;
-      }
-    }
-  ] as TableColumns[],
-  data1: [
-    {
-      sex: translate('man'),
-      name: 'Tom',
-      record: translate('primary')
-    },
-    {
-      name: 'Lucy',
-      sex: translate('woman'),
-      record: translate('undergraduate')
-    },
-    {
-      name: 'Jack',
-      sex: translate('man'),
-      record: translate('high')
-    }
-  ],
-  data2: [
-    {
-      address: translate('beijing'),
-      name: 'Tom',
-      sex: translate('man'),
-      record: translate('primary'),
-      age: 13
-    },
-    {
-      record: translate('undergraduate'),
-      name: 'Lucy',
-      sex: translate('woman'),
-      age: 34,
-      address: translate('shanghai')
-    },
-    {
-      age: 4,
-      name: 'Jack',
-      sex: translate('man'),
-      record: translate('high'),
-      address: translate('hangzhou')
-    }
-  ],
-  data3: [],
-  data4: [
-    {
-      name: 'Tom',
-      sex: translate('man'),
-      record: translate('primary'),
-      render: () => {
-        return h(
-          Button,
-          {
-            onClick: () => {
-              (showToast as any).text('hello');
-            },
-            size: 'small',
-            type: 'primary'
-          },
-          () => h('div', {}, 'Hello')
-        );
-      }
-    },
-    {
-      name: 'Lucy',
-      sex: translate('woman'),
-      record: translate('undergraduate'),
-      render: () => {
-        return h(Dongdong, { width: '14px', height: '14px' });
-      }
-    },
-    {
-      name: 'Jack',
-      sex: translate('man'),
-      record: translate('high'),
-      render: () => {
-        return h(
-          Button,
-          {
-            type: 'success',
-            size: 'small',
-            onClick: () => {
-              window.open('https://www.jd.com');
-            }
-          },
-          () => h('div', {}, translate('jump'))
-        );
-      }
-    }
-  ],
-  data5: [],
-  data6: [
-    {
-      name: 'Tom',
-      sex: translate('man'),
-      record: translate('primary'),
-      age: 10
-    },
-    {
-      name: 'Lucy',
-      sex: translate('woman'),
-      record: translate('undergraduate'),
-      age: 30
-    },
-    {
-      name: 'Jack',
-      sex: translate('man'),
-      record: translate('high'),
-      age: 4
-    }
-  ],
-  timer: null as number | null,
-  summary: () => {
-    return {
-      value: translate('summary'),
-      colspan: 5
-    };
-  }
-});
-
-const handleSorter = (item: TableColumns) => {
-  (showToast as any).text(`${JSON.stringify(item)}`);
-};
-
-onMounted(() => {
-  state.timer = setTimeout(() => {
-    state.data5 = state.data2.slice() as any;
-  }, 5000) as any;
-});
-
-onUnmounted(() => {
-  state.timer = null;
-});
-</script>
-
-<style lang="scss" scoped>
-::v-deep(.nut-table) {
-  background-color: #fff;
-}
-</style>
diff --git a/src/packages/__VUE/table/demo/align.vue b/src/packages/__VUE/table/demo/align.vue
new file mode 100644
index 0000000000..090eecacd0
--- /dev/null
+++ b/src/packages/__VUE/table/demo/align.vue
@@ -0,0 +1,40 @@
+<template>
+  <nut-table :columns="columns" :data="data"></nut-table>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const columns = ref([
+  {
+    title: '姓名',
+    key: 'name',
+    align: 'left'
+  },
+  {
+    title: '性别',
+    key: 'sex',
+    align: 'center'
+  },
+  {
+    title: '学历',
+    key: 'record',
+    align: 'right'
+  }
+]);
+const data = ref([
+  {
+    name: 'Tom',
+    sex: '男',
+    record: '小学'
+  },
+  {
+    name: 'Lucy',
+    sex: '女',
+    record: '本科'
+  },
+  {
+    name: 'Jack',
+    sex: '男',
+    record: '高中'
+  }
+]);
+</script>
diff --git a/src/packages/__VUE/table/demo/async.vue b/src/packages/__VUE/table/demo/async.vue
new file mode 100644
index 0000000000..3728947726
--- /dev/null
+++ b/src/packages/__VUE/table/demo/async.vue
@@ -0,0 +1,59 @@
+<template>
+  <nut-table :columns="columns" :data="data">
+    <template #nodata>Loading...</template>
+  </nut-table>
+</template>
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+const columns = ref([
+  {
+    title: '姓名',
+    key: 'name'
+  },
+  {
+    title: '性别',
+    key: 'sex'
+  },
+  {
+    title: '学历',
+    key: 'record'
+  },
+  {
+    title: '年龄',
+    key: 'age'
+  },
+  {
+    title: '地址',
+    key: 'address'
+  }
+]);
+
+const data = ref<Array<any>>([]);
+onMounted(() => {
+  setTimeout(() => {
+    data.value = [
+      {
+        address: '北京',
+        name: 'Tom',
+        sex: '男',
+        record: '小学',
+        age: 13
+      },
+      {
+        record: '本科',
+        name: 'Lucy',
+        sex: '女',
+        age: 34,
+        address: '上海'
+      },
+      {
+        name: 'Jack',
+        sex: '男',
+        record: '高中',
+        age: 4,
+        address: '杭州'
+      }
+    ];
+  }, 5000);
+});
+</script>
diff --git a/src/packages/__VUE/table/demo/basic.vue b/src/packages/__VUE/table/demo/basic.vue
new file mode 100644
index 0000000000..9f40b30fbb
--- /dev/null
+++ b/src/packages/__VUE/table/demo/basic.vue
@@ -0,0 +1,37 @@
+<template>
+  <nut-table :columns="columns" :data="data"></nut-table>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const columns = ref([
+  {
+    title: '姓名',
+    key: 'name'
+  },
+  {
+    title: '性别',
+    key: 'sex'
+  },
+  {
+    title: '学历',
+    key: 'record'
+  }
+]);
+const data = ref([
+  {
+    name: 'Tom',
+    sex: '男',
+    record: '小学'
+  },
+  {
+    name: 'Lucy',
+    sex: '女',
+    record: '本科'
+  },
+  {
+    name: 'Jack',
+    sex: '男',
+    record: '高中'
+  }
+]);
+</script>
diff --git a/src/packages/__VUE/table/demo/border.vue b/src/packages/__VUE/table/demo/border.vue
new file mode 100644
index 0000000000..bc1c535cb5
--- /dev/null
+++ b/src/packages/__VUE/table/demo/border.vue
@@ -0,0 +1,37 @@
+<template>
+  <nut-table :columns="columns" :data="data" :bordered="false"></nut-table>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const columns = ref([
+  {
+    title: '姓名',
+    key: 'name'
+  },
+  {
+    title: '性别',
+    key: 'sex'
+  },
+  {
+    title: '学历',
+    key: 'record'
+  }
+]);
+const data = ref([
+  {
+    name: 'Tom',
+    sex: '男',
+    record: '小学'
+  },
+  {
+    name: 'Lucy',
+    sex: '女',
+    record: '本科'
+  },
+  {
+    name: 'Jack',
+    sex: '男',
+    record: '高中'
+  }
+]);
+</script>
diff --git a/src/packages/__VUE/table/demo/custom.vue b/src/packages/__VUE/table/demo/custom.vue
new file mode 100644
index 0000000000..d847543201
--- /dev/null
+++ b/src/packages/__VUE/table/demo/custom.vue
@@ -0,0 +1,68 @@
+<template>
+  <nut-table :columns="columns" :data="data"></nut-table>
+</template>
+<script setup lang="ts">
+import { ref, h } from 'vue';
+import { Dongdong } from '@nutui/icons-vue';
+const columns = ref([
+  {
+    title: '姓名',
+    key: 'name'
+  },
+  {
+    title: '性别',
+    key: 'sex'
+  },
+  {
+    title: '学历',
+    key: 'record'
+  },
+  {
+    title: '操作',
+    key: 'render'
+  }
+]);
+
+const data = ref([
+  {
+    name: 'Tom',
+    sex: '男',
+    record: '小学',
+    render: () => {
+      return h(
+        'button',
+        {
+          onClick: () => {
+            console.log('hello');
+          }
+        },
+        'Hello'
+      );
+    }
+  },
+  {
+    name: 'Lucy',
+    sex: '女',
+    record: '本科',
+    render: () => {
+      return h(Dongdong, { width: '14px', height: '14px ' });
+    }
+  },
+  {
+    name: 'Jack',
+    sex: '男',
+    record: '高中',
+    render: () => {
+      return h(
+        'button',
+        {
+          onClick: () => {
+            window.open('https://www.jd.com');
+          }
+        },
+        '打开京东'
+      );
+    }
+  }
+]);
+</script>
diff --git a/src/packages/__VUE/table/demo/index.vue b/src/packages/__VUE/table/demo/index.vue
new file mode 100644
index 0000000000..7a9faa9022
--- /dev/null
+++ b/src/packages/__VUE/table/demo/index.vue
@@ -0,0 +1,69 @@
+<template>
+  <Demo class="bg-w">
+    <h2>{{ t('basic') }}</h2>
+    <Basic />
+
+    <h2>{{ t('border') }}</h2>
+    <Border />
+
+    <h2>{{ t('align') }}</h2>
+    <Align />
+
+    <h2>{{ t('summary') }}</h2>
+    <Summary />
+
+    <h2>{{ t('striped') }}</h2>
+    <Striped />
+
+    <h2>{{ t('nodata') }}</h2>
+    <Nodata />
+
+    <h2>{{ t('custom') }}</h2>
+    <Custom />
+
+    <h2>{{ t('async') }}</h2>
+    <Async />
+
+    <h2>{{ t('sort') }}</h2>
+    <Sort />
+  </Demo>
+</template>
+
+<script setup lang="ts">
+import { useTranslate } from '@/sites/utils';
+import Basic from './basic.vue';
+import Border from './border.vue';
+import Align from './align.vue';
+import Summary from './summary.vue';
+import Striped from './striped.vue';
+import Nodata from './nodata.vue';
+import Custom from './custom.vue';
+import Async from './async.vue';
+import Sort from './sort.vue';
+
+const t = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    border: '是否显示边框',
+    align: '文字对齐方式',
+    summary: '显示总结栏',
+    striped: '条纹、明暗交替',
+    nodata: '无数据默认展示，支持自定义',
+    custom: '自定义单元格',
+    async: '异步渲染(等待 5s)',
+    sort: '支持排序'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    border: 'Whether to display border',
+    align: 'Text Align',
+    summary: 'Show summary bar',
+    striped: 'Stripes, alternating light and shade',
+    nodata: 'No data is displayed by default, and customization is supported',
+    title5: 'Here is the custom display',
+    custom: 'Custom cell',
+    async: 'Asynchronous rendering(See the effect after 5S)',
+    sort: 'Support sorting'
+  }
+});
+</script>
diff --git a/src/packages/__VUE/table/demo/nodata.vue b/src/packages/__VUE/table/demo/nodata.vue
new file mode 100644
index 0000000000..0e31860cb9
--- /dev/null
+++ b/src/packages/__VUE/table/demo/nodata.vue
@@ -0,0 +1,34 @@
+<template>
+  <nut-table :columns="columns" :data="data"></nut-table>
+  <nut-table :columns="columns" :data="data">
+    <template #nodata>
+      <div class="no-data"> 这里是自定义展示 </div>
+    </template>
+  </nut-table>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const columns = ref([
+  {
+    title: '姓名',
+    key: 'name'
+  },
+  {
+    title: '性别',
+    key: 'sex'
+  },
+  {
+    title: '学历',
+    key: 'record'
+  },
+  {
+    title: '年龄',
+    key: 'age'
+  },
+  {
+    title: '地址',
+    key: 'address'
+  }
+]);
+const data = ref([]);
+</script>
diff --git a/src/packages/__VUE/table/demo/sort.vue b/src/packages/__VUE/table/demo/sort.vue
new file mode 100644
index 0000000000..cf71f7eea0
--- /dev/null
+++ b/src/packages/__VUE/table/demo/sort.vue
@@ -0,0 +1,52 @@
+<template>
+  <nut-table :columns="columns" :data="data" @sorter="handleSorter"></nut-table>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const columns = ref<any[]>([
+  {
+    title: '姓名',
+    key: 'name',
+    sorter: 'default'
+  },
+  {
+    title: '性别',
+    key: 'sex'
+  },
+  {
+    title: '学历',
+    key: 'record'
+  },
+  {
+    title: '年龄',
+    key: 'age',
+    sorter: (row1: any, row2: any) => {
+      return row1.age - row2.age;
+    }
+  }
+]);
+const data = ref([
+  {
+    name: 'Tom',
+    sex: '男',
+    record: '小学',
+    age: 10
+  },
+  {
+    name: 'Lucy',
+    sex: '女',
+    record: '本科',
+    age: 30
+  },
+  {
+    name: 'Jack',
+    sex: '男',
+    record: '高中',
+    age: 4
+  }
+]);
+
+const handleSorter = (item: any) => {
+  console.log(`${JSON.stringify(item)}`);
+};
+</script>
diff --git a/src/packages/__VUE/table/demo/striped.vue b/src/packages/__VUE/table/demo/striped.vue
new file mode 100644
index 0000000000..6b20a7fa36
--- /dev/null
+++ b/src/packages/__VUE/table/demo/striped.vue
@@ -0,0 +1,37 @@
+<template>
+  <nut-table :columns="columns" :data="data" striped></nut-table>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const columns = ref([
+  {
+    title: '姓名',
+    key: 'name'
+  },
+  {
+    title: '性别',
+    key: 'sex'
+  },
+  {
+    title: '学历',
+    key: 'record'
+  }
+]);
+const data = ref([
+  {
+    name: 'Tom',
+    sex: '男',
+    record: '小学'
+  },
+  {
+    name: 'Lucy',
+    sex: '女',
+    record: '本科'
+  },
+  {
+    name: 'Jack',
+    sex: '男',
+    record: '高中'
+  }
+]);
+</script>
diff --git a/src/packages/__VUE/table/demo/summary.vue b/src/packages/__VUE/table/demo/summary.vue
new file mode 100644
index 0000000000..fa28b26ca7
--- /dev/null
+++ b/src/packages/__VUE/table/demo/summary.vue
@@ -0,0 +1,42 @@
+<template>
+  <nut-table :columns="columns" :data="data" :summary="summary"></nut-table>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const summary = () => {
+  return {
+    value: '这是总结栏'
+  };
+};
+const columns = ref([
+  {
+    title: '姓名',
+    key: 'name'
+  },
+  {
+    title: '性别',
+    key: 'sex'
+  },
+  {
+    title: '学历',
+    key: 'record'
+  }
+]);
+const data = ref([
+  {
+    name: 'Tom',
+    sex: '男',
+    record: '小学'
+  },
+  {
+    name: 'Lucy',
+    sex: '女',
+    record: '本科'
+  },
+  {
+    name: 'Jack',
+    sex: '男',
+    record: '高中'
+  }
+]);
+</script>
diff --git a/src/packages/__VUE/table/doc.en-US.md b/src/packages/__VUE/table/doc.en-US.md
index bfb443fd76..218085110e 100644
--- a/src/packages/__VUE/table/doc.en-US.md
+++ b/src/packages/__VUE/table/doc.en-US.md
@@ -16,531 +16,39 @@ app.use(Table);
 
 ### Basic Usage
 
-:::demo
-
-```vue
-<template>
-  <nut-table :columns="state.columns" :data="state.data"></nut-table>
-</template>
-<script setup>
-import { reactive, h } from 'vue';
-const state = reactive({
-  columns: [
-    {
-      title: 'name',
-      key: 'name',
-      stylehead: 'font-size:20px;color:red;font-weight:bolder;',
-      stylecolumn: 'font-size:10px;color:blue;'
-    },
-    {
-      title: 'sex',
-      key: 'sex',
-      render: (record) => {
-        return h(
-          'span',
-          {
-            style: {
-              color: record.sex === 'woman' ? 'blue' : 'green'
-            }
-          },
-          record.sex
-        );
-      }
-    },
-    {
-      title: 'education',
-      key: 'record'
-    }
-  ],
-  data: [
-    {
-      name: 'Tom',
-      sex: 'man',
-      record: 'primary school'
-    },
-    {
-      name: 'Lucy',
-      sex: 'woman',
-      record: 'undergraduate'
-    },
-    {
-      name: 'Jack',
-      sex: 'man',
-      record: 'high school'
-    }
-  ]
-});
-</script>
-```
+> demo: table basic
 
-:::
-
-### Whether to display border and align text
-
-:::demo
-
-```vue
-<template>
-  <nut-table :columns="state.columns" :data="state.data" :bordered="state.bordered"></nut-table>
-</template>
-<script setup>
-import { reactive } from 'vue';
-const state = reactive({
-  bordered: false,
-  columns: [
-    {
-      title: 'name',
-      key: 'name',
-      align: 'center'
-    },
-    {
-      title: 'sex',
-      key: 'sex'
-    },
-    {
-      title: 'education',
-      key: 'record'
-    }
-  ],
-  data: [
-    {
-      name: 'Tom',
-      sex: 'man',
-      record: 'primary school'
-    },
-    {
-      name: 'Lucy',
-      sex: 'woman',
-      record: 'undergraduate'
-    },
-    {
-      name: 'Jack',
-      sex: 'man',
-      record: 'high school'
-    }
-  ]
-});
-</script>
-```
+### Border
 
-:::
-
-### Show summary bar
-
-:::demo
-
-```vue
-<template>
-  <nut-table :columns="state.columns" :data="state.data" :summary="state.summary"></nut-table>
-</template>
-<script setup>
-import { reactive } from 'vue';
-const state = reactive({
-  columns: [
-    {
-      title: 'name',
-      key: 'name'
-    },
-    {
-      title: 'sex',
-      key: 'sex'
-    },
-    {
-      title: 'education',
-      key: 'record'
-    },
-    {
-      title: 'age',
-      key: 'age'
-    },
-    {
-      title: 'address',
-      key: 'address'
-    }
-  ],
-  data: [
-    {
-      name: 'Tom',
-      sex: 'man',
-      record: 'primary school',
-      age: 13,
-      address: 'beijing'
-    },
-    {
-      name: 'Lucy',
-      sex: 'woman',
-      record: 'undergraduate',
-      age: 34,
-      address: 'shanghai'
-    },
-    {
-      name: 'Jack',
-      sex: 'man',
-      record: 'high school',
-      age: 4,
-      address: 'hangzhou'
-    }
-  ],
-  summary: () => {
-    return {
-      value: 'This is the summary column',
-      colspan: 5
-    };
-  }
-});
-</script>
-```
+> demo: table border
 
-:::
+### Text Align
 
-### Stripes, alternating light and shade
+> demo: table align
 
-:::demo
-
-```vue
-<template>
-  <nut-table :columns="state.columns3" :data="state.data2" :striped="state.striped"></nut-table>
-</template>
-<script setup>
-import { reactive } from 'vue';
-const state = reactive({
-  striped: true,
-  columns3: [
-    {
-      title: 'name',
-      key: 'name'
-    },
-    {
-      title: 'sex',
-      key: 'sex'
-    },
-    {
-      title: 'education',
-      key: 'record'
-    },
-    {
-      title: 'age',
-      key: 'age'
-    },
-    {
-      title: 'address',
-      key: 'address'
-    }
-  ],
-  data2: [
-    {
-      name: 'Tom',
-      sex: 'man',
-      record: 'primary school',
-      age: 13,
-      address: 'beijing'
-    },
-    {
-      name: 'Lucy',
-      sex: 'woman',
-      record: 'undergraduate',
-      age: 34,
-      address: 'shanghai'
-    },
-    {
-      name: 'Jack',
-      sex: 'man',
-      record: 'high school',
-      age: 4,
-      address: 'hangzhou'
-    }
-  ]
-});
-</script>
-```
+### Summary Bar
 
-:::
+> demo: table summary
 
-### No data is displayed by default, and customization is supported
+### Stripes, alternating light and shade
 
-:::demo
-
-```vue
-<template>
-  <nut-table :columns="state.columns" :data="state.data"></nut-table>
-  <nut-table :columns="state.columns3" :data="state.data3">
-    <template #nodata>
-      <div class="no-data"> Here is the custom display </div>
-    </template>
-  </nut-table>
-</template>
-<script setup>
-import { reactive } from 'vue';
-const state = reactive({
-  columns: [
-    {
-      title: 'name',
-      key: 'name'
-    },
-    {
-      title: 'sex',
-      key: 'sex'
-    },
-    {
-      title: 'education',
-      key: 'record'
-    },
-    {
-      title: 'age',
-      key: 'age'
-    },
-    {
-      title: 'address',
-      key: 'address'
-    }
-  ],
-  data: [],
-  columns3: [
-    {
-      title: 'name',
-      key: 'name'
-    },
-    {
-      title: 'sex',
-      key: 'sex'
-    },
-    {
-      title: 'education',
-      key: 'record'
-    },
-    {
-      title: 'age',
-      key: 'age'
-    },
-    {
-      title: 'address',
-      key: 'address'
-    }
-  ],
-  data3: []
-});
-</script>
-```
+> demo: table striped
+
+### No data is displayed by default, and customization is supported
 
-:::
+> demo: table nodata
 
 ### Custom cell
 
-:::demo
-
-```vue
-<template>
-  <nut-table :columns="state.columns" :data="state.data"></nut-table>
-</template>
-<script setup>
-import { reactive, h } from 'vue';
-import { Button, showToast } from '@nutui/nutui';
-import { Dongdong } from '@nutui/icons-vue';
-const state = reactive({
-  columns: [
-    {
-      title: 'name',
-      key: 'name',
-      align: 'center'
-    },
-    {
-      title: 'sex',
-      key: 'sex'
-    },
-    {
-      title: 'education',
-      key: 'record'
-    },
-    {
-      title: 'operation',
-      key: 'render'
-    }
-  ],
-  data: [
-    {
-      name: 'Tom',
-      sex: 'man',
-      record: 'primary school',
-      render: () => {
-        return h(
-          Button,
-          {
-            onClick: () => {
-              showToast.text('hello');
-            },
-            size: 'small',
-            type: 'primary'
-          },
-          'Hello'
-        );
-      }
-    },
-    {
-      name: 'Lucy',
-      sex: 'woman',
-      record: 'undergraduate',
-      render: () => {
-        return h(Dongdong, { width: '14px', height: '14px' });
-      }
-    },
-    {
-      name: 'Jack',
-      sex: 'man',
-      record: 'high school',
-      render: () => {
-        return h(
-          Button,
-          {
-            type: 'success',
-            size: 'small',
-            onClick: () => {
-              window.open('https://www.jd.com');
-            }
-          },
-          'Jump to Jingdong'
-        );
-      }
-    }
-  ]
-});
-</script>
-```
+> demo: table custom
 
-:::
-
-### Support asynchronous rendering
-
-:::demo
-
-```vue
-<template>
-  <h2>Support asynchronous rendering(See the effect after 5S)</h2>
-  <nut-table :columns="state.columns" :data="state.data"></nut-table>
-</template>
-<script setup>
-import { reactive, onMounted } from 'vue';
-const state = reactive({
-  columns: [
-    {
-      title: 'name',
-      key: 'name'
-    },
-    {
-      title: 'sex',
-      key: 'sex'
-    },
-    {
-      title: 'education',
-      key: 'record'
-    },
-    {
-      title: 'age',
-      key: 'age'
-    },
-    {
-      title: 'address',
-      key: 'address'
-    }
-  ],
-  data: [],
-  data1: [
-    {
-      address: 'beijing',
-      name: 'Tom',
-      sex: 'man',
-      record: 'primary school',
-      age: 13
-    },
-    {
-      record: 'undergraduate',
-      name: 'Lucy',
-      sex: 'woman',
-      age: 34,
-      address: 'shanghai'
-    },
-    {
-      name: 'Jack',
-      sex: 'man',
-      record: 'high school',
-      age: 4,
-      address: 'hangzhou'
-    }
-  ]
-});
-onMounted(() => {
-  setTimeout(() => {
-    state.data = state.data1.slice();
-  }, 5000);
-});
-</script>
-```
+### Asynchronous rendering
 
-:::
+> demo: table async
 
 ### Support sorting
 
-:::demo
-
-```vue
-<template>
-  <nut-table :columns="state.columns" :data="state.data" @sorter="handleSorter"></nut-table>
-</template>
-<script setup>
-import { reactive } from 'vue';
-import { showToast } from '@nutui/nutui';
-const state = reactive({
-  columns: [
-    {
-      title: 'name',
-      key: 'name',
-      align: 'center',
-      sorter: true
-    },
-    {
-      title: 'sex',
-      key: 'sex'
-    },
-    {
-      title: 'education',
-      key: 'record'
-    },
-    {
-      title: 'age',
-      key: 'age',
-      sorter: (row1, row2) => {
-        return row1.age - row2.age;
-      }
-    }
-  ],
-  data: [
-    {
-      name: 'Tom',
-      sex: 'man',
-      record: 'primary school',
-      age: 10
-    },
-    {
-      name: 'Lucy',
-      sex: 'woman',
-      record: 'undergraduate',
-      age: 30
-    },
-    {
-      name: 'Jack',
-      sex: 'man',
-      record: 'high school',
-      age: 4
-    }
-  ]
-});
-
-const handleSorter = (item) => {
-  showToast.text(`${JSON.stringify(item)}`);
-};
-</script>
-```
-
-:::
+> demo: table sort
 
 ## API
 
diff --git a/src/packages/__VUE/table/doc.md b/src/packages/__VUE/table/doc.md
index 82ef3284b7..3e0fdb519a 100644
--- a/src/packages/__VUE/table/doc.md
+++ b/src/packages/__VUE/table/doc.md
@@ -16,531 +16,39 @@ app.use(Table);
 
 ### 基础用法
 
-:::demo
-
-```vue
-<template>
-  <nut-table :columns="state.columns" :data="state.data"></nut-table>
-</template>
-<script setup>
-import { reactive, h } from 'vue';
-const state = reactive({
-  columns: [
-    {
-      title: '姓名',
-      key: 'name',
-      stylehead: 'font-size:20px;color:red;font-weight:bolder;',
-      stylecolumn: 'font-size:10px;color:blue;'
-    },
-    {
-      title: '性别',
-      key: 'sex',
-      render: (record) => {
-        return h(
-          'span',
-          {
-            style: {
-              color: record.sex === '女' ? 'blue' : 'green'
-            }
-          },
-          record.sex
-        );
-      }
-    },
-    {
-      title: '学历',
-      key: 'record'
-    }
-  ],
-  data: [
-    {
-      name: 'Tom',
-      sex: '男',
-      record: '小学'
-    },
-    {
-      name: 'Lucy',
-      sex: '女',
-      record: '本科'
-    },
-    {
-      name: 'Jack',
-      sex: '男',
-      record: '高中'
-    }
-  ]
-});
-</script>
-```
+> demo: table basic
 
-:::
-
-### 是否显示边框，文字对齐
-
-:::demo
-
-```vue
-<template>
-  <nut-table :columns="state.columns" :data="state.data" :bordered="state.bordered"></nut-table>
-</template>
-<script setup>
-import { reactive } from 'vue';
-const state = reactive({
-  bordered: false,
-  columns: [
-    {
-      title: '姓名',
-      key: 'name',
-      align: 'center'
-    },
-    {
-      title: '性别',
-      key: 'sex'
-    },
-    {
-      title: '学历',
-      key: 'record'
-    }
-  ],
-  data: [
-    {
-      name: 'Tom',
-      sex: '男',
-      record: '小学'
-    },
-    {
-      name: 'Lucy',
-      sex: '女',
-      record: '本科'
-    },
-    {
-      name: 'Jack',
-      sex: '男',
-      record: '高中'
-    }
-  ]
-});
-</script>
-```
+### 是否显示边框
 
-:::
+> demo: table border
 
-### 显示总结栏
+### 文字对齐方式
 
-:::demo
-
-```vue
-<template>
-  <nut-table :columns="state.columns" :data="state.data" :summary="state.summary"></nut-table>
-</template>
-<script setup>
-import { reactive } from 'vue';
-const state = reactive({
-  columns: [
-    {
-      title: '姓名',
-      key: 'name'
-    },
-    {
-      title: '性别',
-      key: 'sex'
-    },
-    {
-      title: '学历',
-      key: 'record'
-    },
-    {
-      title: '年龄',
-      key: 'age'
-    },
-    {
-      title: '地址',
-      key: 'address'
-    }
-  ],
-  data: [
-    {
-      name: 'Tom',
-      sex: '男',
-      record: '小学',
-      age: 13,
-      address: '北京'
-    },
-    {
-      name: 'Lucy',
-      sex: '女',
-      record: '本科',
-      age: 34,
-      address: '上海'
-    },
-    {
-      name: 'Jack',
-      sex: '男',
-      record: '高中',
-      age: 4,
-      address: '杭州'
-    }
-  ],
-  summary: () => {
-    return {
-      value: '这是总结栏',
-      colspan: 5
-    };
-  }
-});
-</script>
-```
+> demo: table align
 
-:::
+### 显示总结栏
 
-### 条纹、明暗交替
+> demo: table summary
 
-:::demo
-
-```vue
-<template>
-  <nut-table :columns="state.columns3" :data="state.data2" :striped="state.striped"></nut-table>
-</template>
-<script setup>
-import { reactive } from 'vue';
-const state = reactive({
-  striped: true,
-  columns3: [
-    {
-      title: '姓名',
-      key: 'name'
-    },
-    {
-      title: '性别',
-      key: 'sex'
-    },
-    {
-      title: '学历',
-      key: 'record'
-    },
-    {
-      title: '年龄',
-      key: 'age'
-    },
-    {
-      title: '地址',
-      key: 'address'
-    }
-  ],
-  data2: [
-    {
-      name: 'Tom',
-      sex: '男',
-      record: '小学',
-      age: 13,
-      address: '北京'
-    },
-    {
-      name: 'Lucy',
-      sex: '女',
-      record: '本科',
-      age: 34,
-      address: '上海'
-    },
-    {
-      name: 'Jack',
-      sex: '男',
-      record: '高中',
-      age: 4,
-      address: '杭州'
-    }
-  ]
-});
-</script>
-```
+### 条纹、明暗交替
 
-:::
+> demo: table striped
 
 ### 无数据默认展示，支持自定义
 
-:::demo
-
-```vue
-<template>
-  <nut-table :columns="state.columns" :data="state.data"></nut-table>
-  <nut-table :columns="state.columns3" :data="state.data3">
-    <template #nodata>
-      <div class="no-data"> 这里是自定义展示 </div>
-    </template>
-  </nut-table>
-</template>
-<script setup>
-import { reactive } from 'vue';
-const state = reactive({
-  columns: [
-    {
-      title: '姓名',
-      key: 'name'
-    },
-    {
-      title: '性别',
-      key: 'sex'
-    },
-    {
-      title: '学历',
-      key: 'record'
-    },
-    {
-      title: '年龄',
-      key: 'age'
-    },
-    {
-      title: '地址',
-      key: 'address'
-    }
-  ],
-  data: [],
-  columns3: [
-    {
-      title: '姓名',
-      key: 'name'
-    },
-    {
-      title: '性别',
-      key: 'sex'
-    },
-    {
-      title: '学历',
-      key: 'record'
-    },
-    {
-      title: '年龄',
-      key: 'age'
-    },
-    {
-      title: '地址',
-      key: 'address'
-    }
-  ],
-  data3: []
-});
-</script>
-```
-
-:::
+> demo: table nodata
 
 ### 自定义单元格
 
-:::demo
-
-```vue
-<template>
-  <nut-table :columns="state.columns" :data="state.data"></nut-table>
-</template>
-<script setup>
-import { reactive, h } from 'vue';
-import { Button, showToast } from '@nutui/nutui';
-import { Dongdong } from '@nutui/icons-vue';
-const state = reactive({
-  columns: [
-    {
-      title: '姓名',
-      key: 'name',
-      align: 'center'
-    },
-    {
-      title: '性别',
-      key: 'sex'
-    },
-    {
-      title: '学历',
-      key: 'record'
-    },
-    {
-      title: '操作',
-      key: 'render'
-    }
-  ],
-  data: [
-    {
-      name: 'Tom',
-      sex: '男',
-      record: '小学',
-      render: () => {
-        return h(
-          Button,
-          {
-            onClick: () => {
-              showToast.text('hello');
-            },
-            size: 'small',
-            type: 'primary'
-          },
-          () => 'Hello'
-        );
-      }
-    },
-    {
-      name: 'Lucy',
-      sex: '女',
-      record: '本科',
-      render: () => {
-        return h(Dongdong, { width: '14px', height: '14px ' });
-      }
-    },
-    {
-      name: 'Jack',
-      sex: '男',
-      record: '高中',
-      render: () => {
-        return h(
-          Button,
-          {
-            type: 'success',
-            size: 'small',
-            onClick: () => {
-              window.open('https://www.jd.com');
-            }
-          },
-          () => '跳转到京东'
-        );
-      }
-    }
-  ]
-});
-</script>
-```
+> demo: table custom
 
-:::
-
-### 支持异步渲染
-
-:::demo
-
-```vue
-<template>
-  <h2>支持异步渲染(5s之后看效果)</h2>
-  <nut-table :columns="state.columns" :data="state.data"></nut-table>
-</template>
-<script setup>
-import { reactive, onMounted } from 'vue';
-const state = reactive({
-  columns: [
-    {
-      title: '姓名',
-      key: 'name'
-    },
-    {
-      title: '性别',
-      key: 'sex'
-    },
-    {
-      title: '学历',
-      key: 'record'
-    },
-    {
-      title: '年龄',
-      key: 'age'
-    },
-    {
-      title: '地址',
-      key: 'address'
-    }
-  ],
-  data: [],
-  data1: [
-    {
-      address: '北京',
-      name: 'Tom',
-      sex: '男',
-      record: '小学',
-      age: 13
-    },
-    {
-      record: '本科',
-      name: 'Lucy',
-      sex: '女',
-      age: 34,
-      address: '上海'
-    },
-    {
-      name: 'Jack',
-      sex: '男',
-      record: '高中',
-      age: 4,
-      address: '杭州'
-    }
-  ]
-});
-onMounted(() => {
-  setTimeout(() => {
-    state.data = state.data1.slice();
-  }, 5000);
-});
-</script>
-```
+### 异步渲染
 
-:::
+> demo: table async
 
 ### 支持排序
 
-:::demo
-
-```vue
-<template>
-  <nut-table :columns="state.columns" :data="state.data" @sorter="handleSorter"></nut-table>
-</template>
-<script setup>
-import { reactive } from 'vue';
-import { showToast } from '@nutui/nutui';
-const state = reactive({
-  columns: [
-    {
-      title: '姓名',
-      key: 'name',
-      align: 'center',
-      sorter: true
-    },
-    {
-      title: '性别',
-      key: 'sex'
-    },
-    {
-      title: '学历',
-      key: 'record'
-    },
-    {
-      title: '年龄',
-      key: 'age',
-      sorter: (row1, row2) => {
-        return row1.age - row2.age;
-      }
-    }
-  ],
-  data: [
-    {
-      name: 'Tom',
-      sex: '男',
-      record: '小学',
-      age: 10
-    },
-    {
-      name: 'Lucy',
-      sex: '女',
-      record: '本科',
-      age: 30
-    },
-    {
-      name: 'Jack',
-      sex: '男',
-      record: '高中',
-      age: 4
-    }
-  ]
-});
-
-const handleSorter = (item) => {
-  showToast.text(`${JSON.stringify(item)}`);
-};
-</script>
-```
-
-:::
+> demo: table sort
 
 ## API
 
diff --git a/src/packages/__VUE/table/doc.taro.md b/src/packages/__VUE/table/doc.taro.md
index 0effea9113..27c4237ca9 100644
--- a/src/packages/__VUE/table/doc.taro.md
+++ b/src/packages/__VUE/table/doc.taro.md
@@ -16,530 +16,39 @@ app.use(Table);
 
 ### 基础用法
 
-:::demo
-
-```vue
-<template>
-  <nut-table :columns="state.columns" :data="state.data"></nut-table>
-</template>
-<script setup>
-import { reactive, h } from 'vue';
-const state = reactive({
-  columns: [
-    {
-      title: '姓名',
-      key: 'name',
-      stylehead: 'font-size:20px;color:red;font-weight:bolder;',
-      stylecolumn: 'font-size:10px;color:blue;'
-    },
-    {
-      title: '性别',
-      key: 'sex',
-      render: (record) => {
-        return h(
-          'span',
-          {
-            style: {
-              color: record.sex === '女' ? 'blue' : 'green'
-            }
-          },
-          record.sex
-        );
-      }
-    },
-    {
-      title: '学历',
-      key: 'record'
-    }
-  ],
-  data: [
-    {
-      name: 'Tom',
-      sex: '男',
-      record: '小学'
-    },
-    {
-      name: 'Lucy',
-      sex: '女',
-      record: '本科'
-    },
-    {
-      name: 'Jack',
-      sex: '男',
-      record: '高中'
-    }
-  ]
-});
-</script>
-```
+> demo: table basic exhibition
 
-:::
-
-### 是否显示边框，文字对齐
-
-:::demo
-
-```vue
-<template>
-  <nut-table :columns="state.columns" :data="state.data" :bordered="state.bordered"></nut-table>
-</template>
-<script setup>
-import { reactive } from 'vue';
-const state = reactive({
-  bordered: false,
-  columns: [
-    {
-      title: '姓名',
-      key: 'name',
-      align: 'center'
-    },
-    {
-      title: '性别',
-      key: 'sex'
-    },
-    {
-      title: '学历',
-      key: 'record'
-    }
-  ],
-  data: [
-    {
-      name: 'Tom',
-      sex: '男',
-      record: '小学'
-    },
-    {
-      name: 'Lucy',
-      sex: '女',
-      record: '本科'
-    },
-    {
-      name: 'Jack',
-      sex: '男',
-      record: '高中'
-    }
-  ]
-});
-</script>
-```
+### 是否显示边框
 
-:::
+> demo: table border exhibition
 
-### 显示总结栏
+### 文字对齐方式
 
-:::demo
-
-```vue
-<template>
-  <nut-table :columns="state.columns" :data="state.data" :summary="state.summary"></nut-table>
-</template>
-<script setup>
-import { reactive } from 'vue';
-const state = reactive({
-  columns: [
-    {
-      title: '姓名',
-      key: 'name'
-    },
-    {
-      title: '性别',
-      key: 'sex'
-    },
-    {
-      title: '学历',
-      key: 'record'
-    },
-    {
-      title: '年龄',
-      key: 'age'
-    },
-    {
-      title: '地址',
-      key: 'address'
-    }
-  ],
-  data: [
-    {
-      name: 'Tom',
-      sex: '男',
-      record: '小学',
-      age: 13,
-      address: '北京'
-    },
-    {
-      name: 'Lucy',
-      sex: '女',
-      record: '本科',
-      age: 34,
-      address: '上海'
-    },
-    {
-      name: 'Jack',
-      sex: '男',
-      record: '高中',
-      age: 4,
-      address: '杭州'
-    }
-  ],
-  summary: () => {
-    return {
-      value: '这是总结栏',
-      colspan: 5
-    };
-  }
-});
-</script>
-```
+> demo: table align exhibition
 
-:::
+### 显示总结栏
 
-### 条纹、明暗交替
+> demo: table summary exhibition
 
-:::demo
-
-```vue
-<template>
-  <nut-table :columns="state.columns3" :data="state.data2" :striped="state.striped"></nut-table>
-</template>
-<script setup>
-import { reactive } from 'vue';
-const state = reactive({
-  striped: true,
-  columns3: [
-    {
-      title: '姓名',
-      key: 'name'
-    },
-    {
-      title: '性别',
-      key: 'sex'
-    },
-    {
-      title: '学历',
-      key: 'record'
-    },
-    {
-      title: '年龄',
-      key: 'age'
-    },
-    {
-      title: '地址',
-      key: 'address'
-    }
-  ],
-  data2: [
-    {
-      name: 'Tom',
-      sex: '男',
-      record: '小学',
-      age: 13,
-      address: '北京'
-    },
-    {
-      name: 'Lucy',
-      sex: '女',
-      record: '本科',
-      age: 34,
-      address: '上海'
-    },
-    {
-      name: 'Jack',
-      sex: '男',
-      record: '高中',
-      age: 4,
-      address: '杭州'
-    }
-  ]
-});
-</script>
-```
+### 条纹、明暗交替
 
-:::
+> demo: table striped exhibition
 
 ### 无数据默认展示，支持自定义
 
-:::demo
-
-```vue
-<template>
-  <nut-table :columns="state.columns" :data="state.data"></nut-table>
-  <nut-table :columns="state.columns3" :data="state.data3">
-    <template #nodata>
-      <div class="no-data"> 这里是自定义展示 </div>
-    </template>
-  </nut-table>
-</template>
-<script setup>
-import { reactive } from 'vue';
-const state = reactive({
-  columns: [
-    {
-      title: '姓名',
-      key: 'name'
-    },
-    {
-      title: '性别',
-      key: 'sex'
-    },
-    {
-      title: '学历',
-      key: 'record'
-    },
-    {
-      title: '年龄',
-      key: 'age'
-    },
-    {
-      title: '地址',
-      key: 'address'
-    }
-  ],
-  data: [],
-  columns3: [
-    {
-      title: '姓名',
-      key: 'name'
-    },
-    {
-      title: '性别',
-      key: 'sex'
-    },
-    {
-      title: '学历',
-      key: 'record'
-    },
-    {
-      title: '年龄',
-      key: 'age'
-    },
-    {
-      title: '地址',
-      key: 'address'
-    }
-  ],
-  data3: []
-});
-</script>
-```
-
-:::
+> demo: table nodata exhibition
 
 ### 自定义单元格
 
-:::demo
-
-```vue
-<template>
-  <nut-table :columns="state.columns" :data="state.data"></nut-table>
-</template>
-<script setup>
-import { reactive, h } from 'vue';
-import { Button } from '@nutui/nutui-taro';
-import { Dongdong } from '@nutui/icons-vue-taro';
-const state = reactive({
-  columns: [
-    {
-      title: '姓名',
-      key: 'name',
-      align: 'center'
-    },
-    {
-      title: '性别',
-      key: 'sex'
-    },
-    {
-      title: '学历',
-      key: 'record'
-    },
-    {
-      title: '操作',
-      key: 'render'
-    }
-  ],
-  data: [
-    {
-      name: 'Tom',
-      sex: '男',
-      record: '小学',
-      render: () => {
-        return h(
-          Button,
-          {
-            onClick: () => {
-              showToast.text('hello');
-            },
-            size: 'small',
-            type: 'primary'
-          },
-          () => 'Hello'
-        );
-      }
-    },
-    {
-      name: 'Lucy',
-      sex: '女',
-      record: '本科',
-      render: () => {
-        return h(Dongdong, { width: '14px', height: '14px ' });
-      }
-    },
-    {
-      name: 'Jack',
-      sex: '男',
-      record: '高中',
-      render: () => {
-        return h(
-          Button,
-          {
-            type: 'success',
-            size: 'small',
-            onClick: () => {
-              window.open('https://www.jd.com');
-            }
-          },
-          () => '跳转到京东'
-        );
-      }
-    }
-  ]
-});
-</script>
-```
+> demo: table custom exhibition
 
-:::
-
-### 支持异步渲染
-
-:::demo
-
-```vue
-<template>
-  <h2>支持异步渲染(5s之后看效果)</h2>
-  <nut-table :columns="state.columns" :data="state.data"></nut-table>
-</template>
-<script setup>
-import { reactive, onMounted } from 'vue';
-const state = reactive({
-  columns: [
-    {
-      title: '姓名',
-      key: 'name'
-    },
-    {
-      title: '性别',
-      key: 'sex'
-    },
-    {
-      title: '学历',
-      key: 'record'
-    },
-    {
-      title: '年龄',
-      key: 'age'
-    },
-    {
-      title: '地址',
-      key: 'address'
-    }
-  ],
-  data: [],
-  data1: [
-    {
-      address: '北京',
-      name: 'Tom',
-      sex: '男',
-      record: '小学',
-      age: 13
-    },
-    {
-      record: '本科',
-      name: 'Lucy',
-      sex: '女',
-      age: 34,
-      address: '上海'
-    },
-    {
-      name: 'Jack',
-      sex: '男',
-      record: '高中',
-      age: 4,
-      address: '杭州'
-    }
-  ]
-});
-onMounted(() => {
-  setTimeout(() => {
-    state.data = state.data1.slice();
-  }, 5000);
-});
-</script>
-```
+### 异步渲染
 
-:::
+> demo: table async exhibition
 
 ### 支持排序
 
-:::demo
-
-```vue
-<template>
-  <nut-table :columns="state.columns" :data="state.data" @sorter="handleSorter"></nut-table>
-</template>
-<script setup>
-import { reactive } from 'vue';
-const state = reactive({
-  columns: [
-    {
-      title: '姓名',
-      key: 'name',
-      align: 'center',
-      sorter: true
-    },
-    {
-      title: '性别',
-      key: 'sex'
-    },
-    {
-      title: '学历',
-      key: 'record'
-    },
-    {
-      title: '年龄',
-      key: 'age',
-      sorter: (row1, row2) => {
-        return row1.age - row2.age;
-      }
-    }
-  ],
-  data: [
-    {
-      name: 'Tom',
-      sex: '男',
-      record: '小学',
-      age: 10
-    },
-    {
-      name: 'Lucy',
-      sex: '女',
-      record: '本科',
-      age: 30
-    },
-    {
-      name: 'Jack',
-      sex: '男',
-      record: '高中',
-      age: 4
-    }
-  ]
-});
-
-const handleSorter = (item) => {
-  console.log(`${JSON.stringify(item)}`);
-};
-</script>
-```
-
-:::
+> demo: table sort exhibition
 
 ## API