diff --git a/src/components/Table.vue b/src/components/Table.vue
index 6d877d5..bc8c671 100644
--- a/src/components/Table.vue
+++ b/src/components/Table.vue
@@ -4,7 +4,9 @@
       <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="appendselection($event)" >{{header}}</th>
+            <!-- @mousedown="onMouseDown($event)" @mouseup="onMouseUp($event)" @click="formatUsersData($event) " -->
           </tr>
         </table>
       </li>
@@ -15,7 +17,6 @@
       </li>
     </ul>
   </div>
-
 </template>
 <script>
 import TableTree from "@/components/TableTree.vue"; // @ is an alias to /src
@@ -28,63 +29,98 @@ export default {
   data: function() {
     return {
       selectedvaluedown: [],
-
       selectedindexdown: 0,
-      formateddata: {}
+      formateddata: {},
+      output:[]
     };
   },
   created: function() {
-    this.formatusersdata();
-    console.log(this.formateddata);
+  this.formatUsersData()
   },
   methods: {
-    //fromate the data from single array structure to tree structure
-    formatusersdata: function() {
-      var formateddata = {};
-      var areas = [];
-      var cities = [];
-      var companies = [];
-      formateddata.name = this.usersdata.header;
-      formateddata.header = this.usersdata.cate_header;
-      formateddata.children = [];
-      for (var item of this.usersdata.info) {
-        if (areas.indexOf(item.state) === -1) {
-          areas.push(item.state);
-        }
+     appendselection:function(e) {
+      this.output.push(e.target.innerHTML)
+      this.formatUsersData(this.output)
+    }
+    ,
+    // format company info from object to array
+    objectToArray(value){
+      var array=[]
+      for(var x in value){
+        array.push(value[x])
       }
-      for (var area of areas) {
-        formateddata.children.push({ name: [area], children: [] });
-      }
-      for (var citychild of formateddata.children) {
-        for (var item of this.usersdata.info) {
-          if (item.state === citychild.name[0]) {
-            var found = citychild.children.some(function(each) {
-              return each.name[0] === item.city;
-            });
-            if (!found) {
-              citychild.children.push({ name: [item.city], children: [] });
-            }
-          }
-        }
-        for (var company of citychild.children) {
-          for (var item of this.usersdata.info) {
-            if (
-              item.city === company.name[0] &&
-              item.state === citychild.name[0]
-            ) {
-              var arr = [];
-              for (var x in item) {
-                if (x != "state" && x != "city") arr.push(item[x]);
-              }
-              company.children.push({ name: arr });
-            }
-          }
-        }
-      }
-      this.formateddata = formateddata;
+      return array
     },
-    //// function below is for swap table header uses.
-    getindexvalue: function(index) {
+    //get matched name by userinput return object in array
+    getName(userinput,data){
+        var array=[]
+        var arrayofobject=[]
+        for(var item of data){
+        if(array.indexOf(item[userinput])===-1){
+          array.push(item[userinput])
+        }
+      }
+      for(var each of array){
+        arrayofobject.push({name:[each]})
+      }
+     return arrayofobject           
+    },
+    //get matched final name's children  return array
+  getFinalChildren(name){
+    var array=[]
+    for(var item of this.usersdata.info){
+        if(Object.values(item).indexOf(name)>-1){
+          array.push({name:this.objectToArray(item)})
+        }
+      }
+      return array
+  },
+  // return object in array
+    getChildren(name){
+    var array=[]
+    for(var item of this.usersdata.info){
+        if(Object.values(item).indexOf(name)>-1){
+          array.push(item)
+        }
+      }
+      return array
+  },
+
+
+    formatUsersData(inputvalue){
+      var formateddata={};
+      var currentchildren
+        for(var x in inputvalue){
+           var dataholder=[]
+           //if this is beginning initial structure and data
+          if(x==0){
+            formateddata.children=this.getName(inputvalue[x],this.usersdata.info)
+            currentchildren=formateddata.children
+            // if only one userselect then output company info
+            if(inputvalue.length==1){
+              for(var finalitem of formateddata.children){
+                  finalitem.children=this.getFinalChildren(finalitem.name[0])
+               }
+            }
+          }else{
+           for(var item of currentchildren){
+             item.children=this.getName(inputvalue[x],this.getChildren(item.name[0]))
+             dataholder=dataholder.concat(item.children)
+           }
+           currentchildren=dataholder
+           //if this is final output company info
+           if(x==inputvalue.length-1){
+             for(var finalitem of currentchildren){
+                  finalitem.children=this.getFinalChildren(finalitem.name[0])
+               }
+           }
+          }
+        }
+        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) {
@@ -95,7 +131,7 @@ export default {
       }
       return array;
     },
-    addindexvalue: function(index, selectedvalue) {
+    addIndexValue: function(index, selectedvalue) {
       var counter = 0;
       this.formateddata.header.splice(index, 1, selectedvalue[0]);
 
@@ -108,22 +144,22 @@ export default {
         }
       }
     },
-    onmousedown: function(e) {
+    onMouseDown: function(e) {
       var index = this.formateddata.header.indexOf(e.target.innerHTML);
       console.log(index);
-      this.selectedvaluedown = this.getindexvalue(index);
+      this.selectedvaluedown = this.getIndexValue(index);
       this.selectedindexdown = index;
     },
-    onmouseup: function(e) {
+    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);
+      var selectedvalueup = this.getIndexValue(index);
+      this.addIndexValue(index, this.selectedvaluedown);
+      this.addIndexValue(this.selectedindexdown, selectedvalueup);
     }
   }
 };
 </script>
-<style>
+<style >
 th,
 tr,
 td {
@@ -134,4 +170,3 @@ table {
   border-collapse: collapse;
 }
 </style>
-