Merge branch 'master' of https://github.com/xaksis/vue-good-table

xaksis · Jan 17, 2021 · 318a253 · 318a253
2 parents f14303c + 811d5f0
commit 318a253
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 3 deletions.
diff --git a/dev/App.vue b/dev/App.vue
@@ -81,6 +81,7 @@ export default {
           filterOptions: {
             enabled: true,
             filterDropdownItems: ['24', '16', '30'],
+            styleClass: 'class1'
             // filterDropdownItems: [
             //   {
             //     value: 24,

diff --git a/src/components/Table.vue b/src/components/Table.vue
@@ -105,6 +105,16 @@
                 <span>{{props.column.label}}</span>
               </slot>
             </template>
+            <template
+                slot="column-filter"
+                slot-scope="props"
+            >
+              <slot
+                  name="column-filter"
+                  :column="props.column"
+                  :updateFilters="props.updateFilters"
+              ></slot>
+            </template>
           </thead>
         </table>
       </div>

diff --git a/src/components/VgtFilterRow.vue b/src/components/VgtFilterRow.vue
@@ -2,9 +2,11 @@
 <tr v-if="hasFilterRow">
   <th v-if="lineNumbers"></th>
   <th v-if="selectable"></th>
-  <th class="filter-th"
+  <th
     v-for="(column, index) in columns" :key="index"
-    v-if="!column.hidden">
+    v-if="!column.hidden"
+    :class="getClasses(column)"
+    >
 
     <slot
         name="column-filter"
@@ -131,6 +133,11 @@ export default {
         && typeof column.filterOptions.filterDropdownItems[0] !== 'object';
     },
 
+    getClasses(column) {
+      const firstClass = 'filter-th';
+      return (column.filterOptions && column.filterOptions.styleClass) ? [firstClass, ...column.filterOptions.styleClass.split(' ')].join(' ') : firstClass;
+    },
+
     // get column's defined placeholder or default one
     getPlaceholder(column) {
       const placeholder = (this.isFilterable(column) && column.filterOptions.placeholder) || `Filter ${column.label}`;

diff --git a/vp-docs/guide/configuration/column-filter-options.md b/vp-docs/guide/configuration/column-filter-options.md
@@ -12,6 +12,7 @@ columns: [
     label: 'name',
     field: 'user_name',
     filterOptions: {
+	  styleClass: 'class1', // class to be added to the parent th element
   	  enabled: true, // enable filter for this column
       placeholder: 'Filter This Thing', // placeholder for filter input
       filterValue: 'Jane', // initial populated value for this filter
@@ -24,6 +25,11 @@ columns: [
 ]
 ```
 
+## styleClass
+
+type: `string`
+Class to be added to the parent th element. You can specify several classes separated by a space.
+
 ## enabled
 
 type: `Boolean`
@@ -73,4 +79,4 @@ filterFn: function(data, filterString) {
   return data >= x - 5 && data <= x + 5;
 }
 // would create a filter matching numbers within 5 of the provided value
-```
+```