From 0c93bd352723dfe648d96b8a99b5d562e0cd8c8b Mon Sep 17 00:00:00 2001
From: Akshay Anand <aks9800@gmail.com>
Date: Tue, 5 Sep 2017 22:02:34 -0400
Subject: [PATCH] Formatted Row for dynamic table

---
 README.md                |  8 ++++++--
 src/components/Table.vue | 11 ++++++++++-
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index 6b62bee2..f193f34e 100644
--- a/README.md
+++ b/README.md
@@ -116,12 +116,16 @@ This should result in the screenshot seen above
   <template slot="table-row" scope="props">
     <td>{{ props.row.name }}</td>
     <td class="fancy">{{ props.row.age }}</td>
-    <td>{{ props.row.btn }}</td>
+    <td>{{ props.formattedRow.date }}</td>
     <td>{{ props.index }}</td>
   </template>
 </vue-good-table>
 ```
-In addition to `prop.row` that contains the row object, `prop.index` contains the index for the table display row. And `prop.row.originalIndex` contains the original row index. You can access the original row object by using `row[prop.row.originalIndex]`.
+**Note:** 
+* The original row object can be accessed via `prop.row`
+* The currently displayed table row index can be accessed via `prop.index` . 
+* The original row index can be accessed via `prop.row.originalIndex`. You can access the original row object by using `row[prop.row.originalIndex]`.
+* You can access the formatted row data (for example - formatted date) via `prop.formattedRow` 
 
 ### Component Options
 
diff --git a/src/components/Table.vue b/src/components/Table.vue
index ee2390bf..00acb931 100644
--- a/src/components/Table.vue
+++ b/src/components/Table.vue
@@ -52,7 +52,7 @@
         <tbody>
           <tr v-for="(row, index) in paginated" :class="onClick ? 'clickable' : ''" @click="click(row, index)">
             <th v-if="lineNumbers" class="line-numbers">{{ getCurrentIndex(index) }}</th>
-            <slot name="table-row" :row="row" :index="index">
+            <slot name="table-row" :row="row" :formattedRow="formattedRow(row)" :index="index">
               <td v-for="(column, i) in columns" :class="getDataStyle(i, 'td')" v-if="!column.hidden">
                 <span v-if="!column.html">{{ collectFormatted(row, column) }}</span>
                 <span v-if="column.html" v-html="collect(row, column.field)"></span>
@@ -237,6 +237,15 @@ import compareAsc from 'date-fns/compare_asc';
         }
       },
 
+      formattedRow(row) {
+        var formattedRow = {};
+        for(const col of this.columns) {
+          for(const key in row) {
+            formattedRow[key] = this.collectFormatted(row, col);
+          }
+        }
+        return formattedRow;
+      },
 
       // Get the necessary style-classes for the given column
       //--------------------------------------------------------