fix: datatable sorting issue

src/views/Feed/Feed.vue

@@ -32,7 +32,7 @@
                 @change="feedTableLookup"></el-input>
         </div>
 
-        <DataTable v-bind="feedTable">
+        <DataTable v-bind="feedTable" :data="feedDisplayData">
             <el-table-column type="expand" width="20">
                 <template #default="scope">
                     <div style="position: relative; font-size: 14px">
@@ -211,6 +211,7 @@
 
 <script setup>
     import { Right } from '@element-plus/icons-vue';
+    import { computed } from 'vue';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
 
@@ -221,6 +222,8 @@
     const { feedTable } = storeToRefs(useFeedStore());
     const { feedTableLookup } = useFeedStore();
 
+    const feedDisplayData = computed(() => feedTable.value.data.slice().reverse());
+
     const { t } = useI18n();
 
     /**

src/views/FriendLog/FriendLog.vue

@@ -28,8 +28,8 @@
                 style="flex: 0.4; margin-left: 10px" />
         </div>
 
-        <DataTable v-bind="friendLogTable">
-            <el-table-column :label="t('table.friendLog.date')" prop="created_at" :sortable="true" width="200">
+        <DataTable v-bind="friendLogTable" :data="friendLogDisplayData">
+            <el-table-column :label="t('table.friendLog.date')" prop="created_at" width="200">
                 <template #default="scope">
                     <el-tooltip placement="right">
                         <template #content>
@@ -90,10 +90,12 @@
 
 <script setup>
     import { Close, Delete, Right } from '@element-plus/icons-vue';
+    import { computed, watch } from 'vue';
     import { ElMessageBox } from 'element-plus';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
-    import { watch } from 'vue';
+
+    import dayjs from 'dayjs';
 
     import { useAppearanceSettingsStore, useFriendStore, useUiStore, useUserStore } from '../../stores';
     import { formatDateFilter, removeFromArray } from '../../shared/utils';
@@ -106,6 +108,23 @@
     const { friendLogTable } = storeToRefs(useFriendStore());
     const { shiftHeld } = storeToRefs(useUiStore());
 
+    const friendLogDisplayData = computed(() => {
+        const data = friendLogTable.value.data;
+        return data.slice().sort((a, b) => {
+            const aTime = typeof a?.created_at === 'string' ? a.created_at : '';
+            const bTime = typeof b?.created_at === 'string' ? b.created_at : '';
+            const aTs = dayjs(aTime).valueOf();
+            const bTs = dayjs(bTime).valueOf();
+            if (Number.isFinite(aTs) && Number.isFinite(bTs) && aTs !== bTs) {
+                return bTs - aTs;
+            }
+
+            const aId = typeof a?.rowId === 'number' ? a.rowId : 0;
+            const bId = typeof b?.rowId === 'number' ? b.rowId : 0;
+            return bId - aId;
+        });
+    });
+
     watch(
         () => hideUnfriends.value,
         (newValue) => {

src/views/GameLog/GameLog.vue

@@ -40,7 +40,7 @@
                 @change="gameLogTableLookup"></el-input>
         </div>
 
-        <DataTable v-bind="gameLogTable">
+        <DataTable v-bind="gameLogTable" :data="gameLogDisplayData">
             <el-table-column :label="t('table.gameLog.date')" prop="created_at" width="130">
                 <template #default="scope">
                     <NativeTooltip placement="right">
@@ -184,9 +184,12 @@
 <script setup>
     import { Close, DataLine, Delete } from '@element-plus/icons-vue';
     import { ElMessageBox } from 'element-plus';
+    import { computed } from 'vue';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
 
+    import dayjs from 'dayjs';
+
     import { useGameLogStore, useInstanceStore, useUiStore, useUserStore, useWorldStore } from '../../stores';
     import { formatDateFilter, openExternalLink, removeFromArray } from '../../shared/utils';
     import { database } from '../../service/database';
@@ -200,6 +203,52 @@
     const { gameLogTable } = storeToRefs(useGameLogStore());
     const { updateSharedFeed } = useSharedFeedStore();
 
+    function getGameLogCreatedAt(row) {
+        if (typeof row?.created_at === 'string' && row.created_at.length > 0) {
+            return row.created_at;
+        }
+        if (typeof row?.createdAt === 'string' && row.createdAt.length > 0) {
+            return row.createdAt;
+        }
+        if (typeof row?.dt === 'string' && row.dt.length > 0) {
+            return row.dt;
+        }
+        return '';
+    }
+
+    function getGameLogCreatedAtTs(row) {
+        const createdAtRaw = row?.created_at ?? row?.createdAt ?? row?.dt;
+        if (typeof createdAtRaw === 'number') {
+            const ts = createdAtRaw > 1_000_000_000_000 ? createdAtRaw : createdAtRaw * 1000;
+            return Number.isFinite(ts) ? ts : 0;
+        }
+
+        const createdAt = getGameLogCreatedAt(row);
+        const ts = dayjs(createdAt).valueOf();
+        return Number.isFinite(ts) ? ts : 0;
+    }
+
+    const gameLogDisplayData = computed(() => {
+        const data = gameLogTable.value.data;
+        return data.slice().sort((a, b) => {
+            const aTs = getGameLogCreatedAtTs(a);
+            const bTs = getGameLogCreatedAtTs(b);
+            if (aTs !== bTs) {
+                return bTs - aTs;
+            }
+
+            const aRowId = typeof a?.rowId === 'number' ? a.rowId : 0;
+            const bRowId = typeof b?.rowId === 'number' ? b.rowId : 0;
+            if (aRowId !== bRowId) {
+                return bRowId - aRowId;
+            }
+
+            const aUid = typeof a?.uid === 'string' ? a.uid : '';
+            const bUid = typeof b?.uid === 'string' ? b.uid : '';
+            return aUid < bUid ? 1 : aUid > bUid ? -1 : 0;
+        });
+    });
+
     const { t } = useI18n();
     const emit = defineEmits(['updateGameLogSessionTable']);
 

src/views/Notifications/Notification.vue

@@ -49,7 +49,11 @@
             </el-tooltip>
         </div>
 
-        <DataTable v-bind="notificationTable" ref="notificationTableRef" class="notification-table">
+        <DataTable
+            v-bind="notificationTable"
+            :data="notificationDisplayData"
+            ref="notificationTableRef"
+            class="notification-table">
             <el-table-column :label="t('table.notification.date')" prop="created_at" width="130">
                 <template #default="scope">
                     <el-tooltip placement="right">
@@ -403,11 +407,12 @@
         Refresh
     } from '@element-plus/icons-vue';
     import { ElMessage, ElMessageBox } from 'element-plus';
-    import { ref } from 'vue';
+    import { computed, ref } from 'vue';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
 
     import Noty from 'noty';
+    import dayjs from 'dayjs';
 
     import {
         useGalleryStore,
@@ -451,6 +456,42 @@
 
     const { t } = useI18n();
 
+    function getNotificationCreatedAt(row) {
+        if (typeof row?.created_at === 'string' && row.created_at.length > 0) {
+            return row.created_at;
+        }
+        if (typeof row?.createdAt === 'string' && row.createdAt.length > 0) {
+            return row.createdAt;
+        }
+        return '';
+    }
+
+    function getNotificationCreatedAtTs(row) {
+        const createdAtRaw = row?.created_at ?? row?.createdAt;
+        if (typeof createdAtRaw === 'number') {
+            const ts = createdAtRaw > 1_000_000_000_000 ? createdAtRaw : createdAtRaw * 1000;
+            return Number.isFinite(ts) ? ts : 0;
+        }
+
+        const createdAt = getNotificationCreatedAt(row);
+        const ts = dayjs(createdAt).valueOf();
+        return Number.isFinite(ts) ? ts : 0;
+    }
+
+    const notificationDisplayData = computed(() => {
+        return notificationTable.value.data.slice().sort((a, b) => {
+            const aTs = getNotificationCreatedAtTs(a);
+            const bTs = getNotificationCreatedAtTs(b);
+            if (aTs !== bTs) {
+                return bTs - aTs;
+            }
+
+            const aId = typeof a?.id === 'string' ? a.id : '';
+            const bId = typeof b?.id === 'string' ? b.id : '';
+            return aId < bId ? 1 : aId > bId ? -1 : 0;
+        });
+    });
+
     const sendInviteResponseDialog = ref({
         messageSlot: {},
         invite: {}