From 03cc6483ac75fc19c73a4c123564e3970b3cb68e Mon Sep 17 00:00:00 2001
From: Bryan Rankin <bryan@bryanrankin.com>
Date: Tue, 5 Sep 2017 21:38:49 -0400
Subject: [PATCH] Added dropdown filter option (#56)

Added dropdown filter option and updated README.md
---
 README.md                | 15 +++++++++++++++
 src/components/Table.vue | 16 +++++++++++++---
 2 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index 8d76b253..6b62bee2 100644
--- a/README.md
+++ b/README.md
@@ -356,9 +356,24 @@ data() {
     </tr>
     <tr>
       <td>filterable (optional)</td>
+      <td>enables filtering on column</td>
+      <td>Boolean</td>
+    </tr>
+    <tr>
+      <td>filterTextInput (optional)</td>
       <td>provides the column with a filter input</td>
       <td>Boolean</td>
     </tr>
+    <tr>
+      <td>filterDropdown (optional)</td>
+      <td>provides a dropdown for filtering</td>
+      <td>Boolean</td>
+    </tr>
+    <tr>
+      <td>filterOptions (required for filterDropdown)</td>
+      <td>provides options to dropdown filter <code>filterOptions: ['Blue', 'Red', 'Yellow']</code></td>
+      <td>Array</td>
+    </tr>
     <tr>
       <td>filter (optional)</td>
       <td>Custom filter, function of two variables: <code>function(data, filterString)</code>,
diff --git a/src/components/Table.vue b/src/components/Table.vue
index b99c0b12..ee2390bf 100644
--- a/src/components/Table.vue
+++ b/src/components/Table.vue
@@ -32,9 +32,19 @@
           <tr v-if="hasFilterRow">
             <th v-if="lineNumbers"></th>
             <th v-for="(column, index) in columns">
-              <input v-if="column.filterable" type="text" class="form-control" v-bind:placeholder="'Filter ' + column.label"
-              v-bind:value="columnFilters[column.field]"
-              v-on:input="updateFilters(column, $event.target.value)">
+               <div v-if="column.filterable">
+                  <input v-if="column.filterTextInput" 
+                        type="text" class="form-control" :placeholder="'Filter ' + column.label"
+                        :value="columnFilters[column.field]"
+                        v-on:input="updateFilters(column, $event.target.value)">
+                
+                <select v-if="column.filterDropdown" class="form-control"
+                        :value="columnFilters[column.field]"
+                        v-on:input="updateFilters(column, $event.target.value)">
+                          <option value=""></option>
+                          <option v-for="option in column.filterOptions" :value="option">{{ option }}</option>
+                </select>
+              </div>
             </th>
           </tr>
         </thead>