diff --git a/src/App.vue b/src/App.vue
index bce666d..f733d2c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -26,22 +26,24 @@ export default {
           "邮编",
           "国家",
           "电话",
-          "传真"
+          "传真",
+          "区域",
+          "城市"
         ],
-        header: ["中国"],
+        header: ["test"],
         info: [
           {
             客户编号: "HUNGC",
             公司名称: "五金机械",
-            联系人: "苏先生",
+            联系人: "郑先生",
             称谓: "销售代表",
             地址: "德昌路甲",
             邮编: "564576",
             国家: "中国",
             电话: "(053)5556874",
             传真: "(053)5552376",
-            state: "东北",
-            city: "大连"
+            区域: "东北",
+            城市: "大连"
           },
           {
             客户编号: "HUNGC",
@@ -50,11 +52,24 @@ export default {
             称谓: "销售代表",
             地址: "德昌路甲",
             邮编: "564576",
-            国家: "中国",
+            国家: "德国",
             电话: "(053)5556874",
             传真: "(053)5552376",
-            state: "华北",
-            city: "北京"
+            区域: "华北",
+            城市: "北京"
+          },
+          {
+            客户编号: "CENTC",
+            公司名称: "三捷实业",
+            联系人: "陈先生",
+            称谓: "市场经理",
+            地址: "英雄山路",
+            邮编: "130083",
+            国家: "美国",
+            电话: "(061)15553392",
+            传真: "(061)15557292",
+            区域: "华北",
+            城市: "秦皇岛"
           },
           {
             客户编号: "CENTC",
@@ -63,24 +78,11 @@ export default {
             称谓: "市场经理",
             地址: "英雄山路",
             邮编: "130083",
-            国家: "中国",
+            国家: "英国",
             电话: "(061)15553392",
             传真: "(061)15557292",
-            state: "华北",
-            city: "秦皇岛"
-          },
-          {
-            客户编号: "CENTC",
-            公司名称: "三捷实业",
-            联系人: "王先生",
-            称谓: "市场经理",
-            地址: "英雄山路",
-            邮编: "130083",
-            国家: "中国",
-            电话: "(061)15553392",
-            传真: "(061)15557292",
-            state: "华北",
-            city: "秦皇岛"
+            区域: "华北",
+            城市: "秦皇岛"
           }
         ]
       }
diff --git a/src/components/Table.vue b/src/components/Table.vue
index 6d877d5..09f3fff 100644
--- a/src/components/Table.vue
+++ b/src/components/Table.vue
@@ -4,7 +4,8 @@
       <li>
         <table>
           <tr>
-            <th v-for="(header,index) in usersdata.cate_header" @mousedown="onmousedown($event)" @mouseup="onmouseup($event)" :key="index">{{header}}</th>
+            <th v-for="(header,index) in usersdata.cate_header":key="index" @click="formatUsersData($event)">{{header}}</th>
+            <!-- @mousedown="onMouseDown($event)" @mouseup="onMouseUp($event)" -->
           </tr>
         </table>
       </li>
@@ -34,12 +35,97 @@ export default {
     };
   },
   created: function() {
-    this.formatusersdata();
-    console.log(this.formateddata);
   },
   methods: {
-    //fromate the data from single array structure to tree structure
-    formatusersdata: function() {
+    formatUsersData:function(inputvalue){
+      var formateddata = {};
+      var inputvalue=inputvalue.target.innerHTML
+      formateddata.name=[inputvalue] 
+      formateddata.children=[] 
+      for(var item of this.usersdata.info){
+        if(item[inputvalue]){
+          var found = formateddata.children.some(function(each) {
+              return each.name[0] === item[inputvalue];
+            });
+            if (!found) {
+              
+              formateddata.children.push({ name: [item[inputvalue]], children: [] });
+              for(var each of this.usersdata.info){
+                var details=[]
+                if(each[inputvalue]==item[inputvalue]){
+                  for(var eachitem in each){
+                    details.push(each[eachitem])
+                  }
+                  formateddata.children[formateddata.children.length-1].children.push({name:details})
+                }
+              }
+
+            }
+        }
+      }
+      console.log(formateddata)
+      this.formateddata=formateddata
+    },
+ 
+
+
+    //// function below is for swap table header uses.
+    getIndexValue: function(index) {
+      var array = [this.formateddata.header[index]];
+      for (var area of this.formateddata.children) {
+        for (var city of area.children) {
+          for (var company of city.children) {
+            array.push(company.name[index]);
+          }
+        }
+      }
+      return array;
+    },
+    addIndexValue: function(index, selectedvalue) {
+      var counter = 0;
+      this.formateddata.header.splice(index, 1, selectedvalue[0]);
+
+      for (var area of this.formateddata.children) {
+        for (var city of area.children) {
+          for (var company of city.children) {
+            counter += 1;
+            company.name.splice(index, 1, selectedvalue[counter]);
+          }
+        }
+      }
+    },
+    onMouseDown: function(e) {
+      var index = this.formateddata.header.indexOf(e.target.innerHTML);
+      console.log(index);
+      this.selectedvaluedown = this.getIndexValue(index);
+      this.selectedindexdown = index;
+    },
+    onMouseUp: function(e) {
+      var index = this.formateddata.header.indexOf(e.target.innerHTML);
+      var selectedvalueup = this.getIndexValue(index);
+      this.addIndexValue(index, this.selectedvaluedown);
+      this.addIndexValue(this.selectedindexdown, selectedvalueup);
+    }
+  }
+};
+</script>
+<style>
+th,
+tr,
+td {
+  border: black solid 1px;
+}
+th{
+  width:200px
+}
+
+table {
+  border-collapse: collapse;
+}
+</style>
+
+/*
+   formatUsersData: function() {
       var formateddata = {};
       var areas = [];
       var cities = [];
@@ -83,55 +169,4 @@ export default {
       }
       this.formateddata = formateddata;
     },
-    //// function below is for swap table header uses.
-    getindexvalue: function(index) {
-      var array = [this.formateddata.header[index]];
-      for (var area of this.formateddata.children) {
-        for (var city of area.children) {
-          for (var company of city.children) {
-            array.push(company.name[index]);
-          }
-        }
-      }
-      return array;
-    },
-    addindexvalue: function(index, selectedvalue) {
-      var counter = 0;
-      this.formateddata.header.splice(index, 1, selectedvalue[0]);
-
-      for (var area of this.formateddata.children) {
-        for (var city of area.children) {
-          for (var company of city.children) {
-            counter += 1;
-            company.name.splice(index, 1, selectedvalue[counter]);
-          }
-        }
-      }
-    },
-    onmousedown: function(e) {
-      var index = this.formateddata.header.indexOf(e.target.innerHTML);
-      console.log(index);
-      this.selectedvaluedown = this.getindexvalue(index);
-      this.selectedindexdown = index;
-    },
-    onmouseup: function(e) {
-      var index = this.formateddata.header.indexOf(e.target.innerHTML);
-      var selectedvalueup = this.getindexvalue(index);
-      this.addindexvalue(index, this.selectedvaluedown);
-      this.addindexvalue(this.selectedindexdown, selectedvalueup);
-    }
-  }
-};
-</script>
-<style>
-th,
-tr,
-td {
-  border: black solid 1px;
-}
-
-table {
-  border-collapse: collapse;
-}
-</style>
-
+*/
\ No newline at end of file
diff --git a/src/components/TableTree.vue b/src/components/TableTree.vue
index 81ee3bf..76b8057 100644
--- a/src/components/TableTree.vue
+++ b/src/components/TableTree.vue
@@ -38,7 +38,7 @@ ul {
   padding-left: 0px;
 }
 td {
-  width: 10%;
+  width: 120px;
 }
 table {
   width: 60%;