diff --git a/src/data-table/demos/enUS/fixed-header-column.demo.md b/src/data-table/demos/enUS/fixed-header-column.demo.md
index 18c88a0ae..81aa9d283 100644
--- a/src/data-table/demos/enUS/fixed-header-column.demo.md
+++ b/src/data-table/demos/enUS/fixed-header-column.demo.md
@@ -16,7 +16,8 @@ Note that: If you have set fixed column, you should also set `scroll-x`.
 ```
 
 ```js
-import { h } from 'vue'
+import { h, defineComponent } from 'vue'
+import { useMessage } from 'naive-ui'
 
 const columns = [
   {
@@ -66,30 +67,22 @@ const columns = [
   }
 ]
 
-const data = Array.apply(null, { length: 46 }).map((_, index) => ({
-  key: index,
-  name: `Edward King ${index}`,
-  age: 32,
-  address: `London, Park Lane no. ${index}`
-}))
-
-export default {
-  inject: ['message'],
-  data () {
+export default defineComponent({
+  setup () {
+    const message = useMessage()
     return {
-      data,
-      columns
-    }
-  },
-  computed: {
-    pagination () {
-      return { pageSize: 10 }
-    }
-  },
-  methods: {
-    sendMail (rowData) {
-      this.message.info('send mail to ' + rowData.name)
+      data: Array.apply(null, { length: 46 }).map((_, index) => ({
+        key: index,
+        name: `Edward King ${index}`,
+        age: 32,
+        address: `London, Park Lane no. ${index}`
+      })),
+      columns,
+      pagination: { pageSize: 10 },
+      sendMail (rowData) {
+        message.info('send mail to ' + rowData.name)
+      }
     }
   }
-}
+})
 ```
diff --git a/src/data-table/demos/enUS/fixed-header.demo.md b/src/data-table/demos/enUS/fixed-header.demo.md
index 87c211e62..3e471b928 100644
--- a/src/data-table/demos/enUS/fixed-header.demo.md
+++ b/src/data-table/demos/enUS/fixed-header.demo.md
@@ -13,6 +13,8 @@ Display large amounts of data in scrollable view by set `max-height`.
 ```
 
 ```js
+import { defineComponent } from 'vue'
+
 const columns = [
   {
     title: 'Name',
@@ -28,28 +30,20 @@ const columns = [
   }
 ]
 
-const data = Array.apply(null, { length: 46 }).map((_, index) => ({
-  key: index,
-  name: `Edward King ${index}`,
-  age: 32,
-  address: `London, Park Lane no. ${index}`
-}))
-
-export default {
-  inject: ['message'],
+export default defineComponent({
   data () {
     return {
-      data,
+      data: Array.apply(null, { length: 46 }).map((_, index) => ({
+        key: index,
+        name: `Edward King ${index}`,
+        age: 32,
+        address: `London, Park Lane no. ${index}`
+      })),
       columns,
       pagination: {
         pageSize: 15
       }
     }
-  },
-  methods: {
-    sendMail (rowData) {
-      this.message.info('send mail to ' + rowData.name)
-    }
   }
-}
+})
 ```
diff --git a/src/data-table/demos/enUS/select.demo.md b/src/data-table/demos/enUS/select.demo.md
index 881b97c3e..32386c923 100644
--- a/src/data-table/demos/enUS/select.demo.md
+++ b/src/data-table/demos/enUS/select.demo.md
@@ -3,10 +3,10 @@
 Rows can be selectable by making first column's type as `selection`.
 
 ```html
-<div>
+<n-p>
   You have selected {{ checkedRowKeys.length }} row{{ checkedRowKeys.length < 2
   ? '': 's'}}.
-</div>
+</n-p>
 
 <n-data-table
   ref="table"
@@ -47,7 +47,6 @@ const data = Array.apply(null, { length: 46 }).map((_, index) => ({
 }))
 
 export default {
-  inject: ['message'],
   data () {
     return {
       data,
@@ -59,9 +58,6 @@ export default {
     }
   },
   methods: {
-    sendMail (rowData) {
-      this.message.info('send mail to ' + rowData.name)
-    },
     handleCheck (rowKeys) {
       this.checkedRowKeys = rowKeys
     }
diff --git a/src/data-table/demos/zhCN/fixed-header-column.demo.md b/src/data-table/demos/zhCN/fixed-header-column.demo.md
index fc9488762..1dea29249 100644
--- a/src/data-table/demos/zhCN/fixed-header-column.demo.md
+++ b/src/data-table/demos/zhCN/fixed-header-column.demo.md
@@ -15,8 +15,19 @@
 />
 ```
 
+```html
+<n-data-table
+  ref="table"
+  :columns="columns"
+  :data="data"
+  :pagination="pagination"
+  :max-height="250"
+  :scroll-x="1800"
+/>
+```
+
 ```js
-import { h } from 'vue'
+import { h, defineComponent } from 'vue'
 
 const columns = [
   {
@@ -66,30 +77,18 @@ const columns = [
   }
 ]
 
-const data = Array.apply(null, { length: 46 }).map((_, index) => ({
-  key: index,
-  name: `Edward King ${index}`,
-  age: 32,
-  address: `London, Park Lane no. ${index}`
-}))
-
-export default {
-  inject: ['message'],
-  data () {
+export default defineComponent({
+  setup () {
     return {
-      data,
-      columns
-    }
-  },
-  computed: {
-    pagination () {
-      return { pageSize: 10 }
-    }
-  },
-  methods: {
-    sendMail (rowData) {
-      this.message.info('send mail to ' + rowData.name)
+      data: Array.apply(null, { length: 46 }).map((_, index) => ({
+        key: index,
+        name: `Edward King ${index}`,
+        age: 32,
+        address: `London, Park Lane no. ${index}`
+      })),
+      columns,
+      pagination: { pageSize: 10 }
     }
   }
-}
+})
 ```
diff --git a/src/data-table/demos/zhCN/fixed-header.demo.md b/src/data-table/demos/zhCN/fixed-header.demo.md
index 270780252..565725ce4 100644
--- a/src/data-table/demos/zhCN/fixed-header.demo.md
+++ b/src/data-table/demos/zhCN/fixed-header.demo.md
@@ -13,6 +13,8 @@
 ```
 
 ```js
+import { defineComponent } from 'vue'
+
 const columns = [
   {
     title: 'Name',
@@ -28,28 +30,20 @@ const columns = [
   }
 ]
 
-const data = Array.apply(null, { length: 46 }).map((_, index) => ({
-  key: index,
-  name: `Edward King ${index}`,
-  age: 32,
-  address: `London, Park Lane no. ${index}`
-}))
-
-export default {
-  inject: ['message'],
+export default defineComponent({
   data () {
     return {
-      data,
+      data: Array.apply(null, { length: 46 }).map((_, index) => ({
+        key: index,
+        name: `Edward King ${index}`,
+        age: 32,
+        address: `London, Park Lane no. ${index}`
+      })),
       columns,
       pagination: {
         pageSize: 15
       }
     }
-  },
-  methods: {
-    sendMail (rowData) {
-      this.message.info('send mail to ' + rowData.name)
-    }
   }
-}
+})
 ```
diff --git a/src/data-table/demos/zhCN/select.demo.md b/src/data-table/demos/zhCN/select.demo.md
index 12f8dfd53..9bbd5816d 100644
--- a/src/data-table/demos/zhCN/select.demo.md
+++ b/src/data-table/demos/zhCN/select.demo.md
@@ -3,6 +3,8 @@
 可以通过把第一列的类型设为 `selection` 来让行变成可选的。
 
 ```html
+<n-p> 你选中了 {{ checkedRowKeys.length }} 行。 </n-p>
+
 <n-data-table
   ref="table"
   :columns="columns"
@@ -42,7 +44,6 @@ const data = Array.apply(null, { length: 46 }).map((_, index) => ({
 }))
 
 export default {
-  inject: ['message'],
   data () {
     return {
       data,
@@ -54,9 +55,6 @@ export default {
     }
   },
   methods: {
-    sendMail (rowData) {
-      this.message.info('send mail to ' + rowData.name)
-    },
     handleCheck (rowKeys) {
       this.checkedRowKeys = rowKeys
     }