Fixed #226 - Move column filters to their own row

src/components/datatable/TableHeader.vue

@@ -1,6 +1,7 @@
 <template>
     <thead class="p-datatable-thead">
-        <tr v-if="!columnGroup">
+        <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)"
@@ -11,11 +12,20 @@
                         <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: {

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 {

src/views/datatable/DataTableDoc.vue

@@ -2323,7 +2323,7 @@ export default {
                     <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>
@@ -2388,9 +2388,6 @@ export default {
                 </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>
@@ -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 {