Merge pull request #10 from BitTheCat/feat/new-features

Added sub components for table style v0.2.3

Author: BitTheCat

dev/App.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="py-8 px-8">
         <div class="font-semibold mb-2">
-            Tailwind Vue DataTable v0.2.2
+            Tailwind Vue DataTable v0.2.3
             <span class="text-xs font-light">by BitTheCat</span>
         </div>
         <div>

dev/TableShow.vue

@@ -9,22 +9,22 @@
                 :fields="fieldsSimple"
                 :busy="busy"
                 :spinner-class="'text-red-500'"
-                @check-row="checkRow"
-                @row-clicked="checkRow"
+                multiple-selection
+                enable-check
             >
                 <template #header-row>
                     <tr>
-                        <td colspan="2" />
-                        <td colspan="1">Header1</td>
+                        <td colspan="2" class="bg-red-500" />
+                        <td colspan="2">Header1</td>
                     </tr>
                 </template>
 
 
                 <template #footer-row>
                     <tr>
-                        <td colspan="1" />
-                        <td colspan="1" />
-                        <td colspan="1">Footer</td>
+                        <td colspan="1" class="bg-red-500" />
+                        <td colspan="1" class="bg-green-500"/>
+                        <td colspan="2">Footer</td>
                     </tr>
                 </template>
             </TVTable>
@@ -176,7 +176,7 @@ const changePage = (values) => {
 
 const selectRow = ref([])
 
-const checkRow = (value) => {
+const checkRowMultiple = (value) => {
     if (selectRow.value.includes(value)) {
         let index = selectRow.value.indexOf(value)
         selectRow.value.splice(index, 1)
@@ -185,4 +185,8 @@ const checkRow = (value) => {
     }
 }
 
+const checkRow = (value) => {
+    selectRow.value = selectRow.value === value ? null : value
+}
+
 </script>

dev/css/app.css

@@ -1,3 +1,5 @@
 @import "tailwindcss/base";
 @import "tailwindcss/components";
-@import "tailwindcss/utilities";
+@import "tailwindcss/utilities";
+
+@import "../../src/css/app.css"