Added dropdown filter option (#56)

Added dropdown filter option and updated README.md
xaksis · Sep 6, 2017 · 03cc648 · 03cc648
1 parent e9f1fe2
commit 03cc648
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 3 deletions.
diff --git 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
@@ -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>