complete

 <template lang="html">
 <template lang="html">
   <v-flex>
   <v-flex>
     <h1>연락처</h1>
     <h1>연락처</h1>
+    <v-text-field
+      v-model="search"
+      append-icon="mdi-magnify"
+      label="Search"
+      single-line
+      hide-details
+    ></v-text-field>
+<!--
     <v-simple-table>
     <v-simple-table>
       <template v-slot:default>
       <template v-slot:default>
         <thead>
         <thead>
@@ -19,6 +27,13 @@
         </tbody>
         </tbody>
       </template>
       </template>
     </v-simple-table>
     </v-simple-table>
+-->
+    <v-data-table
+      :headers="headers"
+      :items="contact_list"
+      :search="search"
+    >
+    </v-data-table>
     <v-divider></v-divider>
     <v-divider></v-divider>
     <div v-cloak @drop.prevnet="addContact" @dragover.prevent>
     <div v-cloak @drop.prevnet="addContact" @dragover.prevent>
       <input
       <input
@@ -41,6 +56,17 @@
   export default {
   export default {
     data() {
     data() {
       return {
       return {
+        search:'',
+        headers:[
+          {
+            text: 'Name',
+            align: 'start',
+            sortable: false,
+            value: 'name'
+          },
+          {text: 'phone', value:'email'},
+          {text:'email', value:'phone'}
+        ],
         contact_list : [],
         contact_list : [],
         contact_file : null
         contact_file : null
       }
       }