Video 2 - Create UI for table using Options API techniques

src/App.vue

@@ -1,13 +1,34 @@
 <template>
   <h1>VMail Inbox</h1>
+
+  <table class="mail-table">
+    <tbody>
+      <tr v-for="email in unarchivedEmails"
+          :key="email.id"
+          :class="['clickable', email.read ? 'read' : '']"
+          @click="email.read = true">
+        <td>
+          <input type="checkbox" />
+        </td>
+        <td>{{email.from}}</td>
+        <td>
+          <p><strong>{{email.subject}}</strong> - {{email.body}}</p>
+        </td>
+        <td class="date">{{format(new Date(email.sentAt), 'MMM do yyyy')}}</td>
+        <td><button @click="email.archived = true">Archive</button></td>
+      </tr>
+    </tbody>
+  </table>
 </template>
   
 <script>
+import { format } from 'date-fns';
 
 export default {
   name: 'App',
   data(){
     return {
+      format,
       "emails": [
         {
           "id": 1,
@@ -47,6 +68,16 @@ export default {
         }
       ]
     }
+  },
+  computed: {
+    sortedEmails() {
+      return this.emails.sort((e1, e2) => {
+        return e1.sentAt < e2.sentAt ? 1 : -1
+      })
+    },
+    unarchivedEmails() {
+      return this.sortedEmails.filter(e => !e.archived)
+    }
   }
 };
 </script>