diff --git a/frontend/src/views/dataset/add/AddDB.vue b/frontend/src/views/dataset/add/AddDB.vue
index f47fd53219..c80c8b4d4a 100644
--- a/frontend/src/views/dataset/add/AddDB.vue
+++ b/frontend/src/views/dataset/add/AddDB.vue
@@ -42,7 +42,7 @@
           </el-form-item>
         </el-form>
       </el-row>
-      <el-row style="overflow: auto;height: 600px;">
+      <el-row style="overflow: auto;height: 60vh;">
         <el-checkbox-group v-model="checkTableList" size="small">
           <el-checkbox
             v-for="t in tableData"
diff --git a/frontend/src/views/dataset/add/AddSQL.vue b/frontend/src/views/dataset/add/AddSQL.vue
index 17d9b5e056..159c10325e 100644
--- a/frontend/src/views/dataset/add/AddSQL.vue
+++ b/frontend/src/views/dataset/add/AddSQL.vue
@@ -60,7 +60,7 @@
               ref="plxTable"
               size="mini"
               style="width: 100%;"
-              :height="500"
+              :height="height"
               :checkbox-config="{highlight: true}"
             >
               <ux-table-column
@@ -133,7 +133,8 @@ export default {
       },
       data: [],
       fields: [],
-      mode: '0'
+      mode: '0',
+      height: 500
     }
   },
   computed: {
@@ -143,6 +144,12 @@ export default {
   },
   watch: {},
   mounted() {
+    window.onresize = () => {
+      return (() => {
+        this.height = window.innerHeight / 2
+      })()
+    }
+    this.height = window.innerHeight / 2
     this.initDataSource()
     this.$refs.myCm.codemirror.on('keypress', () => {
       this.$refs.myCm.codemirror.showHint()
diff --git a/frontend/src/views/dataset/common/DatasetTableData.vue b/frontend/src/views/dataset/common/DatasetTableData.vue
index 25068f3e8e..1b097b9246 100644
--- a/frontend/src/views/dataset/common/DatasetTableData.vue
+++ b/frontend/src/views/dataset/common/DatasetTableData.vue
@@ -1,21 +1,22 @@
 <template>
   <el-col>
     <span>{{ table.name }}</span>
-    <el-table
+    <ux-grid
+      ref="plxTable"
       size="mini"
-      :data="data"
-      height="40vh"
-      border
-      style="width: 100%;margin-top: 6px;"
+      style="width: 100%;"
+      :height="height"
+      :checkbox-config="{highlight: true}"
     >
-      <el-table-column
+      <ux-table-column
         v-for="field in fields"
         :key="field.originName"
         min-width="200px"
-        :prop="field.originName"
-        :label="field.name"
+        :field="field.originName"
+        :title="field.name"
+        :resizable="true"
       />
-    </el-table>
+    </ux-grid>
   </el-col>
 </template>
 
@@ -25,13 +26,16 @@ import { post } from '@/api/dataset/dataset'
 export default {
   name: 'DatasetTableData',
   props: {
-    // eslint-disable-next-line vue/require-default-prop
-    table: Object
+    table: {
+      type: Object,
+      required: true
+    }
   },
   data() {
     return {
       fields: [],
-      data: []
+      data: [],
+      height: 500
     }
   },
   watch: {
@@ -39,10 +43,14 @@ export default {
       this.initData()
     }
   },
-  created() {
-    this.initData()
-  },
   mounted() {
+    window.onresize = () => {
+      return (() => {
+        this.height = window.innerHeight / 3
+      })()
+    }
+    this.height = window.innerHeight / 3
+    this.initData()
   },
   methods: {
     initData() {
@@ -51,6 +59,8 @@ export default {
         post('/dataset/table/getPreviewData', this.table).then(response => {
           this.fields = response.data.fields
           this.data = response.data.data
+          const datas = this.data
+          this.$refs.plxTable.reloadData(datas)
         })
       }
     },
diff --git a/frontend/src/views/dataset/data/TabDataPreview.vue b/frontend/src/views/dataset/data/TabDataPreview.vue
index 7ce0331f28..c5263bdcaa 100644
--- a/frontend/src/views/dataset/data/TabDataPreview.vue
+++ b/frontend/src/views/dataset/data/TabDataPreview.vue
@@ -4,7 +4,7 @@
       ref="plxTable"
       size="mini"
       style="width: 100%;"
-      :height="500"
+      :height="height"
       :checkbox-config="{highlight: true}"
     >
       <ux-table-column
@@ -23,12 +23,22 @@
 export default {
   name: 'TabDataPreview',
   props: {
-    table: Object,
-    fields: Array,
-    data: Array
+    table: {
+      type: Object,
+      required: true
+    },
+    fields: {
+      type: Array,
+      required: true
+    },
+    data: {
+      type: Array,
+      required: true
+    }
   },
   data() {
     return {
+      height: 500
     }
   },
   computed: {
@@ -39,9 +49,13 @@ export default {
       this.$refs.plxTable.reloadData(datas)
     }
   },
-  created() {
-  },
   mounted() {
+    window.onresize = () => {
+      return (() => {
+        this.height = window.innerHeight / 2
+      })()
+    }
+    this.height = window.innerHeight / 2
   },
   activated() {
   },