fix datatable sorting issue

src/components/DataTable.vue

@@ -110,10 +110,13 @@
     const detectCreatedAtOrder = (src) => {
         if (!Array.isArray(src) || src.length <= 2) return null;
 
+        const detectOrderInRange = (startIndexInclusive, endIndexInclusive) => {
             let couldBeAsc = true;
             let couldBeDesc = true;
-        const start = Math.max(1, src.length - effectivePageSize.value - 1);
-        for (let i = start; i < src.length; i++) {
+
+            const start = Math.max(1, startIndexInclusive);
+            const end = Math.min(endIndexInclusive, src.length - 1);
+            for (let i = start; i <= end; i++) {
                 const a = src[i - 1]?.created_at;
                 const b = src[i]?.created_at;
                 if (typeof a !== 'string' || typeof b !== 'string') continue;
@@ -132,6 +135,20 @@
             return null;
         };
 
+        const windowSize = Math.min(Math.max(effectivePageSize.value + 1, 25), 200);
+        const headEnd = Math.min(src.length - 1, windowSize);
+        const tailStart = Math.max(1, src.length - windowSize);
+
+        const headOrder = detectOrderInRange(1, headEnd);
+        const tailOrder = detectOrderInRange(tailStart, src.length - 1);
+
+        if (headOrder && tailOrder && headOrder !== tailOrder) {
+            return null;
+        }
+
+        return tailOrder || headOrder;
+    };
+
     const throttledData = ref(asRawArray(data.value));
     const throttledFilters = ref(filters.value);
     const throttledSortData = ref({ ...sortData.value });

src/views/Notifications/Notification.vue

@@ -50,7 +50,7 @@
         </div>
 
         <DataTable v-bind="notificationTable" ref="notificationTableRef" class="notification-table">
-            <el-table-column :label="t('table.notification.date')" prop="created_at" :sortable="true" width="130">
+            <el-table-column :label="t('table.notification.date')" prop="created_at" width="130">
                 <template #default="scope">
                     <el-tooltip placement="right">
                         <template #content>