From cc11c9d46039e02c350940d363807174285e6f48 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Sat, 6 Feb 2021 15:21:39 +0300
Subject: [PATCH] UI cosmetics to filter demo and better alignment

---
 src/components/datatable/ColumnFilter.vue   |  6 ++++--
 src/components/datatable/DataTable.vue      |  8 +++++++-
 src/components/datatable/TableHeader.vue    | 22 +++++++++++----------
 src/views/datatable/DataTableFilterDemo.vue |  2 +-
 4 files changed, 24 insertions(+), 14 deletions(-)

diff --git a/src/components/datatable/ColumnFilter.vue b/src/components/datatable/ColumnFilter.vue
index 844e6141a..e17fcb999 100644
--- a/src/components/datatable/ColumnFilter.vue
+++ b/src/components/datatable/ColumnFilter.vue
@@ -1,6 +1,8 @@
 <template>
     <div :class="containerClass">
-        <component v-if="display === 'row'" :is="filterElement" :field="field" />
+        <div class="p-fluid p-column-filter-element" v-if="display === 'row'" >
+            <component :is="filterElement" :field="field" />
+        </div>
         <button ref="icon" v-if="showMenuButton" type="button" class="p-column-filter-menu-button p-link" aria-haspopup="true" :aria-expanded="overlayVisible"
             :class="{'p-column-filter-menu-button-open': overlayVisible, 'p-column-filter-menu-button-active': hasFilter()}" 
             @click="toggleMenu()" @keydown="onToggleButtonKeyDown($event)"><span class="pi pi-filter-icon pi-filter"></span></button>
@@ -370,7 +372,7 @@ export default {
     computed: {
         containerClass() {
             return [
-                'p-column-filter', {
+                'p-column-filter p-fluid', {
                     'p-column-filter-row': this.display === 'row', 
                     'p-column-filter-menu': this.display === 'menu'
                 }
diff --git a/src/components/datatable/DataTable.vue b/src/components/datatable/DataTable.vue
index 94bfa04dc..a1097d4c5 100755
--- a/src/components/datatable/DataTable.vue
+++ b/src/components/datatable/DataTable.vue
@@ -2033,6 +2033,11 @@ export default {
     border: 1px solid transparent;
 }
 
+.p-column-header-content {
+    display: flex;
+    align-items: center;
+}
+
 .p-datatable .p-column-resizer-helper {
     width: 1px;
     position: absolute;
@@ -2084,9 +2089,10 @@ export default {
 
 .p-column-filter-menu {
     display: inline-flex;
+    margin-left: auto;
 }
 
-.p-column-filter-row p-columnfilterformelement {
+.p-column-filter-row .p-column-filter-element {
     flex: 1 1 auto;
     width: 1%;
 }
diff --git a/src/components/datatable/TableHeader.vue b/src/components/datatable/TableHeader.vue
index 803bc6fa2..20093e6b7 100755
--- a/src/components/datatable/TableHeader.vue
+++ b/src/components/datatable/TableHeader.vue
@@ -9,16 +9,18 @@
                         @dragstart="onColumnHeaderDragStart($event)" @dragover="onColumnHeaderDragOver($event)" @dragleave="onColumnHeaderDragLeave($event)" @drop="onColumnHeaderDrop($event)"
                         :colspan="columnProp(col, 'colspan')" :rowspan="columnProp(col, 'rowspan')" :aria-sort="getAriaSort(col)">
                         <span class="p-column-resizer" @mousedown="onColumnResizeStart($event)" v-if="resizableColumns"></span>
-                        <component :is="col.children.header" :column="col" v-if="col.children && col.children.header"/>
-                        <span class="p-column-title" v-if="columnProp(col, 'header')">{{columnProp(col, 'header')}}</span>
-                        <span v-if="columnProp(col, 'sortable')" :class="getSortableColumnIcon(col)"></span>
-                        <span v-if="isMultiSorted(col)" class="p-sortable-column-badge">{{getMultiSortMetaIndex(col) + 1}}</span>
-                        <DTHeaderCheckbox :checked="allRowsSelected" @change="onHeaderCheckboxChange($event)" :disabled="empty" v-if="columnProp(col, 'selectionMode') ==='multiple' && filterDisplay !== 'row'" />
-                        <DTColumnFilter v-if="filterDisplay === 'menu' && filters && filters[columnProp(col, 'filterField')||columnProp(col, 'field')]" :field="columnProp(col, 'filterField')||columnProp(col, 'field')" :type="columnProp(col, 'dataType')" display="menu"  
-                        :showMenu="columnProp(col, 'showFilterMenu')" :filterElement="col.children && col.children.filter" :filterHeader="col.children && col.children.filterHeader" :filterFooter="col.children && col.children.filterFooter" 
-                        :filters="filters" @filtermeta-change="$emit('filtermeta-change', $event)"
-                        :showOperator="columnProp(col, 'showFilterOperator')" :showClearButton="columnProp(col, 'showClearButton')" :showApplyButton="columnProp(col, 'showApplyButton')"
-                        :showMatchModes="columnProp(col, 'showFilterMatchModes')" :showAddButton="columnProp(col, 'showAddButton')" :matchModeOptions="columnProp(col, 'filterMatchModeOptions')" :maxConstraints="columnProp(col, 'maxConstraints')" />
+                        <div class="p-column-header-content">
+                            <component :is="col.children.header" :column="col" v-if="col.children && col.children.header"/>
+                            <span class="p-column-title" v-if="columnProp(col, 'header')">{{columnProp(col, 'header')}}</span>
+                            <span v-if="columnProp(col, 'sortable')" :class="getSortableColumnIcon(col)"></span>
+                            <span v-if="isMultiSorted(col)" class="p-sortable-column-badge">{{getMultiSortMetaIndex(col) + 1}}</span>
+                            <DTHeaderCheckbox :checked="allRowsSelected" @change="onHeaderCheckboxChange($event)" :disabled="empty" v-if="columnProp(col, 'selectionMode') ==='multiple' && filterDisplay !== 'row'" />
+                            <DTColumnFilter v-if="filterDisplay === 'menu' && filters && filters[columnProp(col, 'filterField')||columnProp(col, 'field')]" :field="columnProp(col, 'filterField')||columnProp(col, 'field')" :type="columnProp(col, 'dataType')" display="menu"  
+                            :showMenu="columnProp(col, 'showFilterMenu')" :filterElement="col.children && col.children.filter" :filterHeader="col.children && col.children.filterHeader" :filterFooter="col.children && col.children.filterFooter" 
+                            :filters="filters" @filtermeta-change="$emit('filtermeta-change', $event)"
+                            :showOperator="columnProp(col, 'showFilterOperator')" :showClearButton="columnProp(col, 'showClearButton')" :showApplyButton="columnProp(col, 'showApplyButton')"
+                            :showMatchModes="columnProp(col, 'showFilterMatchModes')" :showAddButton="columnProp(col, 'showAddButton')" :matchModeOptions="columnProp(col, 'filterMatchModeOptions')" :maxConstraints="columnProp(col, 'maxConstraints')" />
+                        </div>
                     </th>
                 </template>
             </tr>
diff --git a/src/views/datatable/DataTableFilterDemo.vue b/src/views/datatable/DataTableFilterDemo.vue
index 6958bd4a2..bec1e8ae3 100755
--- a/src/views/datatable/DataTableFilterDemo.vue
+++ b/src/views/datatable/DataTableFilterDemo.vue
@@ -108,7 +108,7 @@
                             </div>
                         </template>
                     </Column>
-                    <Column field="verified" header="Verified" dataType="boolean" headerStyle="width: 8rem" :showFilterMatchModes="false" :showFilterOperator="false" :showAddButton="false">
+                    <Column field="verified" header="Verified" dataType="boolean" headerStyle="width: 8rem" bodyClass="p-text-center" :showFilterMatchModes="false" :showFilterOperator="false" :showAddButton="false">
                         <template #body="slotProps">
                             <span class="p-column-title">Verified</span>
                             <i class="pi" :class="{'true-icon pi-check-circle': slotProps.data.verified, 'false-icon pi-times-circle': !slotProps.data.verified}"></i>