From 66b1e070d6597c5ad8601233857723d7c6356681 Mon Sep 17 00:00:00 2001
From: busti <mbust@live.de>
Date: Thu, 14 Nov 2019 04:37:35 +0100
Subject: [PATCH] create basic table component

---
 src/App.vue              | 83 ++--------------------------------------
 src/components/Table.vue | 23 +++++++++++
 2 files changed, 27 insertions(+), 79 deletions(-)
 create mode 100644 src/components/Table.vue

diff --git a/src/App.vue b/src/App.vue
index 3162373..cbd4a7c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,94 +2,19 @@
     <div id="app">
         <Navbar/>
 
-        <div class="input-group mt-2 mx-2">
-            <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username with two button addons" aria-describedby="button-addon4">
-            <div class="input-group-append" id="button-addon4">
-                <button class="btn btn-outline-secondary" type="button">Button</button>
-                <button class="btn btn-outline-secondary" type="button">Button</button>
-            </div>
-        </div>
-
         <div class="container mt-2">
-            <table class="table table-striped table-dark">
-                <thead>
-                <tr>
-                    <th scope="col">#</th>
-                    <th scope="col">First</th>
-                    <th scope="col">Last</th>
-                    <th scope="col">Handle</th>
-                    <th scope="col">Buttons</th>
-                </tr>
-                </thead>
-                <tbody>
-                <tr>
-                    <th scope="row">1</th>
-                    <td>Mark</td>
-                    <td>Otto</td>
-                    <td>@mdo</td>
-                    <td>
-                        <div class="btn-group btn-group-toggle" data-toggle="buttons">
-                            <button class="btn btn-success active">
-                                <font-awesome-icon icon="check-circle"/>
-                            </button>
-                            <button class="btn btn-secondary active">
-                                <font-awesome-icon icon="edit"/>
-                            </button>
-                            <button class="btn btn-danger active">
-                                <font-awesome-icon icon="trash"/>
-                            </button>
-                        </div>
-                    </td>
-                </tr>
-                <tr>
-                    <th scope="row">2</th>
-                    <td>Jacob</td>
-                    <td>Thornton</td>
-                    <td>@fat</td>
-                    <td>
-                        <div class="btn-group btn-group-toggle" data-toggle="buttons">
-                            <button class="btn btn-success active">
-                                <font-awesome-icon icon="check-circle"/>
-                            </button>
-                            <button class="btn btn-secondary active">
-                                <font-awesome-icon icon="edit"/>
-                            </button>
-                            <button class="btn btn-danger active">
-                                <font-awesome-icon icon="trash"/>
-                            </button>
-                        </div>
-                    </td>
-                </tr>
-                <tr>
-                    <th scope="row">3</th>
-                    <td>Larry</td>
-                    <td>the Bird</td>
-                    <td>@twitter</td>
-                    <td>
-                        <div class="btn-group btn-group-toggle" data-toggle="buttons">
-                            <button class="btn btn-success active">
-                                <font-awesome-icon icon="check-circle"/>
-                            </button>
-                            <button class="btn btn-secondary active">
-                                <font-awesome-icon icon="edit"/>
-                            </button>
-                            <button class="btn btn-danger active">
-                                <font-awesome-icon icon="trash"/>
-                            </button>
-                        </div>
-                    </td>
-                </tr>
-                </tbody>
-            </table>
+            <Table/>
         </div>
     </div>
 </template>
 
 <script>
+import Table from '@/components/Table';
 import Navbar from '@/components/Navbar';
+
 export default {
   name: 'app',
-  components: {Navbar},
+  components: { Navbar, Table },
 };
 </script>
 
diff --git a/src/components/Table.vue b/src/components/Table.vue
new file mode 100644
index 0000000..b957484
--- /dev/null
+++ b/src/components/Table.vue
@@ -0,0 +1,23 @@
+<template>
+    <table class="table table-striped table-dark">
+        <thead>
+        <tr>
+            <th scope="col" v-for="(column, index) in columns" :key="index">{{ column.name }}</th>
+        </tr>
+        </thead>
+    </table>
+</template>
+
+<script>
+export default {
+  name: 'Table',
+  data: () => ({
+    columns: [
+      { name: 'uid', sortFn: (items) => items },
+      { name: 'description', sortFn: (items) => items },
+      { name: 'box', sortFn: (items) => items },
+      { name: 'image', sortFn: (items) => items }
+    ]
+  })
+};
+</script>
\ No newline at end of file