add customer table and row components

src/App.vue

@@ -69,6 +69,7 @@
   @import '~bulma/sass/components/card'
   @import '~bulma/sass/elements/button'
   @import '~bulma/sass/elements/form'
+  @import '~bulma/sass/elements/table'
   @import '~bulma/sass/elements/icon'
   @import '~bulma/sass/elements/notification'
   @import '~bulma/sass/elements/other'

src/components/CustomerRow.vue

@@ -0,0 +1,36 @@
+<template>
+    <tr>
+      <td>{{ this.name }}</td>
+      <td>{{ customer.email }}</td>
+      <td>{{ customer.city }}, {{ customer.state }}</td>
+      <td></td>
+    </tr>
+</template>
+
+<script>
+  export default {
+    name: 'customer-row',
+    props: {
+      customer: {
+        type: Object,
+        required: true,
+        validator(value) {
+          const props = [
+            'firstname',
+            'lastname',
+            'email',
+            'city',
+            'state',
+          ];
+
+          return props.every(prop => !!value[prop]);
+        }
+      }
+    },
+    computed: {
+      name() {
+        return `${this.customer.firstname} ${this.customer.lastname}`;
+      },
+    },
+  }
+</script>

src/components/CustomerTable.vue

@@ -0,0 +1,23 @@
+<template>
+  <table class="table">
+    <thead>
+      <tr>
+        <th>Name</th>
+        <th>Email</th>
+        <th>City</th>
+        <th>Actions</th>
+      </tr>
+    </thead>
+    <tbody>
+      <slot>
+        <td rowspan="4">No Customers</td>
+      </slot>
+    </tbody>
+  </table>
+</template>
+
+<script>
+  export default {
+    name: 'customer-table',
+  }
+</script>