diff --git a/package.json b/package.json
index 0d95ce64..e03f8427 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
     "highlight.js": "^9.12.0",
     "js-cookie": "^2.2.0",
     "lodash.clonedeep": "^4.5.0",
+    "lodash.sortby": "^4.7.0",
     "lodash.uniqueid": "^4.0.1",
     "lowdb": "^1.0.0",
     "marked": "^0.3.9",
diff --git a/src/pages/demo/element/data-table/components/table1/index.vue b/src/pages/demo/element/data-table/components/table1/index.vue
index 1df759b4..8dea0858 100644
--- a/src/pages/demo/element/data-table/components/table1/index.vue
+++ b/src/pages/demo/element/data-table/components/table1/index.vue
@@ -22,6 +22,7 @@
 <script>
 export default {
   title: '基础表格',
+  index: 1,
   data () {
     return {
       tableData: [
diff --git a/src/pages/demo/element/data-table/components/table10/index.vue b/src/pages/demo/element/data-table/components/table10/index.vue
index 70ad801d..509f37c6 100644
--- a/src/pages/demo/element/data-table/components/table10/index.vue
+++ b/src/pages/demo/element/data-table/components/table10/index.vue
@@ -35,6 +35,7 @@
 <script>
 export default {
   title: '单选',
+  index: 10,
   data () {
     return {
       tableData: [{
diff --git a/src/pages/demo/element/data-table/components/table11/index.vue b/src/pages/demo/element/data-table/components/table11/index.vue
index 478ab38e..2c557fc2 100644
--- a/src/pages/demo/element/data-table/components/table11/index.vue
+++ b/src/pages/demo/element/data-table/components/table11/index.vue
@@ -36,6 +36,7 @@
 <script>
 export default {
   title: '多选',
+  index: 11,
   data () {
     return {
       tableData3: [{
diff --git a/src/pages/demo/element/data-table/components/table12/index.vue b/src/pages/demo/element/data-table/components/table12/index.vue
index 6a3430dc..3c45fa46 100644
--- a/src/pages/demo/element/data-table/components/table12/index.vue
+++ b/src/pages/demo/element/data-table/components/table12/index.vue
@@ -27,6 +27,7 @@
 <script>
 export default {
   title: '排序',
+  index: 12,
   data () {
     return {
       tableData: [{
diff --git a/src/pages/demo/element/data-table/components/table13/index.vue b/src/pages/demo/element/data-table/components/table13/index.vue
index 79557c90..eaf9b07b 100644
--- a/src/pages/demo/element/data-table/components/table13/index.vue
+++ b/src/pages/demo/element/data-table/components/table13/index.vue
@@ -40,6 +40,7 @@
 <script>
 export default {
   title: '筛选',
+  index: 13,
   data () {
     return {
       tableData: [{
diff --git a/src/pages/demo/element/data-table/components/table14/index.vue b/src/pages/demo/element/data-table/components/table14/index.vue
index 2dfc6b24..91614ccd 100644
--- a/src/pages/demo/element/data-table/components/table14/index.vue
+++ b/src/pages/demo/element/data-table/components/table14/index.vue
@@ -40,6 +40,7 @@
 <script>
 export default {
   title: '自定义列模板',
+  index: 14,
   data () {
     return {
       tableData: [{
diff --git a/src/pages/demo/element/data-table/components/table15/index.vue b/src/pages/demo/element/data-table/components/table15/index.vue
index eb824784..9be2a73d 100644
--- a/src/pages/demo/element/data-table/components/table15/index.vue
+++ b/src/pages/demo/element/data-table/components/table15/index.vue
@@ -47,6 +47,7 @@
 <script>
 export default {
   title: '展开行',
+  index: 15,
   data () {
     return {
       tableData5: [{
diff --git a/src/pages/demo/element/data-table/components/table16/index.vue b/src/pages/demo/element/data-table/components/table16/index.vue
index d02f904e..6bcea96d 100644
--- a/src/pages/demo/element/data-table/components/table16/index.vue
+++ b/src/pages/demo/element/data-table/components/table16/index.vue
@@ -65,6 +65,7 @@
 <script>
 export default {
   title: '表尾合计行',
+  index: 16,
   data () {
     return {
       tableData6: [{
diff --git a/src/pages/demo/element/data-table/components/table17/index.vue b/src/pages/demo/element/data-table/components/table17/index.vue
index 9042af9a..3427e2e5 100644
--- a/src/pages/demo/element/data-table/components/table17/index.vue
+++ b/src/pages/demo/element/data-table/components/table17/index.vue
@@ -64,6 +64,7 @@
 <script>
 export default {
   title: '合并行或列',
+  index: 17,
   data () {
     return {
       tableData6: [{
diff --git a/src/pages/demo/element/data-table/components/table18/index.vue b/src/pages/demo/element/data-table/components/table18/index.vue
index 41f7c4b5..de4e644f 100644
--- a/src/pages/demo/element/data-table/components/table18/index.vue
+++ b/src/pages/demo/element/data-table/components/table18/index.vue
@@ -26,6 +26,7 @@
 <script>
 export default {
   title: '自定义索引',
+  index: 18,
   data () {
     return {
       tableData: [{
diff --git a/src/pages/demo/element/data-table/components/table2/index.vue b/src/pages/demo/element/data-table/components/table2/index.vue
index 8bea5304..fc8286eb 100644
--- a/src/pages/demo/element/data-table/components/table2/index.vue
+++ b/src/pages/demo/element/data-table/components/table2/index.vue
@@ -23,6 +23,7 @@
 <script>
 export default {
   title: '带斑马纹表格',
+  index: 2,
   data () {
     return {
       tableData: [{
diff --git a/src/pages/demo/element/data-table/components/table3/index.vue b/src/pages/demo/element/data-table/components/table3/index.vue
index fa202a85..f646695e 100644
--- a/src/pages/demo/element/data-table/components/table3/index.vue
+++ b/src/pages/demo/element/data-table/components/table3/index.vue
@@ -23,6 +23,7 @@
 <script>
 export default {
   title: '带边框表格',
+  index: 3,
   data () {
     return {
       tableData: [{
diff --git a/src/pages/demo/element/data-table/components/table4/index.vue b/src/pages/demo/element/data-table/components/table4/index.vue
index 5e5c73a1..32f04b01 100644
--- a/src/pages/demo/element/data-table/components/table4/index.vue
+++ b/src/pages/demo/element/data-table/components/table4/index.vue
@@ -23,6 +23,7 @@
 <script>
 export default {
   title: '带状态表格',
+  index: 4,
   methods: {
     tableRowClassName ({row, rowIndex}) {
       if (rowIndex === 1) {
diff --git a/src/pages/demo/element/data-table/components/table5/index.vue b/src/pages/demo/element/data-table/components/table5/index.vue
index 0383fbf1..54e2d1cc 100644
--- a/src/pages/demo/element/data-table/components/table5/index.vue
+++ b/src/pages/demo/element/data-table/components/table5/index.vue
@@ -24,6 +24,7 @@
 <script>
 export default {
   title: '固定表头',
+  index: 5,
   data () {
     return {
       tableData3: [{
diff --git a/src/pages/demo/element/data-table/components/table6/index.vue b/src/pages/demo/element/data-table/components/table6/index.vue
index 9a8ed428..5bc8951a 100644
--- a/src/pages/demo/element/data-table/components/table6/index.vue
+++ b/src/pages/demo/element/data-table/components/table6/index.vue
@@ -49,6 +49,7 @@
 <script>
 export default {
   title: '固定列',
+  index: 6,
   methods: {
     handleClick (row) {
       console.log(row)
diff --git a/src/pages/demo/element/data-table/components/table7/index.vue b/src/pages/demo/element/data-table/components/table7/index.vue
index fea3657d..d9677254 100644
--- a/src/pages/demo/element/data-table/components/table7/index.vue
+++ b/src/pages/demo/element/data-table/components/table7/index.vue
@@ -40,6 +40,7 @@
 <script>
 export default {
   title: '固定列和表头',
+  index: 7,
   data () {
     return {
       tableData3: [{
diff --git a/src/pages/demo/element/data-table/components/table8/index.vue b/src/pages/demo/element/data-table/components/table8/index.vue
index d958e009..1a7d523a 100644
--- a/src/pages/demo/element/data-table/components/table8/index.vue
+++ b/src/pages/demo/element/data-table/components/table8/index.vue
@@ -53,6 +53,7 @@
 <script>
 export default {
   title: '流体高度',
+  index: 8,
   methods: {
     deleteRow (index, rows) {
       rows.splice(index, 1)
diff --git a/src/pages/demo/element/data-table/components/table9/index.vue b/src/pages/demo/element/data-table/components/table9/index.vue
index 1a11a278..8a6e3b0f 100644
--- a/src/pages/demo/element/data-table/components/table9/index.vue
+++ b/src/pages/demo/element/data-table/components/table9/index.vue
@@ -42,6 +42,7 @@
 <script>
 export default {
   title: '多级表头',
+  index: 9,
   data () {
     return {
       tableData3: [{
diff --git a/src/pages/demo/element/data-table/index.vue b/src/pages/demo/element/data-table/index.vue
index e41ec8ef..c5a3c178 100644
--- a/src/pages/demo/element/data-table/index.vue
+++ b/src/pages/demo/element/data-table/index.vue
@@ -15,14 +15,18 @@
 </template>
 
 <script>
+import sortby from 'lodash.sortby'
 const req = context => context.keys().map(context)
 const tables = req(require.context('./components', true, /\.vue$/))
 const components = {}
 const tableList = []
-tables.forEach((table, index) => {
-  components[`d2-demo-el-table-${index + 1}`] = table.default
+sortby(tables.map(e => ({
+  component: e.default,
+  index: e.default.index
+})), ['index']).forEach((table, index) => {
+  components[`d2-demo-el-table-${index + 1}`] = table.component
   tableList.push({
-    title: table.default.title,
+    title: table.component.title,
     component: `d2-demo-el-table-${index + 1}`
   })
 })