From cd9877aebe7c5b3cce7a2d5c80f0438b25812084 Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Thu, 5 Mar 2020 11:59:07 +0300
Subject: [PATCH] Fixed #226 - Move column filters to their own row

---
 src/components/datatable/TableHeader.vue | 56 +++++++++++++++++-------
 src/views/datatable/DataTableDemo.vue    | 10 ++---
 src/views/datatable/DataTableDoc.vue     | 10 ++---
 3 files changed, 50 insertions(+), 26 deletions(-)

diff --git a/src/components/datatable/TableHeader.vue b/src/components/datatable/TableHeader.vue
index 232fb77a3..14c03aeda 100644
--- a/src/components/datatable/TableHeader.vue
+++ b/src/components/datatable/TableHeader.vue
@@ -1,21 +1,31 @@
 <template>
     <thead class="p-datatable-thead">
-        <tr v-if="!columnGroup">
-            <template v-for="(col,i) of columns">
-                <th v-if="rowGroupMode !== 'subheader' || (groupRowsBy !== col.field)" :tabindex="col.sortable ? '0' : null" @keydown="onColumnKeyDown($event, col)"
-                    :key="col.columnKey||col.field||i" :style="col.headerStyle" :class="getColumnHeaderClass(col)"
-                    @click="onColumnHeaderClick($event, col)" @mousedown="onColumnHeaderMouseDown($event, col)"
-                    @dragstart="onColumnHeaderDragStart($event)" @dragover="onColumnHeaderDragOver($event)" @dragleave="onColumnHeaderDragLeave($event)" @drop="onColumnHeaderDrop($event)"
-                    :colspan="col.colspan" :rowspan="col.rowspan" :aria-sort="getAriaSort(col)">
-                    <span class="p-column-resizer p-clickable" @mousedown="onColumnResizeStart($event)" v-if="resizableColumns"></span>
-                    <DTColumnSlot :column="col" type="header" v-if="col.$scopedSlots.header" />
-                    <span class="p-column-title" v-if="col.header">{{col.header}}</span>
-                    <span v-if="col.sortable" :class="getSortableColumnIcon(col)"></span>
-                    <DTColumnSlot :column="col" type="filter" v-if="col.$scopedSlots.filter" />
-                    <DTHeaderCheckbox :checked="allRowsSelected" @change="onHeaderCheckboxChange($event)" :disabled="empty" v-if="col.selectionMode ==='multiple'" />
-                </th>
-            </template>
-        </tr>
+        <template v-if="!columnGroup">
+            <tr>
+                <template v-for="(col,i) of columns">
+                    <th v-if="rowGroupMode !== 'subheader' || (groupRowsBy !== col.field)" :tabindex="col.sortable ? '0' : null" @keydown="onColumnKeyDown($event, col)"
+                        :key="col.columnKey||col.field||i" :style="col.headerStyle" :class="getColumnHeaderClass(col)"
+                        @click="onColumnHeaderClick($event, col)" @mousedown="onColumnHeaderMouseDown($event, col)"
+                        @dragstart="onColumnHeaderDragStart($event)" @dragover="onColumnHeaderDragOver($event)" @dragleave="onColumnHeaderDragLeave($event)" @drop="onColumnHeaderDrop($event)"
+                        :colspan="col.colspan" :rowspan="col.rowspan" :aria-sort="getAriaSort(col)">
+                        <span class="p-column-resizer p-clickable" @mousedown="onColumnResizeStart($event)" v-if="resizableColumns"></span>
+                        <DTColumnSlot :column="col" type="header" v-if="col.$scopedSlots.header" />
+                        <span class="p-column-title" v-if="col.header">{{col.header}}</span>
+                        <span v-if="col.sortable" :class="getSortableColumnIcon(col)"></span>
+                        <DTHeaderCheckbox :checked="allRowsSelected" @change="onHeaderCheckboxChange($event)" :disabled="empty" v-if="col.selectionMode ==='multiple' && !hasColumnFilter()" />
+                    </th>
+                </template>
+            </tr>
+            <tr v-if="hasColumnFilter()">
+                <template v-for="(col,i) of columns">
+                    <th v-if="rowGroupMode !== 'subheader' || (groupRowsBy !== col.field)" :key="col.columnKey||col.field||i" 
+                        :class="getFilterColumnClass(col)" :style="col.filterStyle">
+                        <DTColumnSlot :column="col" type="filter" v-if="col.$scopedSlots.filter" />
+                        <DTHeaderCheckbox :checked="allRowsSelected" @change="onHeaderCheckboxChange($event)" :disabled="empty" v-if="col.selectionMode ==='multiple'" />
+                    </th>
+                </template>
+            </tr>
+        </template>
         <template v-else>
             <tr v-for="(row,i) of columnGroup.rows" :key="i">
                 <th v-for="(col,i) of row.columns" :key="col.columnKey||col.field||i" :style="col.headerStyle" :class="getColumnHeaderClass(col)" :tabindex="col.sortable ? '0' : null"
@@ -94,6 +104,9 @@ export default {
                     {'p-highlight': sorted}
             ];
         },
+        getFilterColumnClass(column) {
+            return ['p-filter-column', column.filterClass];
+        },
         getSortableColumnIcon(column) {
             let sorted = false;
             let sortOrder = null;
@@ -173,6 +186,17 @@ export default {
             else {
                 return null;
             }
+        },
+        hasColumnFilter() {
+            if (this.columns) {
+                for (let col of this.columns) {
+                    if (col.$scopedSlots.filter) {
+                        return true;
+                    }
+                }
+            }
+
+            return false;
         }
     },
     components: {
diff --git a/src/views/datatable/DataTableDemo.vue b/src/views/datatable/DataTableDemo.vue
index 52e80a161..c9b214e71 100644
--- a/src/views/datatable/DataTableDemo.vue
+++ b/src/views/datatable/DataTableDemo.vue
@@ -21,7 +21,7 @@
                                 <InputText v-model="filters['global']" placeholder="Global Search" />
                             </div>
                         </template>
-                        <Column selectionMode="multiple" headerStyle="width: 3em; padding-top: 2.75em"></Column>
+                        <Column selectionMode="multiple" headerStyle="width: 3em"></Column>
                         <Column field="name" header="Name" :sortable="true">
                             <template #body="slotProps">
                                 <span class="p-column-title">Name</span>
@@ -86,9 +86,6 @@
                             </template>
                         </Column>
                         <Column headerStyle="width: 8em; text-align: center" bodyStyle="text-align: center; overflow: visible">
-                            <template #header>
-                                <Button type="button" icon="pi pi-cog" class="p-button-secondary" style="margin-top: 1em"></Button>
-                            </template>
                             <template #body>
                                 <Button type="button" icon="pi pi-cog" class="p-button-secondary"></Button>
                             </template>
@@ -245,7 +242,6 @@ export default {
 }
 
 /deep/ .p-column-filter {
-    margin-top: 1em;
     display: block;
 
     input {
@@ -285,6 +281,10 @@ export default {
     .p-datatable-thead > tr > th {
         border: 0 none;
         text-align: left;
+
+        &.p-filter-column {
+            border-top: 1px solid #c8c8c8;
+        }
     }
 
     .p-datatable-tbody > tr > td {
diff --git a/src/views/datatable/DataTableDoc.vue b/src/views/datatable/DataTableDoc.vue
index 741cfcea7..5ab45a0b0 100644
--- a/src/views/datatable/DataTableDoc.vue
+++ b/src/views/datatable/DataTableDoc.vue
@@ -2323,7 +2323,7 @@ export default {
                     &lt;InputText v-model="filters['global']" placeholder="Global Search" /&gt;
                 &lt;/div&gt;
             &lt;/template&gt;
-            &lt;Column selectionMode="multiple" headerStyle="width: 3em; padding-top: 2.75em"&gt;&lt;/Column&gt;
+            &lt;Column selectionMode="multiple" headerStyle="width: 3em"&gt;&lt;/Column&gt;
             &lt;Column field="name" header="Name" :sortable="true"&gt;
                 &lt;template #body="slotProps"&gt;
                     &lt;span class="p-column-title"&gt;Name&lt;/span&gt;
@@ -2388,9 +2388,6 @@ export default {
                 &lt;/template&gt;
             &lt;/Column&gt;
             &lt;Column headerStyle="width: 8em; text-align: center" bodyStyle="text-align: center; overflow: visible"&gt;
-                &lt;template #header&gt;
-                    &lt;Button type="button" icon="pi pi-cog" class="p-button-secondary" style="margin-top: 1em"&gt;&lt;/Button&gt;
-                &lt;/template&gt;
                 &lt;template #body&gt;
                     &lt;Button type="button" icon="pi pi-cog" class="p-button-secondary"&gt;&lt;/Button&gt;
                 &lt;/template&gt;
@@ -2537,7 +2534,6 @@ export default {
 }
 
 /deep/ .p-column-filter {
-    margin-top: 1em;
     display: block;
 
     input {
@@ -2577,6 +2573,10 @@ export default {
     .p-datatable-thead > tr > th {
         border: 0 none;
         text-align: left;
+
+        &.p-filter-column {
+            border-top: 1px solid #c8c8c8;
+        }
     }
 
     .p-datatable-tbody > tr > td {