diff --git a/resources/js/components/shared/FilterTable.vue b/resources/js/components/shared/FilterTable.vue
index 9b620933e2..92fed23042 100644
--- a/resources/js/components/shared/FilterTable.vue
+++ b/resources/js/components/shared/FilterTable.vue
@@ -63,20 +63,20 @@
               v-for="(header, index) in headers"
               :key="index"
             >
-              <template v-if="containsHTML(getNestedPropertyValue(row, header.field))">
+              <template v-if="containsHTML(getNestedPropertyValue(row, header))">
                 <div
                   :id="`${tableName}-element-${rowIndex}-${index}`"
                   :class="{ 'pm-table-truncate': header.truncate }"
                   :style="{ maxWidth: header.width + 'px' }"
                 >
-                  <div v-html="sanitize(getNestedPropertyValue(row, header.field))"></div>
+                  <div v-html="sanitize(getNestedPropertyValue(row, header))"></div>
                 </div>
                 <b-tooltip
                   v-if="header.truncate"
                   :target="`${tableName}-element-${rowIndex}-${index}`"
                   custom-class="pm-table-tooltip"
                 >
-                  {{ sanitizeTooltip(getNestedPropertyValue(row, header.field)) }}
+                  {{ sanitizeTooltip(getNestedPropertyValue(row, header)) }}
                 </b-tooltip>
               </template>
               <template v-else>
@@ -92,13 +92,13 @@
                     :class="{ 'pm-table-truncate': header.truncate }"
                     :style="{ maxWidth: header.width + 'px' }"
                   >
-                    {{ getNestedPropertyValue(row, header.field) }}
+                    {{ getNestedPropertyValue(row, header) }}
                     <b-tooltip
                       v-if="header.truncate"
                       :target="`${tableName}-element-${rowIndex}-${index}`"
                       custom-class="pm-table-tooltip"
                     >
-                      {{ getNestedPropertyValue(row, header.field) }}
+                      {{ getNestedPropertyValue(row, header) }}
                     </b-tooltip>
                   </div>
                 </template>
@@ -157,21 +157,6 @@ export default {
       resizingColumnIndex: -1,
     };
   },
-  watch: {
-    data() {
-      this.headers.forEach((column) => {
-        if (column.format) {
-          if (column.format === "datetime" || column.format === "date") {
-            if (this.data?.data?.forEach) {
-              this.data.data.forEach((element) => {
-                element[column.field] = this.formatDate(element[column.field], column.format);
-              });
-            }
-          }
-        }
-      });
-    },
-  },
   mounted() {
     this.$nextTick(() => {
       this.calculateColumnWidth();
@@ -223,25 +208,6 @@ export default {
         this.resizingColumnIndex = -1;
       }
     },
-    formatDate(value, format) {
-      let config = "";
-      if (typeof ProcessMaker !== "undefined" && ProcessMaker.user && ProcessMaker.user.datetime_format) {
-        if (format === "datetime") {
-          config = ProcessMaker.user.datetime_format;
-        }
-        if (format === "date") {
-          config = ProcessMaker.user.datetime_format.replace(/[\sHh:msaAzZ]/g, "");
-        }
-      }
-      if (value) {
-        if (moment(value).isValid()) {
-          return window.moment(value)
-            .format(config);
-        }
-        return value;
-      }
-      return "-";
-    },
     handleRowClick(row) {
       this.$emit("table-row-click", row);
     },
diff --git a/resources/js/components/shared/FilterTableBodyMixin.js b/resources/js/components/shared/FilterTableBodyMixin.js
index 41b8c9aaea..dd64cfbaae 100644
--- a/resources/js/components/shared/FilterTableBodyMixin.js
+++ b/resources/js/components/shared/FilterTableBodyMixin.js
@@ -47,8 +47,30 @@ export default {
     formatCategory(categories) {
       return categories.map(item => item.name).join(', ');
     },
-    getNestedPropertyValue(obj, path) {
-      return get(obj, path);
+    getNestedPropertyValue(obj, header) {
+      return this.format(get(obj, header.field), header);
+    },
+    format(value, header) {
+      let config = "";
+      if (header.format === "datetime") {
+        config = ProcessMaker.user.datetime_format;
+        value = this.convertUTCToLocal(value, config)
+      }
+      if (header.format === "date") {
+        config = ProcessMaker.user.datetime_format.replace(/[\sHh:msaAzZ]/g, "");
+        value = this.convertUTCToLocal(value, config)
+      }
+      return value;
+    },
+    convertUTCToLocal(value, config) {
+      if (value) {
+        if (moment(value).isValid()) {
+          return window.moment(value)
+            .format(config);
+        }
+        return value;
+      }
+      return "-";
     },
   },
 };
diff --git a/resources/js/processes/categories/components/CategoriesListing.vue b/resources/js/processes/categories/components/CategoriesListing.vue
index 3f906ffe17..b1d115bbda 100644
--- a/resources/js/processes/categories/components/CategoriesListing.vue
+++ b/resources/js/processes/categories/components/CategoriesListing.vue
@@ -79,7 +79,7 @@
                       <div
                         :style="{ maxWidth: header.width + 'px' }"
                       >
-                        {{ row[header.field] }}
+                        {{ getNestedPropertyValue(row, header) }}
                       </div>
                     </template>
                   </template>
diff --git a/resources/js/processes/components/ArchivedProcessList.vue b/resources/js/processes/components/ArchivedProcessList.vue
index ab6059bfb7..2fe7f5ad24 100644
--- a/resources/js/processes/components/ArchivedProcessList.vue
+++ b/resources/js/processes/components/ArchivedProcessList.vue
@@ -113,7 +113,7 @@
                   <div
                     :style="{ maxWidth: header.width + 'px' }"
                   >
-                    {{ row[header.field] }}
+                    {{ getNestedPropertyValue(row, header) }}
                   </div>
                 </template>
               </template>
diff --git a/resources/js/processes/components/ProcessesListing.vue b/resources/js/processes/components/ProcessesListing.vue
index ad520c703b..0f1043e254 100644
--- a/resources/js/processes/components/ProcessesListing.vue
+++ b/resources/js/processes/components/ProcessesListing.vue
@@ -113,7 +113,7 @@
                   <div
                     :style="{ maxWidth: header.width + 'px' }"
                   >
-                    {{ row[header.field] }}
+                    {{ getNestedPropertyValue(row, header) }}
                   </div>
                 </template>
               </template>
diff --git a/resources/js/requests/components/RequestsListing.vue b/resources/js/requests/components/RequestsListing.vue
index 2869e27622..09889d6f66 100644
--- a/resources/js/requests/components/RequestsListing.vue
+++ b/resources/js/requests/components/RequestsListing.vue
@@ -42,20 +42,20 @@
             v-for="(header, colIndex) in tableHeaders"
             :key="colIndex"
           >
-            <template v-if="containsHTML(getNestedPropertyValue(row, header.field))">
+            <template v-if="containsHTML(getNestedPropertyValue(row, header))">
               <div
                 :id="`element-${rowIndex}-${colIndex}`"
                 :class="{ 'pm-table-truncate': header.truncate }"
                 :style="{ maxWidth: header.width + 'px' }"
               >
-                <span v-html="sanitize(getNestedPropertyValue(row, header.field))"></span>
+                <span v-html="sanitize(getNestedPropertyValue(row, header))"></span>
               </div>
               <b-tooltip
                 v-if="header.truncate"
                 :target="`element-${rowIndex}-${colIndex}`"
                 custom-class="pm-table-tooltip"
               >
-                {{ sanitizeTooltip(getNestedPropertyValue(row, header.field)) }}
+                {{ sanitizeTooltip(getNestedPropertyValue(row, header)) }}
               </b-tooltip>
             </template>
             <template v-else>
@@ -72,13 +72,13 @@
                   :class="{ 'pm-table-truncate': header.truncate }"
                   :style="{ maxWidth: header.width + 'px' }"
                 >
-                  {{ getNestedPropertyValue(row, header.field) }}
+                  {{ getNestedPropertyValue(row, header) }}
                   <b-tooltip
                     v-if="header.truncate"
                     :target="`element-${rowIndex}-${colIndex}`"
                     custom-class="pm-table-tooltip"
                   >
-                    {{ getNestedPropertyValue(row, header.field) }}
+                    {{ getNestedPropertyValue(row, header) }}
                   </b-tooltip>
                 </div>
               </template>
diff --git a/resources/js/tasks/components/TasksList.vue b/resources/js/tasks/components/TasksList.vue
index c9a9590ddc..f58377ceb1 100644
--- a/resources/js/tasks/components/TasksList.vue
+++ b/resources/js/tasks/components/TasksList.vue
@@ -44,20 +44,20 @@
             v-for="(header, colIndex) in tableHeaders"
             :key="colIndex"
           >
-            <template v-if="containsHTML(getNestedPropertyValue(row, header.field))">
+            <template v-if="containsHTML(getNestedPropertyValue(row, header))">
               <div
                 :id="`element-${rowIndex}-${colIndex}`"
                 :class="{ 'pm-table-truncate': header.truncate }"
                 :style="{ maxWidth: header.width + 'px' }"
                   >
-                <span v-html="sanitize(getNestedPropertyValue(row, header.field))"></span>
+                <span v-html="sanitize(getNestedPropertyValue(row, header))"></span>
               </div>
               <b-tooltip
                 v-if="header.truncate"
                 :target="`element-${rowIndex}-${colIndex}`"
                 custom-class="pm-table-tooltip"
               >
-                {{ sanitizeTooltip(getNestedPropertyValue(row, header.field)) }}
+                {{ sanitizeTooltip(getNestedPropertyValue(row, header)) }}
               </b-tooltip>
             </template>
             <template v-else>
@@ -71,7 +71,7 @@
               <template v-else>
                 <template v-if="header.field === 'due_at'">
                   <span :class="['badge', 'badge-'+row['color_badge'], 'due-'+row['color_badge']]">
-                    {{ formatRemainingTime(getNestedPropertyValue(row, header.field)) }}
+                    {{ formatRemainingTime(getNestedPropertyValue(row, header)) }}
                   </span>
                   <span>{{ row["due_date"] }}</span>
                 </template>
@@ -81,13 +81,13 @@
                     :class="{ 'pm-table-truncate': header.truncate }"
                     :style="{ maxWidth: header.width + 'px' }"
                   >
-                    {{ getNestedPropertyValue(row, header.field) }}
+                    {{ getNestedPropertyValue(row, header) }}
                     <b-tooltip
                       v-if="header.truncate"
                       :target="`element-${rowIndex}-${colIndex}`"
                       custom-class="pm-table-tooltip"
                     >
-                      {{ getNestedPropertyValue(row, header.field) }}
+                      {{ getNestedPropertyValue(row, header) }}
                     </b-tooltip>
                   </div>
                 </template>
diff --git a/resources/js/templates/components/ProcessTemplatesListing.vue b/resources/js/templates/components/ProcessTemplatesListing.vue
index 980833bcea..1b5c926854 100644
--- a/resources/js/templates/components/ProcessTemplatesListing.vue
+++ b/resources/js/templates/components/ProcessTemplatesListing.vue
@@ -88,7 +88,7 @@
                   <div
                     :style="{ maxWidth: header.width + 'px' }"
                   >
-                    {{ row[header.field] }}
+                    {{ getNestedPropertyValue(row, header) }}
                   </div>
                 </template>
               </template>