diff --git a/components/lib/datatable/ColumnFilter.vue b/components/lib/datatable/ColumnFilter.vue
index b5b6534c9..d2eb3bcc9 100644
--- a/components/lib/datatable/ColumnFilter.vue
+++ b/components/lib/datatable/ColumnFilter.vue
@@ -19,7 +19,7 @@
         >
             <component :is="filterIconTemplate || 'FilterIcon'" />
         </button>
-        <button v-if="showClearButton && display === 'row'" :class="{ 'p-hidden-space': !hasRowFilter() }" type="button" class="p-column-filter-clear-button p-link" @click="clearFilter()" v-bind="getColumnPTOptions('headerFilterClearButton')">
+        <button v-if="showClearButton && display === 'row'" :class="['p-column-filter-clear-button p-link', { 'p-hidden-space': !hasRowFilter() }]" type="button" @click="clearFilter()" v-bind="getColumnPTOptions('headerFilterClearButton')">
             <component :is="filterClearIconTemplate || 'FilterSlashIcon'" v-bind="getColumnPTOptions('filterClearIcon')" />
         </button>
         <Portal>