From aaab0cd654e01fb08a14d0e86411a9f42c536e33 Mon Sep 17 00:00:00 2001
From: Akshay Anand <aks9800@gmail.com>
Date: Sat, 18 Nov 2017 11:34:08 -0500
Subject: [PATCH 1/2] update readme to show placeholer option

---
 README.md                |  5 +++++
 src/components/Table.vue | 25 +++++++++++++++++++------
 2 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index 3ad3a496..40f6f5c7 100644
--- a/README.md
+++ b/README.md
@@ -481,6 +481,11 @@ myStyleFn(row){
       <td>enables filtering on column (By default, creates a text input)</td>
       <td>Boolean</td>
     </tr>
+    <tr>
+      <td>placeholder</td>
+      <td>placeholder to use for filter input</td>
+      <td>String</td>
+    </tr>
     <tr>
       <td>filterDropdown</td>
       <td>provides a dropdown for filtering instead of a text input</td>
diff --git a/src/components/Table.vue b/src/components/Table.vue
index 98274339..2cfe43b0 100644
--- a/src/components/Table.vue
+++ b/src/components/Table.vue
@@ -21,6 +21,7 @@
           <tr>
             <th v-if="lineNumbers" class="line-numbers"></th>
             <th v-for="(column, index) in columns"
+              :key="column.field"
               @click="sort(index)"
               :class="columnHeaderClass(column, index)"
               :style="{width: column.width ? column.width : 'auto'}"
@@ -33,7 +34,9 @@
           </tr>
           <tr v-if="hasFilterRow">
             <th v-if="lineNumbers"></th>
-            <th v-for="(column, index) in columns" v-if="!column.hidden">
+            <th v-for="(column, index) in columns"
+              :key="column.field"
+              v-if="!column.hidden">
               <div v-if="column.filterable" :class="columnHeaderClass(column, index)">
                 <input v-if="!column.filterDropdown"
                   type="text"
@@ -50,6 +53,7 @@
                     <option value="">{{ getPlaceholder(column) }}</option>
                     <option
                       v-for="option in column.filterOptions"
+                      :key="option"
                       :value="option">
                       {{ option }}
                     </option>
@@ -61,21 +65,30 @@
                   :value="columnFilters[column.field]"
                   v-on:input="updateFilters(column, $event.target.value)">
                   <option value="">{{ getPlaceholder(column) }}</option>
-                  <option v-for="option in column.filterOptions"
-                  :value="option.value">{{ option.text }}</option>
+                  <option 
+                    v-for="option in column.filterOptions"
+                    :key="option"
+                    :value="option.value">{{ option.text }}</option>
                 </select>
-
               </div>
             </th>
           </tr>
         </thead>
 
         <tbody>
-          <tr v-for="(row, index) in paginated" :class="getRowStyleClass(row)" @click="click(row, index)">
+          <tr 
+            v-for="(row, index) in paginated"
+            :key="index"
+            :class="getRowStyleClass(row)" 
+            @click="click(row, index)">
             <th v-if="lineNumbers" class="line-numbers">{{ getCurrentIndex(index) }}</th>
             <slot name="table-row-before" :row="row" :index="index"></slot>
             <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 && column.field">
+              <td 
+                v-for="(column, i) in columns"
+                :key="column.field" 
+                :class="getDataStyle(i, 'td')"
+                v-if="!column.hidden && column.field">
                 <span v-if="!column.html">{{ collectFormatted(row, column) }}</span>
                 <span v-if="column.html" v-html="collect(row, column.field)"></span>
               </td>

From 0c6c244de26ea1db5b9e9688245a1fd583d62940 Mon Sep 17 00:00:00 2001
From: Akshay Anand <aks9800@gmail.com>
Date: Sat, 18 Nov 2017 12:04:55 -0500
Subject: [PATCH 2/2] fix custom perPage for pagination

---
 dev/App.vue                   | 18 +++++++++++++++++-
 src/components/Pagination.vue |  5 +++--
 2 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/dev/App.vue b/dev/App.vue
index d39597e1..b033ca35 100644
--- a/dev/App.vue
+++ b/dev/App.vue
@@ -1,6 +1,10 @@
 <template>
   <div>
-    <vue-good-table :columns="columns" :rows="rows" :line-numbers="true">
+    <vue-good-table
+      :paginate="true"
+      :columns="columns" 
+      :rows="rows" 
+      :line-numbers="true">
       <template slot="table-row-before" scope="props">
         <td><input type="checkbox" /></td>
       </template>
@@ -68,6 +72,18 @@
           }, {
             name: "Dan",
             age: "40"
+          }, {
+            name: "Jane",
+            age: "24"
+          }, {
+            name: "Susan",
+            age: "16"
+          }, {
+            name: "Chris",
+            age: "55"
+          }, {
+            name: "Dan",
+            age: "40"
           }, 
         ],
       };
diff --git a/src/components/Pagination.vue b/src/components/Pagination.vue
index e74a15d9..6f774d7e 100644
--- a/src/components/Pagination.vue
+++ b/src/components/Pagination.vue
@@ -3,8 +3,9 @@
     <div class="datatable-length pull-left">
       <label>
         <span>{{rowsPerPageText}}</span>
-        <span v-if="perPage" class="perpage-count">{{perPage}}</span>
-        <select v-if="!perPage" class="browser-default" @change="perPageChanged">
+        <!-- <span v-if="perPage" class="perpage-count">{{perPage}}</span> -->
+        <select class="browser-default" @change="perPageChanged">
+          <option v-if="perPage" :value="perPage">{{perPage}}</option>
           <option value="10">10</option>
           <option value="20">20</option>
           <option value="30">30</option>