diff --git a/api-generator/components/datatable.js b/api-generator/components/datatable.js
index a2e48a9e2..c99764940 100644
--- a/api-generator/components/datatable.js
+++ b/api-generator/components/datatable.js
@@ -137,6 +137,12 @@ const DataTableProps = [
         default: 'null',
         description: 'Layout of the filter elements, valid values are "row" and "menu".'
     },
+    {
+        name: 'filterOnOutsideClick',
+        type: 'boolean',
+        default: 'false',
+        description: 'Whether to trigger filter apply when outside of the element is clicked.'
+    },
     {
         name: 'filterLocale',
         type: 'string',
diff --git a/components/datatable/ColumnFilter.vue b/components/datatable/ColumnFilter.vue
index 15124059a..4d3576e06 100644
--- a/components/datatable/ColumnFilter.vue
+++ b/components/datatable/ColumnFilter.vue
@@ -182,6 +182,10 @@ export default {
             type: Object,
             default: null
         },
+        filterOnOutsideClick: {
+            type: Boolean,
+            default: false
+        },
         filterMenuClass: {
             type: String,
             default: null
@@ -453,6 +457,7 @@ export default {
             if (!this.outsideClickListener) {
                 this.outsideClickListener = (event) => {
                     if (this.overlayVisible && !this.selfClick && this.isOutsideClicked(event.target)) {
+                        this.filterOnOutsideClick && this.applyFilter();
                         this.overlayVisible = false;
                     }
 
diff --git a/components/datatable/DataTable.d.ts b/components/datatable/DataTable.d.ts
index 30ddc03b7..502da6255 100755
--- a/components/datatable/DataTable.d.ts
+++ b/components/datatable/DataTable.d.ts
@@ -587,6 +587,11 @@ export interface DataTableProps {
      * Fields for global filter
      */
     globalFilterFields?: string[] | undefined;
+    /**
+     * Whether to trigger filter apply when outside of the element is clicked.
+     * Default value is false.
+     */
+    filterOnOutsideClick?: boolean | undefined;
     /**
      * Locale to use in filtering. The default locale is the host environment's current locale.
      */
diff --git a/components/datatable/DataTable.vue b/components/datatable/DataTable.vue
index bf34932d9..b37321321 100755
--- a/components/datatable/DataTable.vue
+++ b/components/datatable/DataTable.vue
@@ -49,6 +49,7 @@
                             :filters="d_filters"
                             :filtersStore="filters"
                             :filterDisplay="filterDisplay"
+                            :filterOnOutsideClick="filterOnOutsideClick"
                             :filterInputProps="filterInputProps"
                             @column-click="onColumnHeaderClick($event)"
                             @column-mousedown="onColumnHeaderMouseDown($event)"
@@ -505,6 +506,10 @@ export default {
             type: Boolean,
             default: false
         },
+        filterOnOutsideClick: {
+            type: Boolean,
+            default: false
+        },
         tableStyle: {
             type: null,
             default: null
diff --git a/components/datatable/HeaderCell.vue b/components/datatable/HeaderCell.vue
index 673026188..4e72cacaa 100644
--- a/components/datatable/HeaderCell.vue
+++ b/components/datatable/HeaderCell.vue
@@ -36,6 +36,7 @@
                 :filters="filters"
                 :filtersStore="filtersStore"
                 :filterInputProps="filterInputProps"
+                :filterOnOutsideClick="filterOnOutsideClick"
                 @filter-change="$emit('filter-change', $event)"
                 @filter-apply="$emit('filter-apply')"
                 :filterMenuStyle="columnProp('filterMenuStyle')"
@@ -143,6 +144,10 @@ export default {
             type: Boolean,
             default: false
         },
+        filterOnOutsideClick: {
+            type: Boolean,
+            default: false
+        },
         filterInputProps: {
             type: null,
             default: null
diff --git a/components/datatable/TableHeader.vue b/components/datatable/TableHeader.vue
index 53261751e..b61d49be9 100755
--- a/components/datatable/TableHeader.vue
+++ b/components/datatable/TableHeader.vue
@@ -27,6 +27,7 @@
                         :filters="filters"
                         :filterDisplay="filterDisplay"
                         :filtersStore="filtersStore"
+                        :filterOnOutsideClick="filterOnOutsideClick"
                         :filterInputProps="filterInputProps"
                         @filter-change="$emit('filter-change', $event)"
                         @filter-apply="$emit('filter-apply')"
@@ -202,6 +203,10 @@ export default {
             type: Boolean,
             default: false
         },
+        filterOnOutsideClick: {
+            type: Boolean,
+            default: false
+        },
         filterInputProps: {
             type: null,
             default: null
diff --git a/pages/datatable/DataTableDoc.vue b/pages/datatable/DataTableDoc.vue
index d2d572da1..f1aaa7f69 100755
--- a/pages/datatable/DataTableDoc.vue
+++ b/pages/datatable/DataTableDoc.vue
@@ -2038,6 +2038,12 @@ export default {
                             <td>null</td>
                             <td>Layout of the filter elements, valid values are "row" and "menu".</td>
                         </tr>
+                        <tr>
+                            <td>filterOnOutsideClick</td>
+                            <td>boolean</td>
+                            <td>false</td>
+                            <td>Whether to trigger filter apply when outside of the element is clicked.</td>
+                        </tr>
                         <tr>
                             <td>filterLocale</td>
                             <td>string</td>