rewrite friendlist table

src/components/ui/data-table/DataTableLayout.vue

@@ -15,7 +15,8 @@
                             <TableHead
                                 v-for="header in headerGroup.headers"
                                 :key="header.id"
-                                :class="getHeaderClass(header)">
+                                :class="getHeaderClass(header)"
+                                :style="getPinnedStyle(header.column)">
                                 <template v-if="!header.isPlaceholder">
                                     <FlexRender :render="header.column.columnDef.header" :props="header.getContext()" />
                                     <div
@@ -37,7 +38,8 @@
                                     <TableCell
                                         v-for="cell in row.getVisibleCells()"
                                         :key="cell.id"
-                                        :class="getCellClass(cell)">
+                                        :class="getCellClass(cell)"
+                                        :style="getPinnedStyle(cell.column)">
                                         <FlexRender :render="cell.column.columnDef.cell" :props="cell.getContext()" />
                                     </TableCell>
                                 </TableRow>
@@ -205,6 +207,31 @@
         return value;
     };
 
+    const getPinnedState = (col) => {
+        try {
+            return col?.getIsPinned?.() ?? false;
+        } catch {
+            return false;
+        }
+    };
+
+    const getPinnedStyle = (col) => {
+        const pinned = getPinnedState(col);
+        if (!pinned) return null;
+
+        if (pinned === 'left') {
+            const left = col?.getStart?.('left') ?? 0;
+            return { left: `${left}px` };
+        }
+
+        if (pinned === 'right') {
+            const right = col?.getAfter?.('right') ?? 0;
+            return { right: `${right}px` };
+        }
+
+        return null;
+    };
+
     const isSpacer = (col) => col?.id === '__spacer';
 
     const isStretch = (col) => {
@@ -226,8 +253,10 @@
     const getHeaderClass = (header) => {
         const columnDef = header?.column?.columnDef;
         const meta = columnDef?.meta ?? {};
+        const pinned = getPinnedState(header?.column);
         return joinClasses(
-            'sticky top-0 z-10 bg-background relative group',
+            'sticky top-0 bg-background relative group',
+            pinned ? 'z-30' : 'z-10',
             isSpacer(header.column) && 'p-0',
             resolveClassValue(meta.class, header?.getContext?.()),
             resolveClassValue(meta.headerClass, header?.getContext?.()),
@@ -240,7 +269,9 @@
     const getCellClass = (cell) => {
         const columnDef = cell?.column?.columnDef;
         const meta = columnDef?.meta ?? {};
+        const pinned = getPinnedState(cell?.column);
         return joinClasses(
+            pinned && 'sticky bg-background z-20',
             isSpacer(cell.column) && 'p-0',
             resolveClassValue(meta.class, cell?.getContext?.()),
             resolveClassValue(meta.cellClass, cell?.getContext?.()),

src/lib/table/useVrcxVueTable.js

@@ -7,7 +7,7 @@ import {
     isFunction,
     useVueTable
 } from '@tanstack/vue-table';
-import { ref, unref, watch } from 'vue';
+import { computed, ref, unref, watch } from 'vue';
 
 function safeJsonParse(str) {
     if (!str) {
@@ -233,12 +233,13 @@ export function useVrcxVueTable(options) {
         });
     }
 
+    const dataSource = computed(() => resolveMaybeGetter(options.data));
+    const columnsSource = computed(() => resolveMaybeGetter(options.columns));
+
     const table = useVueTable({
-        get data() {
+        data: dataSource,
-            return resolveMaybeGetter(options.data);
-        },
         get columns() {
-            const cols = resolveMaybeGetter(options.columns);
+            const cols = columnsSource.value;
 
             const stretchAfterId = findStretchColumnId(cols);
 
@@ -261,6 +262,23 @@ export function useVrcxVueTable(options) {
         ...tableOptions
     });
 
+    watch(
+        columnsSource,
+        (next) => {
+            table.setOptions((prev) => ({
+                ...prev,
+                columns: withSpacerColumn(
+                    next,
+                    fillRemainingSpace,
+                    spacerColumnId,
+                    findStretchColumnId(next)
+                )
+            }));
+            table.setState((prev) => ({ ...prev }));
+        },
+        { immediate: true }
+    );
+
     const persistWrite = debounce(
         (payload) => writePersisted(payload),
         persistDebounceMs

src/localization/en.json

@@ -1538,7 +1538,7 @@
             "branch_stable": "Stable",
             "branch_nightly": "Nightly",
             "nightly_title": "Nightly builds",
-            "nightly_notice": "Nightly builds are for testing. For stability, use Stable.",
+            "nightly_notice": "Nightly builds are for testing. For stability, use stable build.",
             "release": "Release",
             "download": "Download",
             "install": "Install",

src/views/FriendList/FriendList.vue

@@ -1,249 +1,83 @@
 <template>
     <div class="x-container" ref="friendsListRef">
         <div>
-            <div style="display: flex; align-items: center; justify-content: space-between">
+            <DataTableLayout
-                <div style="flex: none; margin-right: 10px; display: flex; align-items: center">
+                class="min-w-0 w-full"
-                    <TooltipWrapper side="bottom" :content="t('view.friend_list.favorites_only_tooltip')">
+                :table="table"
-                        <Switch v-model="friendsListSearchFilterVIP" @update:modelValue="friendsListSearchChange" />
+                :loading="friendsListLoading"
-                    </TooltipWrapper>
+                :table-style="tableHeightStyle"
-                    <Select
+                :page-sizes="pageSizes"
-                        multiple
+                :total-items="totalItems"
-                        :model-value="Array.isArray(friendsListSearchFilters) ? friendsListSearchFilters : []"
+                table-class="min-w-max w-max [&_tbody_tr]:cursor-pointer"
-                        @update:modelValue="handleFriendListFilterChange">
+                :on-page-size-change="handlePageSizeChange"
-                        <SelectTrigger style="margin: 0 10px; width: 150px">
+                :on-row-click="handleRowClick">
-                            <SelectValue :placeholder="t('view.friend_list.filter_placeholder')" />
+                <template #toolbar>
-                        </SelectTrigger>
+                    <div style="display: flex; align-items: center; justify-content: space-between">
-                        <SelectContent>
+                        <div style="flex: none; margin-right: 10px; display: flex; align-items: center">
-                            <SelectGroup>
+                            <TooltipWrapper side="bottom" :content="t('view.friend_list.favorites_only_tooltip')">
-                                <SelectItem
+                                <Switch
-                                    v-for="type in [
+                                    v-model="friendsListSearchFilterVIP"
-                                        'Display Name',
+                                    @update:modelValue="friendsListSearchChange" />
-                                        'User Name',
-                                        'Rank',
-                                        'Status',
-                                        'Bio',
-                                        'Note',
-                                        'Memo'
-                                    ]"
-                                    :key="type"
-                                    :value="type">
-                                    {{ type }}
-                                </SelectItem>
-                            </SelectGroup>
-                        </SelectContent>
-                    </Select>
-                    <InputGroupField
-                        v-model="friendsListSearch"
-                        :placeholder="t('view.friend_list.search_placeholder')"
-                        clearable
-                        style="width: 250px"
-                        @change="friendsListSearchChange" />
-                </div>
-                <div class="flex items-center">
-                    <div v-if="friendsListBulkUnfriendMode" class="inline-block mr-10">
-                        <Button variant="outline" @click="showBulkUnfriendSelectionConfirm">
-                            {{ t('view.friend_list.bulk_unfriend_selection') }}
-                        </Button>
-                        <!-- el-button(size="small" @click="showBulkUnfriendAllConfirm" style="margin-right:5px") Bulk Unfriend All-->
-                    </div>
-                    <div class="flex items-center mr-3">
-                        <span class="name mr-2 text-xs">{{ t('view.friend_list.bulk_unfriend') }}</span>
-                        <Switch
-                            v-model="friendsListBulkUnfriendMode"
-                            @update:modelValue="toggleFriendsListBulkUnfriendMode" />
-                    </div>
-                    <div class="flex items-center">
-                        <Button variant="outline" @click="openChartsTab">
-                            {{ t('view.friend_list.load_mutual_friends') }}
-                        </Button>
-
-                        <Button variant="outline" @click="friendsListLoadUsers">{{
-                            t('view.friend_list.load')
-                        }}</Button>
-                    </div>
-                </div>
-            </div>
-            <DataTable
-                v-bind="friendsListTable"
-                style="margin-top: 10px; cursor: pointer"
-                @sort-change="handleSortChange"
-                @row-click="selectFriendsListRow">
-                <el-table-column v-if="friendsListBulkUnfriendMode" width="55">
-                    <template #default="{ row }">
-                        <Checkbox
-                            :model-value="selectedFriends.has(row.id)"
-                            @update:modelValue="toggleFriendSelection(row.id)" />
-                    </template>
-                </el-table-column>
-                <el-table-column width="20"></el-table-column>
-                <el-table-column
-                    :label="t('table.friendList.no')"
-                    width="100"
-                    prop="$friendNumber"
-                    :sortable="'custom'"
-                    fixed="left">
-                    <template #default="{ row }">
-                        <span>{{ row.$friendNumber ? row.$friendNumber : '' }}</span>
-                    </template>
-                </el-table-column>
-                <el-table-column :label="t('table.friendList.avatar')" width="90" prop="photo">
-                    <template #default="{ row }">
-                        <div class="flex items-center">
-                            <img :src="userImage(row, true)" class="friends-list-avatar" loading="lazy" />
-                        </div>
-                    </template>
-                </el-table-column>
-                <el-table-column
-                    :label="t('table.friendList.displayName')"
-                    min-width="200"
-                    prop="displayName"
-                    sortable="'custom'"
-                    fixed="left">
-                    <template #default="{ row }">
-                        <span :style="{ color: randomUserColours ? row.$userColour : undefined }" class="name">{{
-                            row.displayName
-                        }}</span>
-                    </template>
-                </el-table-column>
-                <el-table-column
-                    :label="t('table.friendList.rank')"
-                    width="140"
-                    prop="$trustSortNum"
-                    :sortable="'custom'">
-                    <template #default="{ row }">
-                        <span
-                            v-if="randomUserColours"
-                            :class="row.$trustClass"
-                            class="name"
-                            v-text="row.$trustLevel"></span>
-                        <span v-else class="name" :style="{ color: row.$userColour }" v-text="row.$trustLevel"></span>
-                    </template>
-                </el-table-column>
-                <el-table-column
-                    :label="t('table.friendList.status')"
-                    min-width="200"
-                    prop="status"
-                    sortable="'custom'">
-                    <template #default="{ row }">
-                        <i
-                            v-if="row.status !== 'offline'"
-                            :class="statusClass(row.status)"
-                            style="margin-right: 3px"
-                            class="x-user-status"></i>
-                        <span v-text="row.statusDescription"></span>
-                    </template>
-                </el-table-column>
-                <el-table-column
-                    :label="t('table.friendList.language')"
-                    width="130"
-                    prop="$languages"
-                    sortable="'custom'">
-                    <template #default="{ row }">
-                        <TooltipWrapper v-for="item in row.$languages" :key="item.key" side="top">
-                            <template #content>
-                                <span>{{ item.value }} ({{ item.key }})</span>
-                            </template>
-                            <span
-                                :class="languageClass(item.key)"
-                                style="display: inline-block; margin-right: 5px"
-                                class="flags"></span>
-                        </TooltipWrapper>
-                    </template>
-                </el-table-column>
-                <el-table-column :label="t('table.friendList.bioLink')" width="130" prop="bioLinks">
-                    <template #default="{ row }">
-                        <div class="flex items-center">
-                            <TooltipWrapper v-for="(link, index) in row.bioLinks.filter(Boolean)" :key="index">
-                                <template #content>
-                                    <span v-text="link"></span>
-                                </template>
-
-                                <img
-                                    :src="getFaviconUrl(link)"
-                                    style="
-                                        width: 16px;
-                                        height: 16px;
-                                        vertical-align: middle;
-                                        margin-right: 5px;
-                                        cursor: pointer;
-                                    "
-                                    @click.stop="openExternalLink(link)"
-                                    loading="lazy" />
                             </TooltipWrapper>
+                            <Select
+                                multiple
+                                :model-value="Array.isArray(friendsListSearchFilters) ? friendsListSearchFilters : []"
+                                @update:modelValue="handleFriendListFilterChange">
+                                <SelectTrigger style="margin: 0 10px; width: 150px">
+                                    <SelectValue :placeholder="t('view.friend_list.filter_placeholder')" />
+                                </SelectTrigger>
+                                <SelectContent>
+                                    <SelectGroup>
+                                        <SelectItem
+                                            v-for="type in [
+                                                'Display Name',
+                                                'User Name',
+                                                'Rank',
+                                                'Status',
+                                                'Bio',
+                                                'Note',
+                                                'Memo'
+                                            ]"
+                                            :key="type"
+                                            :value="type">
+                                            {{ type }}
+                                        </SelectItem>
+                                    </SelectGroup>
+                                </SelectContent>
+                            </Select>
+                            <InputGroupField
+                                v-model="friendsListSearch"
+                                :placeholder="t('view.friend_list.search_placeholder')"
+                                clearable
+                                style="width: 250px"
+                                @change="friendsListSearchChange" />
                         </div>
-                    </template>
+                        <div class="flex items-center">
-                </el-table-column>
+                            <div v-if="friendsListBulkUnfriendMode" class="inline-block mr-10">
-                <el-table-column
+                                <Button variant="outline" @click="showBulkUnfriendSelectionConfirm">
-                    :label="t('table.friendList.joinCount')"
+                                    {{ t('view.friend_list.bulk_unfriend_selection') }}
-                    width="120"
+                                </Button>
-                    prop="$joinCount"
+                                <!-- el-button(size="small" @click="showBulkUnfriendAllConfirm" style="margin-right:5px") Bulk Unfriend All-->
-                    sortable="'custom'"
+                            </div>
-                    align="right"></el-table-column>
+                            <div class="flex items-center mr-3">
-                <el-table-column
+                                <span class="name mr-2 text-xs">{{ t('view.friend_list.bulk_unfriend') }}</span>
-                    :label="t('table.friendList.timeTogether')"
+                                <Switch
-                    width="140"
+                                    v-model="friendsListBulkUnfriendMode"
-                    prop="$timeSpent"
+                                    @update:modelValue="toggleFriendsListBulkUnfriendMode" />
-                    sortable="'custom'"
+                            </div>
-                    align="right">
+                            <div class="flex items-center">
-                    <template #default="{ row }">
+                                <Button variant="outline" @click="openChartsTab">
-                        <span v-if="row.$timeSpent">{{ timeToText(row.$timeSpent) }}</span>
+                                    {{ t('view.friend_list.load_mutual_friends') }}
-                    </template>
+                                </Button>
-                </el-table-column>
+
-                <el-table-column
+                                <Button variant="outline" @click="friendsListLoadUsers">{{
-                    :label="t('table.friendList.lastSeen')"
+                                    t('view.friend_list.load')
-                    width="170"
+                                }}</Button>
-                    prop="$lastSeen"
+                            </div>
-                    sortable="'custom'">
+                        </div>
-                    <template #default="{ row }">
+                    </div>
-                        <span>{{
+                </template>
-                            formatDateFilter(row.$lastSeen, 'long') === '-'
+            </DataTableLayout>
-                                ? ''
-                                : formatDateFilter(row.$lastSeen, 'long')
-                        }}</span>
-                    </template>
-                </el-table-column>
-                <el-table-column
-                    :label="t('table.friendList.mutualFriends')"
-                    width="120"
-                    prop="$mutualCount"
-                    sortable="'custom'"
-                    align="right">
-                    <template #default="{ row }">
-                        <span v-if="row.$mutualCount">{{ row.$mutualCount }}</span>
-                        <span v-else></span> </template
-                ></el-table-column>
-                <el-table-column
-                    :label="t('table.friendList.lastActivity')"
-                    width="200"
-                    prop="last_activity"
-                    sortable="'custom'">
-                    <template #default="{ row }">
-                        <span>{{ formatDateFilter(row.last_activity, 'long') }}</span>
-                    </template>
-                </el-table-column>
-                <el-table-column
-                    :label="t('table.friendList.lastLogin')"
-                    width="200"
-                    prop="last_login"
-                    sortable="'custom'">
-                    <template #default="{ row }">
-                        <span>{{ formatDateFilter(row.last_login, 'long') }}</span>
-                    </template>
-                </el-table-column>
-                <el-table-column
-                    :label="t('table.friendList.dateJoined')"
-                    width="120"
-                    prop="date_joined"
-                    sortable="'custom'"></el-table-column>
-                <el-table-column :label="t('table.friendList.unfriend')" width="100" align="center">
-                    <template #default="{ row }">
-                        <i
-                            class="ri-user-unfollow-line"
-                            style="color: #f56c6c"
-                            @click.stop="confirmDeleteFriend(row.id)"></i>
-                    </template>
-                </el-table-column>
-            </DataTable>
             <el-dialog
                 v-model="friendsListLoadDialogVisible"
                 :title="t('view.friend_list.load_dialog_title')"
@@ -261,7 +95,7 @@
                     <span>{{ friendsListLoadingCurrent }} / {{ friendsListLoadingTotal }}</span>
                 </div>
                 <template #footer>
-                    <Button variant="outline" @click="cancelFriendsListLoad">
+                    <Button variant="secondary" @click="cancelFriendsListLoad">
                         {{ t('view.friend_list.load_cancel') }}
                     </Button>
                 </template>
@@ -272,7 +106,7 @@
 
 <script setup>
     import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
-    import { computed, nextTick, reactive, ref, watch } from 'vue';
+    import { computed, nextTick, ref, watch } from 'vue';
     import { Button } from '@/components/ui/button';
     import { ElMessageBox } from 'element-plus';
     import { InputGroupField } from '@/components/ui/input-group';
@@ -283,23 +117,21 @@
     import { useRoute } from 'vue-router';
 
     import {
-        formatDateFilter,
+        useAppearanceSettingsStore,
-        getFaviconUrl,
+        useFriendStore,
-        languageClass,
+        useSearchStore,
-        localeIncludes,
+        useUserStore,
-        openExternalLink,
+        useVrcxStore
-        sortStatus,
+    } from '../../stores';
-        statusClass,
-        timeToText,
-        userImage
-    } from '../../shared/utils';
-    import { useAppearanceSettingsStore, useFriendStore, useSearchStore, useUserStore } from '../../stores';
     import { friendRequest, userRequest } from '../../api';
-    import { Checkbox } from '../../components/ui/checkbox';
+    import { DataTableLayout } from '../../components/ui/data-table';
     import { Switch } from '../../components/ui/switch';
+    import { createColumns } from './columns.jsx';
+    import { localeIncludes } from '../../shared/utils';
     import removeConfusables, { removeWhitespace } from '../../service/confusables';
     import { router } from '../../plugin/router';
-    import { useTableHeight } from '../../composables/useTableHeight';
+    import { useDataTableScrollHeight } from '../../composables/useDataTableScrollHeight';
+    import { useVrcxVueTable } from '../../lib/table/useVrcxVueTable';
 
     const { t } = useI18n();
 
@@ -308,21 +140,11 @@
     const { friends } = storeToRefs(useFriendStore());
     const { getAllUserStats, getAllUserMutualCount, confirmDeleteFriend, handleFriendDelete } = useFriendStore();
     const { randomUserColours } = storeToRefs(useAppearanceSettingsStore());
+    const vrcxStore = useVrcxStore();
     const { showUserDialog } = useUserStore();
     const { stringComparer, friendsListSearch } = storeToRefs(useSearchStore());
 
     const friendsListSearchFilters = ref([]);
-    const friendsListTable = reactive({
-        data: [],
-        tableProps: {
-            stripe: true,
-            size: 'small',
-            defaultSort: { prop: '$friendNumber', order: 'descending' },
-            scrollbarAlwaysOn: true
-        },
-        pageSize: 100,
-        paginationProps: { layout: 'sizes,prev,pager,next,total', pageSizes: [50, 100, 250, 500] }
-    });
     const friendsListBulkUnfriendMode = ref(false);
     const friendsListLoading = ref(false);
     const friendsListLoadingCurrent = ref(0);
@@ -330,14 +152,88 @@
     const friendsListLoadDialogVisible = ref(false);
     const friendsListSearchFilterVIP = ref(false);
     const selectedFriends = ref(new Set());
-    const allFilteredData = ref([]);
+    const friendsListDisplayData = ref([]);
+    const pageSizes = [50, 100, 250, 500];
+    const pageSize = ref(100);
+    const defaultSorting = [{ id: 'friendNumber', desc: true }];
+
+    // const initialColumnPinning = {
+    //     left: ['displayName'],
+    //     right: []
+    // };
 
     const friendsListLoadingPercent = computed(() => {
         if (!friendsListLoadingTotal.value) return 0;
         return Math.min(100, Math.round((friendsListLoadingCurrent.value / friendsListLoadingTotal.value) * 100));
     });
 
-    const { containerRef: friendsListRef } = useTableHeight(ref(friendsListTable));
+    const friendsListRef = ref(null);
+    const { tableStyle: tableHeightStyle } = useDataTableScrollHeight(friendsListRef, {
+        offset: 30,
+        toolbarHeight: 54,
+        paginationHeight: 52
+    });
+
+    const friendsListColumns = computed(() =>
+        createColumns({
+            randomUserColours,
+            bulkUnfriendMode: friendsListBulkUnfriendMode,
+            selectedFriends,
+            onToggleFriendSelection: toggleFriendSelection,
+            onConfirmDeleteFriend: confirmDeleteFriend
+        })
+    );
+
+    const { table, sorting, pagination } = useVrcxVueTable({
+        persistKey: 'friendList',
+        data: friendsListDisplayData,
+        columns: friendsListColumns.value,
+        getRowId: (row) => row?.id ?? row?.displayName ?? '',
+        enablePinning: true,
+        // initialColumnPinning,
+        initialSorting: defaultSorting,
+        initialPagination: {
+            pageIndex: 0,
+            pageSize: pageSize.value
+        }
+    });
+
+    const totalItems = computed(() => {
+        const length = table.getFilteredRowModel().rows.length;
+        const max = vrcxStore.maxTableSize;
+        return length > max && length < max + 51 ? max : length;
+    });
+
+    const handlePageSizeChange = (size) => {
+        pageSize.value = size;
+    };
+
+    const handleRowClick = (row) => {
+        selectFriendsListRow(row?.original ?? null);
+    };
+
+    watch(
+        friendsListColumns,
+        (next) => {
+            table.setOptions((prev) => ({
+                ...prev,
+                columns: /** @type {any} */ (next)
+            }));
+        },
+        { immediate: true }
+    );
+
+    watch(pageSize, (size) => {
+        if (pagination.value.pageSize === size) {
+            return;
+        }
+        pagination.value = {
+            ...pagination.value,
+            pageIndex: 0,
+            pageSize: size
+        };
+        table.setPageSize(size);
+    });
 
     const route = useRoute();
 
@@ -349,11 +245,18 @@
         { immediate: true }
     );
 
+    watch(
+        () => friends.value.size,
+        () => {
+            friendsListSearchChange();
+        }
+    );
+
     function friendsListSearchChange() {
         friendsListLoading.value = true;
         let query = '';
         let cleanedQuery = '';
-        friendsListTable.data = [];
+        friendsListDisplayData.value = [];
         let filters = friendsListSearchFilters.value.length
             ? [...friendsListSearchFilters.value]
             : ['Display Name', 'Rank', 'Status', 'Bio', 'Note', 'Memo'];
@@ -391,13 +294,12 @@
             }
             results.push(ctx.ref);
         }
-        allFilteredData.value = results;
+        friendsListDisplayData.value = results;
         getAllUserStats();
         getAllUserMutualCount();
-        applySortAndPagination(
+        table.setPageIndex(0);
-            friendsListTable.tableProps.defaultSort.prop,
+        table.setSorting([...defaultSorting]);
-            friendsListTable.tableProps.defaultSort.order
+        sorting.value = [...defaultSorting];
-        );
         nextTick(() => {
             friendsListLoading.value = false;
         });
@@ -418,7 +320,7 @@
     }
 
     function showBulkUnfriendSelectionConfirm() {
-        const pending = friendsListTable.data
+        const pending = friendsListDisplayData.value
             .filter((item) => selectedFriends.value.has(item.id))
             .map((item) => item.displayName);
         if (!pending.length) return;
@@ -446,7 +348,7 @@
 
     async function bulkUnfriendSelection() {
         if (!selectedFriends.value.size) return;
-        for (const item of friendsListTable.data) {
+        for (const item of friendsListDisplayData.value) {
             if (selectedFriends.value.has(item.id)) {
                 console.log(`Unfriending ${item.displayName} (${item.id})`);
                 await friendRequest.deleteFriend({ userId: item.id }).then((args) => handleFriendDelete(args));
@@ -506,82 +408,10 @@
         else showUserDialog(val.id);
     }
 
-    function compareWithFriendNumber(a, b, primaryComparison, primarySelector = (x) => x) {
-        const primaryComparisonResult = primaryComparison(primarySelector(a), primarySelector(b));
-        if (primaryComparisonResult === 0) {
-            return (a.$friendNumber || 0) - (b.$friendNumber || 0);
-        }
-        return primaryComparisonResult;
-    }
-
-    function sortAlphabetically(a, b) {
-        if (!a || !b) {
-            if (!a && !b) return 0;
-            return !a ? -1 : 1;
-        }
-        return a.toLowerCase().localeCompare(b.toLowerCase());
-    }
-
-    function sortLanguages(a, b) {
-        const as = a.map((i) => i.value).sort();
-        const bs = b.map((i) => i.value).sort();
-        return JSON.stringify(as).localeCompare(JSON.stringify(bs));
-    }
-
     function openChartsTab() {
         router.push({ name: 'charts' });
     }
 
-    function handleSortChange({ prop, order }) {
-        applySortAndPagination(prop, order);
-    }
-
-    function resolveSortFunction(prop) {
-        const numberComparison = (a, b) => (a || 0) - (b || 0);
-        switch (prop) {
-            case '$friendNumber':
-                return [numberComparison, (item) => item.$friendNumber || 0];
-            case 'displayName':
-                return [sortAlphabetically, (item) => item.displayName || ''];
-            case '$trustSortNum':
-                return [numberComparison, (item) => item.$trustSortNum || 0];
-            case 'status':
-                return [sortStatus, (item) => item.status || 'offline'];
-            case '$languages':
-                return [sortLanguages, (item) => item.$languages || []];
-            case '$joinCount':
-                return [numberComparison, (item) => item.$joinCount || 0];
-            case '$timeSpent':
-                return [numberComparison, (item) => item.$timeSpent || 0];
-            case '$lastSeen':
-                return [sortAlphabetically, (item) => item.$lastSeen || ''];
-            case '$mutualCount':
-                return [numberComparison, (item) => item.$mutualCount || 0];
-            case 'last_activity':
-                return [sortAlphabetically, (item) => item.last_activity || ''];
-            case 'last_login':
-                return [sortAlphabetically, (item) => item.last_login || ''];
-            case 'date_joined':
-                return [sortAlphabetically, (item) => item.date_joined || ''];
-            default:
-                return [sortAlphabetically, (item) => item[prop] || ''];
-        }
-    }
-
-    function applySortAndPagination(prop, order) {
-        let sortedData = [...allFilteredData.value];
-
-        if (prop && order !== null) {
-            const [comparison, selector] = resolveSortFunction(prop);
-            sortedData.sort((a, b) => {
-                const result = compareWithFriendNumber(a, b, comparison, selector);
-                return order === 'ascending' ? result : -result;
-            });
-        }
-
-        friendsListTable.data = sortedData;
-    }
-
     function handleFriendListFilterChange(value) {
         friendsListSearchFilters.value = Array.isArray(value) ? value : [];
         friendsListSearchChange();

src/views/FriendList/columns.jsx

@@ -0,0 +1,440 @@
+import { ArrowUpDown } from 'lucide-vue-next';
+
+import { Button } from '../../components/ui/button';
+import { Checkbox } from '../../components/ui/checkbox';
+import { TooltipWrapper } from '../../components/ui/tooltip';
+import { i18n } from '../../plugin';
+import {
+    formatDateFilter,
+    getFaviconUrl,
+    languageClass,
+    openExternalLink,
+    sortStatus,
+    statusClass,
+    timeToText,
+    userImage
+} from '../../shared/utils';
+
+const { t } = i18n.global;
+
+const sortButton = ({ column, label, descFirst = false }) => (
+    <Button
+        variant="ghost"
+        size="sm"
+        class="-ml-2 h-8 px-2"
+        onClick={() => {
+            const sorted = column.getIsSorted();
+            if (!sorted && descFirst) {
+                column.toggleSorting(true);
+                return;
+            }
+            column.toggleSorting(sorted === 'asc');
+        }}
+    >
+        {label}
+        <ArrowUpDown class="ml-1 h-4 w-4" />
+    </Button>
+);
+
+const compareNumbers = (a, b) => (a ?? 0) - (b ?? 0);
+
+const sortAlphabetically = (a, b) => {
+    if (!a || !b) {
+        if (!a && !b) return 0;
+        return !a ? -1 : 1;
+    }
+    return String(a).toLowerCase().localeCompare(String(b).toLowerCase());
+};
+
+const sortLanguages = (a, b) => {
+    const as = Array.isArray(a) ? a.map((i) => i.value).sort() : [];
+    const bs = Array.isArray(b) ? b.map((i) => i.value).sort() : [];
+    return JSON.stringify(as).localeCompare(JSON.stringify(bs));
+};
+
+const withFriendNumber = (rowA, rowB, result) => {
+    if (result !== 0) {
+        return result;
+    }
+    return compareNumbers(
+        rowA.original?.$friendNumber,
+        rowB.original?.$friendNumber
+    );
+};
+
+const sortByNumber = (selector) => (rowA, rowB) =>
+    withFriendNumber(
+        rowA,
+        rowB,
+        compareNumbers(selector(rowA.original), selector(rowB.original))
+    );
+
+const sortByString = (selector) => (rowA, rowB) =>
+    withFriendNumber(
+        rowA,
+        rowB,
+        sortAlphabetically(selector(rowA.original), selector(rowB.original))
+    );
+
+const sortByStatus = (rowA, rowB) => {
+    const a = rowA.original?.status ?? 'offline';
+    const b = rowB.original?.status ?? 'offline';
+    return withFriendNumber(rowA, rowB, sortStatus(a, b));
+};
+
+const sortByLanguages = (rowA, rowB) =>
+    withFriendNumber(
+        rowA,
+        rowB,
+        sortLanguages(rowA.original?.$languages, rowB.original?.$languages)
+    );
+
+export const createColumns = ({
+    randomUserColours,
+    bulkUnfriendMode,
+    selectedFriends,
+    onToggleFriendSelection,
+    onConfirmDeleteFriend
+}) => {
+    /** @type {import('@tanstack/vue-table').ColumnDef<any, any>[]} */
+    const cols = [];
+
+    if (bulkUnfriendMode?.value) {
+        cols.push({
+            id: 'bulkSelect',
+            header: () => null,
+            size: 55,
+            enableSorting: false,
+            enableResizing: false,
+            meta: {
+                thClass: 'p-0',
+                tdClass: 'p-0'
+            },
+            cell: ({ row }) => {
+                const id = row.original?.id;
+                const checked = selectedFriends?.value?.has?.(id);
+                return (
+                    <div
+                        class="flex items-center justify-center"
+                        onClick={(event) => event.stopPropagation()}
+                    >
+                        <Checkbox
+                            modelValue={checked}
+                            onUpdate:modelValue={() =>
+                                onToggleFriendSelection?.(id)
+                            }
+                        />
+                    </div>
+                );
+            }
+        });
+    }
+
+    cols.push(
+        {
+            id: 'leftSpacer',
+            header: () => null,
+            size: 20,
+            enableSorting: false,
+            enableResizing: false,
+            meta: {
+                thClass: 'p-0',
+                tdClass: 'p-0'
+            },
+            cell: () => null
+        },
+        {
+            id: 'friendNumber',
+            accessorFn: (row) => row?.$friendNumber,
+            header: ({ column }) =>
+                sortButton({
+                    column,
+                    label: t('table.friendList.no'),
+                    descFirst: true
+                }),
+            size: 100,
+            sortingFn: sortByNumber((row) => row?.$friendNumber ?? 0),
+            cell: ({ row }) => (
+                <span>{row.original?.$friendNumber || ''}</span>
+            )
+        },
+        {
+            id: 'avatar',
+            accessorFn: (row) => row?.photo,
+            header: () => t('table.friendList.avatar'),
+            size: 90,
+            enableSorting: false,
+            cell: ({ row }) => {
+                const src = userImage(row.original, true);
+                return src ? (
+                    <div class="flex items-center">
+                        <img
+                            src={src}
+                            class="friends-list-avatar object-cover w-6! h-6"
+                            loading="lazy"
+                        />
+                    </div>
+                ) : null;
+            }
+        },
+        {
+            id: 'displayName',
+            accessorFn: (row) => row?.displayName,
+            header: ({ column }) =>
+                sortButton({
+                    column,
+                    label: t('table.friendList.displayName')
+                }),
+            size: 200,
+            sortingFn: sortByString((row) => row?.displayName ?? ''),
+            cell: ({ row }) => {
+                const style = randomUserColours?.value
+                    ? { color: row.original?.$userColour }
+                    : null;
+                return (
+                    <span class="name" style={style}>
+                        {row.original?.displayName ?? ''}
+                    </span>
+                );
+            }
+        },
+        {
+            id: 'rank',
+            accessorFn: (row) => row?.$trustSortNum,
+            header: ({ column }) =>
+                sortButton({
+                    column,
+                    label: t('table.friendList.rank')
+                }),
+            size: 140,
+            sortingFn: sortByNumber((row) => row?.$trustSortNum ?? 0),
+            cell: ({ row }) => {
+                if (randomUserColours?.value) {
+                    return (
+                        <span class={row.original?.$trustClass}>
+                            {row.original?.$trustLevel ?? ''}
+                        </span>
+                    );
+                }
+                return (
+                    <span
+                        class="name"
+                        style={{ color: row.original?.$userColour }}
+                    >
+                        {row.original?.$trustLevel ?? ''}
+                    </span>
+                );
+            }
+        },
+        {
+            id: 'status',
+            accessorFn: (row) => row?.status,
+            header: ({ column }) =>
+                sortButton({ column, label: t('table.friendList.status') }),
+            minSize: 200,
+            sortingFn: sortByStatus,
+            meta: {
+                stretch: true
+            },
+            cell: ({ row }) => {
+                const status = row.original?.status;
+                return (
+                    <span class="flex items-center">
+                        {status && status !== 'offline' ? (
+                            <i
+                                class={[
+                                    'x-user-status',
+                                    statusClass(status),
+                                    'mr-1'
+                                ]}
+                            ></i>
+                        ) : null}
+                        <span>{row.original?.statusDescription ?? ''}</span>
+                    </span>
+                );
+            }
+        },
+        {
+            id: 'language',
+            accessorFn: (row) => row?.$languages,
+            header: ({ column }) =>
+                sortButton({ column, label: t('table.friendList.language') }),
+            size: 130,
+            sortingFn: sortByLanguages,
+            cell: ({ row }) => (
+                <div class="flex items-center">
+                    {(row.original?.$languages ?? []).map((item) => (
+                        <TooltipWrapper
+                            key={item.key}
+                            side="top"
+                            content={`${item.value} (${item.key})`}
+                        >
+                            <span
+                                class={[
+                                    'flags',
+                                    'inline-block',
+                                    'mr-1',
+                                    languageClass(item.key)
+                                ]}
+                            ></span>
+                        </TooltipWrapper>
+                    ))}
+                </div>
+            )
+        },
+        {
+            id: 'bioLink',
+            header: () => t('table.friendList.bioLink'),
+            size: 130,
+            enableSorting: false,
+            cell: ({ row }) => (
+                <div class="flex items-center">
+                    {(row.original?.bioLinks ?? [])
+                        .filter(Boolean)
+                        .map((link, index) => (
+                            <TooltipWrapper
+                                key={index}
+                                content={String(link)}
+                            >
+                                <img
+                                    src={getFaviconUrl(link)}
+                                    class="h-4 w-4 mr-1 align-middle cursor-pointer"
+                                    onClick={(event) => {
+                                        event.stopPropagation();
+                                        openExternalLink(link);
+                                    }}
+                                    loading="lazy"
+                                />
+                            </TooltipWrapper>
+                        ))}
+                </div>
+            )
+        },
+        {
+            id: 'joinCount',
+            accessorFn: (row) => row?.$joinCount,
+            header: ({ column }) =>
+                sortButton({
+                    column,
+                    label: t('table.friendList.joinCount')
+                }),
+            size: 120,
+            sortingFn: sortByNumber((row) => row?.$joinCount ?? 0),
+            meta: {
+                class: 'text-right'
+            }
+        },
+        {
+            id: 'timeTogether',
+            accessorFn: (row) => row?.$timeSpent,
+            header: ({ column }) =>
+                sortButton({
+                    column,
+                    label: t('table.friendList.timeTogether')
+                }),
+            size: 140,
+            sortingFn: sortByNumber((row) => row?.$timeSpent ?? 0),
+            meta: {
+                class: 'text-right'
+            },
+            cell: ({ row }) => {
+                const time = row.original?.$timeSpent;
+                return time ? <span>{timeToText(time)}</span> : null;
+            }
+        },
+        {
+            id: 'lastSeen',
+            accessorFn: (row) => row?.$lastSeen,
+            header: ({ column }) =>
+                sortButton({
+                    column,
+                    label: t('table.friendList.lastSeen')
+                }),
+            size: 170,
+            sortingFn: sortByString((row) => row?.$lastSeen ?? ''),
+            cell: ({ row }) => {
+                const text = formatDateFilter(row.original?.$lastSeen, 'long');
+                return <span>{text === '-' ? '' : text}</span>;
+            }
+        },
+        {
+            id: 'mutualFriends',
+            accessorFn: (row) => row?.$mutualCount,
+            header: ({ column }) =>
+                sortButton({
+                    column,
+                    label: t('table.friendList.mutualFriends')
+                }),
+            size: 120,
+            sortingFn: sortByNumber((row) => row?.$mutualCount ?? 0),
+            meta: {
+                class: 'text-right'
+            },
+            cell: ({ row }) => {
+                const count = row.original?.$mutualCount;
+                return count ? <span>{count}</span> : null;
+            }
+        },
+        {
+            id: 'lastActivity',
+            accessorFn: (row) => row?.last_activity,
+            header: ({ column }) =>
+                sortButton({
+                    column,
+                    label: t('table.friendList.lastActivity')
+                }),
+            size: 200,
+            sortingFn: sortByString((row) => row?.last_activity ?? ''),
+            cell: ({ row }) => (
+                <span>
+                    {formatDateFilter(row.original?.last_activity, 'long')}
+                </span>
+            )
+        },
+        {
+            id: 'lastLogin',
+            accessorFn: (row) => row?.last_login,
+            header: ({ column }) =>
+                sortButton({ column, label: t('table.friendList.lastLogin') }),
+            size: 200,
+            sortingFn: sortByString((row) => row?.last_login ?? ''),
+            cell: ({ row }) => (
+                <span>
+                    {formatDateFilter(row.original?.last_login, 'long')}
+                </span>
+            )
+        },
+        {
+            id: 'dateJoined',
+            accessorFn: (row) => row?.date_joined,
+            header: ({ column }) =>
+                sortButton({
+                    column,
+                    label: t('table.friendList.dateJoined')
+                }),
+            size: 120,
+            sortingFn: sortByString((row) => row?.date_joined ?? ''),
+            cell: ({ row }) => <span>{row.original?.date_joined ?? ''}</span>
+        },
+        {
+            id: 'unfriend',
+            header: () => t('table.friendList.unfriend'),
+            size: 100,
+            enableSorting: false,
+            meta: {
+                class: 'text-center'
+            },
+            cell: ({ row }) => (
+                <i
+                    class="ri-user-unfollow-line text-destructive"
+                    onClick={(event) => {
+                        event.stopPropagation();
+                        onConfirmDeleteFriend?.(row.original?.id);
+                    }}
+                ></i>
+            )
+        }
+    );
+
+    return cols;
+};

src/views/PlayerList/PlayerList.vue

@@ -150,7 +150,6 @@
 
             <div class="current-instance-table flex min-h-0 min-w-0 flex-1">
                 <DataTableLayout
-                    :key="playerListRenderKey"
                     class="min-w-0 w-full [&_th]:px-2.5! [&_th]:py-0.75! [&_td]:px-2.5! [&_td]:py-0.75! [&_tr]:h-7!"
                     :table="playerListTable"
                     table-class="min-w-max w-max"
@@ -210,8 +209,6 @@
     const playerListRef = ref(null);
     const playerListHeaderRef = ref(null);
     const playerListPhotonRef = ref(null);
-    const playerListRenderKey = ref(0);
-
     const { tableStyle: playerListTableStyle } = useDataTableScrollHeight(playerListRef, {
         offset: 30,
         paginationHeight: 0,
@@ -300,19 +297,6 @@
         { immediate: true }
     );
 
-    watch(
-        () => currentInstanceUsersData.value,
-        (val) => {
-            console.debug('Player list data updated:', val.length);
-            playerListTable.setOptions((prev) => ({
-                ...prev,
-                data: val
-            }));
-            playerListRenderKey.value += 1;
-        },
-        { immediate: true }
-    );
-
     const playerListTotalItems = computed(() => playerListTable.getRowModel().rows.length);
 
     const handlePlayerListRowClick = (row) => {