Pass row data information as tfoot slot scope

Update documentation and demo examples with `tfoot` slot usage.

Note: with later versions of `vue` we'll need to change the attribute
name from `scope` to `slot-scope`

CHANGELOG.md

@@ -2,6 +2,9 @@
 
 All notable changes to `vue-table-component` will be documented in this file
 
+## 1.7.0 - 2017-10-26
+- Added named slot `tfoot` to display table footer information, receives row data as scoped properties
+
 ## 1.6.1 - 2017-09-25
 - Fixed a bug that didn't rerender the table when a column was changed
 

README.md

@@ -226,7 +226,7 @@ Alternatively you can pass a function to the `formatter` prop. Here's an example
 export default {
     methods: {
         formatter(value, rowProperties) {
-            return `Hi, I am ${value}`;    
+            return `Hi, I am ${value}`;
         },
     },
 }
@@ -235,6 +235,63 @@ export default {
 
 This will display values `Hi, I am John` and `Hi, I am Paul`.
 
+## Adding table footer `<tfoot>` information
+
+Sometimes it can be useful to add information to the bottom of the table like summary data.
+A slot named `tfoot` is available and it receives all of the `rows` data to do calculations on the fly or you can show data directly from whatever is available in the parent scope.
+
+```html
+<table-component
+    :data="[{ firstName: 'John', songs: 72 },{ firstName: 'Paul', songs: 70 }]">
+    <table-column show="firstName" label="First name"></table-column>
+    <table-column show="songs" label="Songs" data-type="numeric"></table-column>
+    <template slot="tfoot" scope="{ rows }">
+        <tr>
+            <th>Total Songs:</th>
+            <th>{{ rows.reduce((sum, value) => { return sum + value.data.songs; }, 0) }}</th>
+            <th>&nbsp;</th>
+            <th>&nbsp;</th>
+        </tr>
+    </template>
+</table-component>
+```
+
+OR  
+
+```vue
+<template>
+    <table-component
+        :data="tableData">
+        <table-column show="firstName" label="First name"></table-column>
+        <table-column show="songs" label="Songs" data-type="numeric"></table-column>
+        <template slot="tfoot">
+            <tr>
+                <th>Total Songs:</th>
+                <th>{{ totalSongs }}</th>
+            </tr>
+        </template>
+    </table-component>
+</template>
+<script>
+export default {
+    computed: {
+        totalSongs () {
+            return this.tableData.reduce(sum, value => {
+                return sum + value.songs;
+            }, 0);
+        }
+    },
+    data () {
+        return {
+            tableData: [{ firstName: 'John', songs: 72 },{ firstName: 'Paul', songs: 70 }]
+        }
+    }
+}
+</script>
+```
+
+Note: `rows` slot scope data includes more information gathered by the Table Component (e.g. `columns`) and `rows.data` is where the original `data` information is located.
+
 ## Changelog
 
 Please see [CHANGELOG](CHANGELOG.md) for more information what has changed recently.

__tests__/components/table-component/TableComponent.test.js

@@ -90,10 +90,10 @@ describe('TableComponent', () => {
                 <table-component
                     :data="[{ firstName: 'John' },{ firstName: 'Paul' }]">
                     <table-column show="firstName" label="First name"></table-column>
-                    <template slot="tfoot">
+                    <template slot="tfoot" scope="{ rows }">
                         <tr>
                             <td>Name count:</td>
-                            <td>2</td>
+                            <td>{{ rows.length }}</td>
                         </tr>
                     </template>
                 </table-component>

docs/index.html

@@ -153,13 +153,13 @@ <h1 class="page-title">
                     </a>
                 </template>
             </table-column>
-            <template slot="tfoot">
+            <template slot="tfoot" scope="{ rows }">
                 <tr>
                     <th>&nbsp;</th>
                     <th>&nbsp;</th>
+                    <th>Total Songs:</th>
+                    <th>{{ rows.reduce((sum, value) => { return sum + value.data.songs; }, 0) }}</th>
                     <th>&nbsp;</th>
-                    <th>Total:</th>
-                    <th>166</th>
                     <th>&nbsp;</th>
                 </tr>
             </template>

src/components/TableComponent.vue

@@ -39,7 +39,7 @@
                 ></table-row>
                 </tbody>
                 <tfoot>
-                    <slot name="tfoot"></slot>
+                    <slot name="tfoot" :rows="rows"></slot>
                 </tfoot>
             </table>
         </div>