Add column filters component

dev/App.vue

@@ -72,6 +72,7 @@ export default {
             // filterDropdownItems: ['Chris', 'Dan', 'Susan'],
             // filterValue: 'Chris',
           },
+          hidden: false,
         },
         {
           label: 'Age',
@@ -93,6 +94,7 @@ export default {
             //   },
             // ],
           },
+          hidden: false,
         },
         {
           filterOptions: {
@@ -104,16 +106,19 @@ export default {
           type: 'date',
           dateInputFormat: 'yyyy-MM-dd',
           dateOutputFormat: 'PPPP',
+          hidden: false,
         },
         {
           label: 'Percent',
           field: 'score',
           type: 'percentage',
+          hidden: false,
         },
         {
           label: 'func',
           field: this.funcValue,
           type: 'number',
+          hidden: false,
         },
         {
           label: 'Valid',
@@ -126,6 +131,7 @@ export default {
               false,
             ],
           },
+          hidden: false,
         },
         {
           label: 'Exact',
@@ -137,6 +143,7 @@ export default {
               'rematch',
             ],
           },
+          hidden: false,
         }
       ],
       rows: [

dev/grouped-table.vue

@@ -3,6 +3,7 @@
   <button @click="expandAll">Expand All</button>
   <button @click="collapseAll">Collapse All</button>
   <vue-good-table
+    id="vgt-root"
     :columns="columns"
     :rows="rows"
     :line-numbers="true"
@@ -28,6 +29,9 @@
     }"
     styleClass="vgt-table condensed bordered"
     ref="groupedTable"
+    :column-filter-options="{
+      enabled: true
+    }"
   >
     <!-- <template slot="table-header-row" slot-scope="props">
       <span v-if="props.row.mode === 'span'">
@@ -54,6 +58,7 @@ export default {
           filterOptions: {
             enabled: true,
           },
+          hidden: false,
         },
         {
           label: 'Diet',
@@ -66,6 +71,7 @@ export default {
           field: 'count',
           headerField: this.sumCount,
           type: 'number',
+          hidden: false,
         },
       ],
       rows: [
@@ -140,7 +146,36 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.row-style{
-    background-color: red;
+.row-style {
+  background-color: red;
+}
+
+#vgt-root >>> {
+  .vgt-dropdown {
+    float: right;
+    margin-bottom: 5px;
+  }
+
+  ul.vgt-dropdown-menu {
+    position: absolute;
+    float: left;
+    min-width: 160px;
+    padding: 5px 0;
+    margin: 2px 0 0;
+    font-size: 14px;
+    text-align: left;
+    list-style: none;
+    background-clip: padding-box;
+    border-radius: 4px;
+
+    li > span {
+      display: block;
+      padding: 3px 20px;
+      clear: both;
+      font-weight: 400;
+      line-height: 1.42857143;
+      white-space: nowrap;
+    }
   }
+}
 </style>

src/components/Table.vue

@@ -37,18 +37,21 @@
           :info-fn="paginationInfoFn"
         ></vgt-pagination>
       </slot>
-      <vgt-global-search
-        @on-keyup="searchTableOnKeyUp"
-        @on-enter="searchTableOnEnter"
-        v-model="globalSearchTerm"
-        :search-enabled="searchEnabled && externalSearchQuery == null"
-        :global-search-placeholder="searchPlaceholder"
-      >
-        <template slot="internal-table-actions">
-          <slot name="table-actions">
+        <div slot="table-actions">
+          <slot name="table-actions-header"></slot>
+          <slot name="table-actions-global-search">
+            <vgt-global-search
+              @on-keyup="searchTableOnKeyUp"
+              @on-enter="searchTableOnEnter"
+              v-model="globalSearchTerm"
+              :search-enabled="searchEnabled && externalSearchQuery == null"
+              :global-search-placeholder="searchPlaceholder"
+            />
+          </slot>
+          <slot name="table-actions-dropdown">
+            <vgt-column-dropdown v-if="columnFilterEnabled" :columns="columns" @input="toggleFilteredColumn"/>
           </slot>
-        </template>
-      </vgt-global-search>
+        </div>
       <div
         v-if="selectedRowCount && !disableSelectInfo"
         class="vgt-selection-info-row clearfix"
@@ -346,6 +349,7 @@ import VgtPagination from './pagination/VgtPagination.vue';
 import VgtGlobalSearch from './VgtGlobalSearch.vue';
 import VgtTableHeader from './VgtTableHeader.vue';
 import VgtHeaderRow from './VgtHeaderRow.vue';
+import VgtColumnDropdown from './VgtColumnDropdown.vue';
 
 // here we load each data type module.
 import * as CoreDataTypes from './types/index';
@@ -436,6 +440,14 @@ export default {
         };
       },
     },
+
+    columnFilterOptions: {
+      default() {
+        return {
+          enabled: false,
+        };
+      },
+    },
   },
 
   data: () => ({
@@ -494,6 +506,9 @@ export default {
     forceSearch: false,
     sortChanged: false,
     dataTypes: dataTypes || {},
+
+    // internal column filter options
+    columnFilterEnabled: false,
   }),
 
   watch: {
@@ -556,6 +571,14 @@ export default {
         });
       }
     },
+
+    columnFilterOptions: {
+      handler() {
+        this.initializeColumnFilter();
+      },
+      deep: true,
+      immediate: true,
+    },
   },
 
   computed: {
@@ -1439,6 +1462,10 @@ export default {
       return originalRows;
     },
 
+    toggleFilteredColumn(value) {
+      this.columns.find(column => column.label === value.label).hidden = !value.checked;
+    },
+
     initializePagination() {
       const {
         enabled,
@@ -1631,6 +1658,14 @@ export default {
         this.clearSelectionText = clearSelectionText;
       }
     },
+
+    initializeColumnFilter() {
+      const { enabled } = this.columnFilterOptions;
+
+      if (typeof enabled === 'boolean') {
+        this.columnFilterEnabled = enabled;
+      }
+    },
   },
 
   mounted() {
@@ -1645,6 +1680,7 @@ export default {
     'vgt-global-search': VgtGlobalSearch,
     'vgt-header-row': VgtHeaderRow,
     'vgt-table-header': VgtTableHeader,
+    'vgt-column-dropdown': VgtColumnDropdown,
   },
 };
 </script>

src/components/VgtColumnDropdown.vue

@@ -0,0 +1,49 @@
+<template>
+<div class="vgt-dropdown vgt-clearfix">
+  <!-- Drowdown with checkboxes for showing / hiding table headers -->
+  <div class="button-group pull-right">
+    <button type="button" class="btn btn-default btn-sm dropdown-toggle" @click="selectOpen = !selectOpen"><span class="fa fa-cog" aria-hidden="false">Select Columns</span> <span class="caret" /></button>
+    <ul v-show="selectOpen" class="vgt-dropdown-menu">
+      <li v-for="(column, index) in filteredColumns" :key="index">
+        <span class="small" tabIndex="-1">
+          <input :ref="`filterlabel${column.label}`" :checked="!column.hidden" @change.prevent="updateFilteredColumn(column.label, $event.target.checked)" type="checkbox">
+          {{column.label}}
+        </span>
+      </li>
+    </ul>
+  </div>
+</div>
+</template>
+
+<script>
+export default {
+  name: 'vgtColumnDropdown',
+  props: [
+    'columns',
+  ],
+  data() {
+    return {
+      filteredColumns: [],
+      selectOpen: false
+    }
+  },
+  methods: {
+    updateFilteredColumn(columnLabel, checked) {
+      this.$emit('input', { label: columnLabel, checked });
+    }
+  },
+  watch: {
+    columns: {
+      handler() {
+        const { columns } = this;
+        this.filteredColumns = columns.filter(column => column.hidden !== undefined);
+      },
+      deep: true,
+      immediate: true,
+    },
+  }
+};
+</script>
+
+<style>
+</style>