Basic email table

src/components/InboxScreen.vue

@@ -1,12 +1,39 @@
 <template>
   <h1>VMail Inbox</h1>
 
-  <div>Table will go here</div>
+  <MailTable :emails="emails" />
 </template>
 
 <script>
+  import MailTable from '@/components/MailTable.vue';
   export default {
-    
+    setup(props, {attrs, slots}){
+      
+      let emails = [{
+        id: 1,
+        subject: 'First Steps',
+        body: 'Learning Vue with Vue 3, cool!',
+        read: false,
+        archived: false,
+      }, {
+        id: 2,
+        subject: 'Vue 3 - pretty cool',
+        body: 'Lots of really good features happening here',
+        read: false,
+        archived: false
+      }, {
+        id: 3,
+        subject: 'Do we have a released date?',
+        body: "I hear Q2 2020.",
+        read: true,
+        archived: false
+      }]
+
+      return {emails}
+    },
+    components: {
+      MailTable
+    }
   }
 </script>
 

src/components/MailTable.vue

@@ -0,0 +1,35 @@
+<template>
+  <table>
+    <thead>
+
+    </thead>
+    <tbody>
+      <tr v-for="email in emails" :key="email.id">
+        <td><input type="checkbox" /></td>
+        <td>{{email.subject}}</td>
+        <td>{{email.body}}</td>
+      </tr>
+    </tbody>
+  </table>
+</template>
+
+<script>
+  export default {
+    props: {
+      emails: {
+        type: Array,
+        default: []
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  table {
+    max-width: 800px;
+    margin: auto;
+  }
+  td {
+    text-align: left;
+  }
+</style>