From b76e20c8366622169b55a35b2d245cd4a49aff6c Mon Sep 17 00:00:00 2001
From: Jeffrey Biles <bilesjeffrey@gmail.comgit config -l>
Date: Tue, 17 Mar 2020 11:55:13 -0700
Subject: [PATCH] Basic email table

---
 src/components/InboxScreen.vue | 31 ++++++++++++++++++++++++++++--
 src/components/MailTable.vue   | 35 ++++++++++++++++++++++++++++++++++
 2 files changed, 64 insertions(+), 2 deletions(-)
 create mode 100644 src/components/MailTable.vue

diff --git a/src/components/InboxScreen.vue b/src/components/InboxScreen.vue
index 7bc9d9e..de637c2 100644
--- a/src/components/InboxScreen.vue
+++ b/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>
 
diff --git a/src/components/MailTable.vue b/src/components/MailTable.vue
new file mode 100644
index 0000000..82a4f29
--- /dev/null
+++ b/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>
\ No newline at end of file