Merge pull request #4 from BitTheCat/footer-row

Added Footer Row

Author: BitTheCat

.eslintrc.js

@@ -8,8 +8,9 @@ module.exports = {
             "error",
             4,
         ],
-        "vue/html-indent": 0,
-        "vue/max-attributes-per-line": 0,
-        "vue/html-self-closing": 0,
+        "vue/html-indent": 'off',
+        "vue/max-attributes-per-line": 'off',
+        "vue/html-self-closing": 'off',
+        "no-unused-vars": 'off',
     }
 } 

README.md

@@ -54,11 +54,9 @@ import { TVTable } from '@bitthecat/tailwind-vue-data-table'
 
 - Select rows (visual) ✔️
 
-- Provide item from api url
-
-- Footer
+- Footer ✔️
 
-- Refresh table
+- Provide item from api url
 
 - ...
 
@@ -85,7 +83,8 @@ import { TVTable } from '@bitthecat/tailwind-vue-data-table'
 | fields | data fields |
 | #cell:FIELD_NAME | used for overwrite |
 | #row-details | row details, you need to use row.toggleDetails(row.item) within a template that contains an icon/button to toggle it |
-| #header-row | used for additional rows up the header |
+| #header-row | used for additional row up the header |
+| #footer-row | used for show table footer row |
 
 slot 'cell:' has item or data props
 

dev/TableShow.vue

@@ -37,6 +37,14 @@
                     </tr>
                 </template>
 
+                <template #footer-row>
+                    <tr>
+                        <td colspan="1" />
+                        <td colspan="1" class="bg-green-300 text-center"></td>
+                        <td colspan="3" class="bg-red-300 text-center">Footer</td>
+                    </tr>
+                </template>
+
                 <template #cell:username="row">
                     {{ row.item.emoji }} - {{ row.item.username }}
                 </template>

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@bitthecat/tailwind-vue-data-table",
-    "version": "0.1.7",
+    "version": "0.1.8",
     "keywords": [
         "tailwindcss",
         "vue",

src/components/TVTable.vue

@@ -107,6 +107,9 @@
                 </tr>
             </template>
         </tbody>
+        <tfoot class="bg-gray-300 border divide-x divide-y">
+            <slot v-if="slots['footer-row']" name="footer-row" />
+        </tfoot>
     </table>
 
     <TVPagination