refactor usevuetable data

src/components/dialogs/GroupDialog/GroupMemberModerationDialog.vue

@@ -726,7 +726,9 @@
 
     const { table: groupMemberModerationTanstackTable } = useVrcxVueTable({
         persistKey: 'group-moderation:members',
-        data: computed(() => groupMemberModerationTable.data ?? []),
+        get data() {
+            return computed(() => groupMemberModerationTable.data).value;
+        },
         columns: groupMemberModerationColumns,
         getRowId: (row) => String(row?.userId ?? ''),
         initialPagination: { pageIndex: 0, pageSize: groupMemberModerationTable.pageSize ?? 15 }
@@ -767,7 +769,9 @@
 
     const { table: groupBansModerationTanstackTable } = useVrcxVueTable({
         persistKey: 'group-moderation:bans',
-        data: groupBansFilteredRows,
+        get data() {
+            return groupBansFilteredRows.value;
+        },
         columns: groupBansModerationColumns,
         getRowId: (row) => String(row?.userId ?? row?.id ?? ''),
         initialPagination: { pageIndex: 0, pageSize: groupBansModerationTable.pageSize ?? 15 }
@@ -790,7 +794,9 @@
 
     const { table: groupInvitesModerationTanstackTable } = useVrcxVueTable({
         persistKey: 'group-moderation:invites',
-        data: computed(() => groupInvitesModerationTable.data ?? []),
+        get data() {
+            return computed(() => groupInvitesModerationTable.data).value;
+        },
         columns: groupInvitesModerationColumns,
         getRowId: (row) => String(row?.userId ?? row?.id ?? ''),
         initialPagination: { pageIndex: 0, pageSize: groupInvitesModerationTable.pageSize ?? 15 }
@@ -813,7 +819,9 @@
 
     const { table: groupJoinRequestsModerationTanstackTable } = useVrcxVueTable({
         persistKey: 'group-moderation:join-requests',
-        data: computed(() => groupJoinRequestsModerationTable.data ?? []),
+        get data() {
+            return computed(() => groupJoinRequestsModerationTable.data).value;
+        },
         columns: groupJoinRequestsModerationColumns,
         getRowId: (row) => String(row?.userId ?? row?.id ?? ''),
         initialPagination: { pageIndex: 0, pageSize: groupJoinRequestsModerationTable.pageSize ?? 15 }
@@ -836,7 +844,9 @@
 
     const { table: groupBlockedModerationTanstackTable } = useVrcxVueTable({
         persistKey: 'group-moderation:blocked',
-        data: computed(() => groupBlockedModerationTable.data ?? []),
+        get data() {
+            return computed(() => groupBlockedModerationTable.data).value;
+        },
         columns: groupBlockedModerationColumns,
         getRowId: (row) => String(row?.userId ?? row?.id ?? ''),
         initialPagination: { pageIndex: 0, pageSize: groupBlockedModerationTable.pageSize ?? 15 }
@@ -871,7 +881,9 @@
 
     const { table: groupLogsModerationTanstackTable } = useVrcxVueTable({
         persistKey: 'group-moderation:logs',
-        data: groupLogsFilteredRows,
+        get data() {
+            return groupLogsFilteredRows.value;
+        },
         columns: groupLogsModerationColumns,
         getRowId: (row) => String(row?.id ?? `${row?.created_at ?? ''}:${row?.eventType ?? ''}`),
         initialPagination: { pageIndex: 0, pageSize: groupLogsModerationTable.pageSize ?? 15 }

src/components/dialogs/InviteDialog/SendInviteDialog.vue

@@ -128,7 +128,9 @@
 
     const { table: inviteMessageTanstackTable } = useVrcxVueTable({
         persistKey: 'invite-message',
-        data: inviteMessageRows,
+        get data() {
+            return inviteMessageRows.value;
+        },
         columns: inviteMessageColumns,
         getRowId: (row) => String(row?.slot ?? ''),
         enablePagination: false,

src/components/dialogs/PreviousInstancesDialog/PreviousInstancesInfoDialog.vue

@@ -98,7 +98,9 @@
 
     const { table } = useVrcxVueTable({
         persistKey: 'previousInstancesInfoDialog',
-        data: displayRows,
+        get data() {
+            return displayRows.value;
+        },
         columns: columns.value,
         getRowId: (row) => row?.id ?? row?.userId ?? row?.displayName ?? JSON.stringify(row ?? {}),
         initialSorting: [{ id: 'created_at', desc: true }],

src/components/dialogs/PreviousInstancesDialog/PreviousInstancesListDialog.vue

@@ -196,7 +196,9 @@
 
     const { table } = useVrcxVueTable({
         persistKey: persistKey.value,
-        data: displayRows,
+        get data() {
+            return displayRows.value;
+        },
         columns: columns.value,
         getRowId: (row) => `${row?.location ?? ''}:${row?.created_at ?? ''}`,
         initialSorting: [{ id: 'created_at', desc: true }],

src/components/dialogs/UserDialog/SendInviteRequestDialog.vue

@@ -105,7 +105,9 @@
 
     const { table: inviteRequestMessageTanstackTable } = useVrcxVueTable({
         persistKey: 'invite-request-message',
-        data: inviteRequestMessageRows,
+        get data() {
+            return inviteRequestMessageRows.value;
+        },
         columns: inviteRequestMessageColumns,
         getRowId: (row) => String(row?.slot ?? ''),
         enablePagination: false,

src/lib/table/useVrcxVueTable.js

@@ -232,7 +232,7 @@ export function useVrcxVueTable(options) {
         });
     }
 
-    const dataSource = computed(() => resolveMaybeGetter(options.data));
+    const dataSource = computed(() => options.data);
     const columnsSource = computed(() => resolveMaybeGetter(options.columns));
 
     const table = useVueTable({

src/stores/feed.js

@@ -1,4 +1,4 @@
-import { ref, shallowReactive, watch } from 'vue';
+import { ref, shallowReactive, shallowRef, watch } from 'vue';
 import { defineStore } from 'pinia';
 
 import { database } from '../service/database';
@@ -16,7 +16,7 @@ export const useFeedStore = defineStore('Feed', () => {
     const vrcxStore = useVrcxStore();
     const sharedFeedStore = useSharedFeedStore();
 
-    const feedTableData = shallowReactive([]);
+    const feedTableData = shallowRef([]);
     const feedTable = ref({
         search: '',
         vip: false,
@@ -29,7 +29,7 @@ export const useFeedStore = defineStore('Feed', () => {
     watch(
         () => watchState.isLoggedIn,
         (isLoggedIn) => {
-            feedTableData.length = 0;
+            feedTableData.value = [];
             if (isLoggedIn) {
                 initFeedTable();
             }
@@ -149,8 +149,8 @@ export const useFeedStore = defineStore('Feed', () => {
             feedTable.value.filter,
             vipList
         );
-        feedTableData.length = 0;
-        feedTableData.push(...rows.reverse());
+        feedTableData.value = [];
+        feedTableData.value = [...feedTableData.value, ...rows.reverse()];
         feedTable.value.loading = false;
     }
 
@@ -172,20 +172,21 @@ export const useFeedStore = defineStore('Feed', () => {
         if (!feedSearch(feed)) {
             return;
         }
-        feedTableData.unshift(feed);
+        feedTableData.value = [feed, ...feedTableData.value];
         sweepFeed();
     }
 
     function sweepFeed() {
-        const j = feedTableData.length;
+        const j = feedTableData.value.length;
         if (j > vrcxStore.maxTableSize + 50) {
-            feedTableData.splice(-50, 50);
+            feedTableData.value = feedTableData.value.slice(0, -50);
         }
     }
 
     async function initFeedTable() {
         feedTable.value.loading = true;
-        feedTableLookup();
+        await feedTableLookup();
+        feedTable.value.loading = false;
     }
 
     return {

src/views/Favorites/dialogs/AvatarImportDialog.vue

@@ -179,7 +179,9 @@
 
     const { table } = useVrcxVueTable({
         persistKey: 'avatarImportDialog',
-        data: rows,
+        get data() {
+            return rows.value;
+        },
         columns: columns.value,
         getRowId: (row) => String(row?.id ?? ''),
         enablePagination: false,

src/views/Favorites/dialogs/FriendImportDialog.vue

@@ -160,7 +160,9 @@
 
     const { table } = useVrcxVueTable({
         persistKey: 'friendImportDialog',
-        data: rows,
+        get data() {
+            return rows.value;
+        },
         columns: columns.value,
         getRowId: (row) => String(row?.id ?? ''),
         enablePagination: false,

src/views/Favorites/dialogs/WorldImportDialog.vue

@@ -185,7 +185,9 @@
 
     const { table } = useVrcxVueTable({
         persistKey: 'worldImportDialog',
-        data: rows,
+        get data() {
+            return rows.value;
+        },
         columns: columns.value,
         getRowId: (row) => String(row?.id ?? ''),
         enablePagination: false,

src/views/Feed/Feed.vue

@@ -90,8 +90,10 @@
     );
 
     const { table, pagination } = useVrcxVueTable({
+        get data() {
+            return feedTableData.value;
+        },
         persistKey: 'feed',
-        data: feedTableData,
         columns: baseColumns,
         getRowId: (row) => `${row.type}:${row.rowId}:${row.created_at ?? ''}`,
         enableExpanded: true,

src/views/FriendList/FriendList.vue

@@ -191,7 +191,9 @@
 
     const { table, sorting, pagination } = useVrcxVueTable({
         persistKey: 'friendList',
-        data: friendsListDisplayData,
+        get data() {
+            return friendsListDisplayData.value;
+        },
         columns: friendsListColumns.value,
         getRowId: (row) => row?.id ?? row?.displayName ?? '',
         enablePinning: true,

src/views/FriendLog/FriendLog.vue

@@ -174,7 +174,9 @@
 
     const { table, pagination } = useVrcxVueTable({
         persistKey: 'friendLog',
-        data: friendLogDisplayData,
+        get data() {
+            return friendLogDisplayData.value;
+        },
         columns,
         getRowId: (row) => `${row.type}:${row.rowId ?? row.userId ?? row.created_at ?? ''}`,
         initialSorting: [],

src/views/GameLog/GameLog.vue

@@ -133,7 +133,9 @@
 
     const { table, pagination } = useVrcxVueTable({
         persistKey: 'gameLog',
-        data: gameLogTableData,
+        get data() {
+            return gameLogTableData.value;
+        },
         columns,
         getRowId: (row, index) => `${row.type}:${row.rowId ?? index}`,
         initialSorting: [],

src/views/Moderation/Moderation.vue

@@ -160,7 +160,9 @@
 
     const { table, pagination } = useVrcxVueTable({
         persistKey: 'moderation',
-        data: moderationDisplayData,
+        get data() {
+            return moderationDisplayData.value;
+        },
         columns,
         getRowId: (row) => row.id ?? `${row.type}:${row.sourceUserId}:${row.targetUserId}:${row.created ?? ''}`,
         initialSorting: [{ id: 'created', desc: true }],

src/views/Notifications/Notification.vue

@@ -231,7 +231,9 @@
 
     const { table, pagination } = useVrcxVueTable({
         persistKey: 'notifications',
-        data: notificationDisplayData,
+        get data() {
+            return notificationDisplayData.value;
+        },
         columns,
         getRowId: (row) => row.id ?? `${row.type}:${row.senderUserId ?? ''}:${row.created_at ?? ''}`,
         initialSorting: [{ id: 'created_at', desc: true }],

src/views/Notifications/dialogs/SendInviteRequestResponseDialog.vue

@@ -93,7 +93,9 @@
 
     const { table: inviteRequestResponseTable } = useVrcxVueTable({
         persistKey: 'invite-request-response-message',
-        data: inviteRequestResponseRows,
+        get data() {
+            return inviteRequestResponseRows.value;
+        },
         columns: inviteRequestResponseColumns,
         getRowId: (row) => String(row?.slot ?? ''),
         enablePagination: false,

src/views/Notifications/dialogs/SendInviteResponseDialog.vue

@@ -92,7 +92,9 @@
 
     const { table: inviteResponseTable } = useVrcxVueTable({
         persistKey: 'invite-response-message',
-        data: inviteResponseRows,
+        get data() {
+            return inviteResponseRows.value;
+        },
         columns: inviteResponseColumns,
         getRowId: (row) => String(row?.slot ?? ''),
         enablePagination: false,

src/views/PlayerList/PlayerList.vue

@@ -267,7 +267,9 @@
 
     const { table: playerListTable } = useVrcxVueTable({
         persistKey: 'playerList',
-        data: currentInstanceUsersData,
+        get data() {
+            return currentInstanceUsersData.value;
+        },
         columns: playerListColumns,
         enablePagination: false,
         getRowId: (row) => `${row?.ref?.id ?? ''}:${row?.displayName ?? ''}`

src/views/PlayerList/components/PhotonEventTable.vue

@@ -181,7 +181,9 @@
 
     const { table: currentTable } = useVrcxVueTable({
         persistKey: 'photonEventTable:current',
-        data: currentRows,
+        get data() {
+            return currentRows.value;
+        },
         columns: currentColumns.value,
         getRowId: (row) => `${row?.photonId ?? ''}:${row?.created_at ?? ''}:${row?.type ?? ''}`,
         initialSorting: [{ id: 'created_at', desc: true }],
@@ -190,7 +192,9 @@
 
     const { table: previousTable } = useVrcxVueTable({
         persistKey: 'photonEventTable:previous',
-        data: previousRows,
+        get data() {
+            return previousRows.value;
+        },
         columns: previousColumns.value,
         getRowId: (row) => `${row?.photonId ?? ''}:${row?.created_at ?? ''}:${row?.type ?? ''}`,
         initialSorting: [{ id: 'created_at', desc: true }],

src/views/Settings/dialogs/RegistryBackupDialog.vue

@@ -93,7 +93,9 @@
 
     const { table } = useVrcxVueTable({
         persistKey: 'registryBackupDialog',
-        data: rows,
+        get data() {
+            return rows.value;
+        },
         columns: columns.value,
         getRowId: (row) => String(row?.name ?? ''),
         enablePagination: false,

src/views/Tools/dialogs/EditInviteMessagesDialog.vue

@@ -119,7 +119,9 @@
 
     const { table: inviteMessageTanstackTable } = useVrcxVueTable({
         persistKey: 'edit-invite-messages:message',
-        data: inviteMessageRows,
+        get data() {
+            return inviteMessageRows.value;
+        },
         columns: inviteMessageColumns,
         getRowId: (row) => String(row?.slot ?? ''),
         enablePagination: false,
@@ -128,7 +130,9 @@
 
     const { table: inviteRequestTanstackTable } = useVrcxVueTable({
         persistKey: 'edit-invite-messages:request',
-        data: inviteRequestRows,
+        get data() {
+            return inviteRequestRows.value;
+        },
         columns: inviteRequestColumns,
         getRowId: (row) => String(row?.slot ?? ''),
         enablePagination: false,
@@ -137,7 +141,9 @@
 
     const { table: inviteRequestResponseTanstackTable } = useVrcxVueTable({
         persistKey: 'edit-invite-messages:request-response',
-        data: inviteRequestResponseRows,
+        get data() {
+            return inviteRequestResponseRows.value;
+        },
         columns: inviteRequestResponseColumns,
         getRowId: (row) => String(row?.slot ?? ''),
         enablePagination: false,
@@ -146,7 +152,9 @@
 
     const { table: inviteResponseTanstackTable } = useVrcxVueTable({
         persistKey: 'edit-invite-messages:response',
-        data: inviteResponseRows,
+        get data() {
+            return inviteResponseRows.value;
+        },
         columns: inviteResponseColumns,
         getRowId: (row) => String(row?.slot ?? ''),
         enablePagination: false,

src/views/Tools/dialogs/NoteExportDialog.vue

@@ -112,7 +112,9 @@
 
     const { table } = useVrcxVueTable({
         persistKey: 'noteExportDialog',
-        data: rows,
+        get data() {
+            return rows.value;
+        },
         columns: columns.value,
         getRowId: (row) => String(row?.id ?? ''),
         enablePagination: false,