Added first version of data table

Author: BitTheCat

.gitignore

@@ -0,0 +1 @@
+node_modules

README.md

@@ -1 +1,63 @@
-# tailwind-vue-data-table
+# Tailwind Vue Data Table
+
+<img src="tvdatatable.jpg"/>
+
+### Next additions
+- Select row column (with checkbox)
+- Row detail
+- ...
+<hr>
+
+## Table
+### Props
+
+| Props | Default | Description |
+| --- | --- | --- |
+| multipleSortable | false | enables multiple sortable for table header |
+### Slots
+
+| Props | Description |
+| --- | --- |
+| items | table data |
+| fields | data fields |
+| #cell:FIELD_NAME | used for overwrite |
+
+
+slot 'cell:' has item or data props
+
+item retrieves the row value
+
+``` html
+    <template #cell:username="{ item }">
+        {{ item.emoji }} - {{ item.username }}
+    </template>
+```
+
+data retrieves the field value
+
+``` html
+    <template #cell:username="{ data }">
+        {{ data }}
+    </template>
+```
+
+### Events
+
+| Event | Description |
+| --- | --- |
+| updateSortable | emit the sortable field/fields |
+
+<hr>
+
+## Fields 
+### Props
+
+| Props | Description |
+| --- | --- |
+| key | Th Title |
+| label | index of value |
+| sortable | the default setting is false, if set to true a symbol appears for sorting |
+| thStyle | used for overwrite the th style |
+| tdStyle | used for overwrite the td style |
+| thClass | used for overwrite the th class |
+| tdClass | used for overwrite the td class |

dev/App.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="pb-36">
+
+    <div class="flex max-w-2xl mx-auto mb-10 space-x-4 sm:mt-10">
+      <div class="flex flex-col items-center flex-grow">
+        <div class="font-semibold mb-2">
+            Tailwind Vue DataTable
+            <span class="text-xs font-light">by BitTheCat</span>
+        </div>
+        <div>
+            <router-view />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from 'vue';
+export default defineComponent({
+  name: 'App',
+});
+</script>

dev/Table.vue

@@ -0,0 +1,96 @@
+<template>
+    <div class="grid gap-4">
+        <span class="text-xs"> Simple </span> 
+        <TVDataTable
+            :items="items"
+            :fields="fieldsSimple"
+        >
+        </TVDataTable>
+
+        <hr>
+
+        <span class="text-xs">With Props</span>
+        <TVDataTable
+            :items="items"
+            :fields="fields"
+            multiple-sortable
+        >
+            <template #cell:username="{ item }">
+                {{ item.emoji }} - {{ item.username }}
+            </template>
+        </TVDataTable>
+
+
+    </div>
+</template>
+
+<script setup>
+import { defineComponent, ref } from 'vue';
+import TVDataTable from '../src/components/TVDataTable.vue';
+
+defineComponent({
+  name: 'Table',
+}) 
+
+const fields = ref([
+    {
+        label: 'id',
+        key: 'id',
+        thStyle: 'width: 30px',
+        sortable: true
+    },
+    {
+        label: 'username',
+        key: 'username',
+        thStyle: 'background: lightblue',
+        thClass: 'text-white',
+        tdClass: 'text-center',
+        sortable: true
+    },
+    {
+        label: 'email',
+        key: 'email',
+        tdClass: 'bg-indigo-300'
+    },
+])
+
+const fieldsSimple = ref([
+    {
+        label: 'id',
+        key: 'id',
+        sortable: true
+    },
+    {
+        label: 'username',
+        key: 'username',
+        sortable: true
+    },
+    {
+        label: 'email',
+        key: 'email',
+    },
+])
+
+
+const items = ref([
+    {
+        id: '1',
+        username: 'cat',
+        email: '[email protected]',
+        emoji: '🐈'
+    },
+    {
+        id: '2',
+        username: 'dog',
+        email: '[email protected]',
+        emoji: '🐕'
+    },
+    {
+        id: '3',
+        username: 'bird',
+        email: '[email protected]',
+        emoji: '🐦'
+    },
+])
+
+</script>

dev/main.ts

@@ -0,0 +1,12 @@
+import '../src/css/app.css';
+import { createApp } from 'vue';
+
+import App from './App.vue';
+
+import router from './router';
+
+const app = createApp(App);
+
+app.use(router);
+
+app.mount('#app');

dev/router.ts

@@ -0,0 +1,14 @@
+import { createRouter, createWebHistory } from 'vue-router';
+
+import Table from './Table.vue'
+
+const routes = [
+  { path: '/', component: Table },
+];
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes,
+});
+
+export default router;

index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Tailwind Vue DataTable</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/dev/main.ts"></script>
+  </body>
+</html>