custom col widths

2026-04-26 02:03:49 +02:00 · 2026-01-10 15:48:31 +09:00
parent 937294ebf7
commit e7cfc945da
15 changed files with 378 additions and 357 deletions
--- a/src/views/Feed/Feed.vue
+++ b/src/views/Feed/Feed.vue
@@ -41,14 +41,6 @@
 </template>

 <script setup>
-    import {
-        getCoreRowModel,
-        getExpandedRowModel,
-        getFilteredRowModel,
-        getPaginationRowModel,
-        getSortedRowModel,
-        useVueTable
-    } from '@tanstack/vue-table';
    import { computed, ref, watch } from 'vue';
    import { storeToRefs } from 'pinia';
    import { useI18n } from 'vue-i18n';
@@ -58,7 +50,7 @@
    import { Switch } from '../../components/ui/switch';
    import { columns as baseColumns } from './columns.jsx';
    import { useDataTableScrollHeight } from '../../composables/useDataTableScrollHeight';
-    import { valueUpdater } from '../../components/ui/table/utils';
+    import { useVrcxVueTable } from '../../lib/table/useVrcxVueTable';

    const { feedTable } = storeToRefs(useFeedStore());
    const { feedTableLookup } = useFeedStore();
@@ -83,36 +75,17 @@
        feedTable.value.pageSizeLinked ? appearanceSettingsStore.tablePageSize : feedTable.value.pageSize
    );

-    const sorting = ref([]);
-    const expanded = ref({});
-    const pagination = ref({
-        pageIndex: 0,
-        pageSize: pageSize.value
-    });
-
-    const table = useVueTable({
+    const { table, pagination } = useVrcxVueTable({
        data: feedDisplayData,
        columns: baseColumns,
-        getRowId: (row) => `${row.type}:${row.rowId ?? row.uid}:${row.created_at ?? ''}`,
+        getRowId: (row) => `${row.type}:${row.rowId}:${row.created_at ?? ''}`,
+        enableExpanded: true,
        getRowCanExpand: () => true,
-        getCoreRowModel: getCoreRowModel(),
-        getPaginationRowModel: getPaginationRowModel(),
-        getSortedRowModel: getSortedRowModel(),
-        getFilteredRowModel: getFilteredRowModel(),
-        getExpandedRowModel: getExpandedRowModel(),
-        onSortingChange: (updaterOrValue) => valueUpdater(updaterOrValue, sorting),
-        onPaginationChange: (updaterOrValue) => valueUpdater(updaterOrValue, pagination),
-        onExpandedChange: (updaterOrValue) => valueUpdater(updaterOrValue, expanded),
-        state: {
-            get sorting() {
-                return sorting.value;
-            },
-            get pagination() {
-                return pagination.value;
-            },
-            get expanded() {
-                return expanded.value;
-            }
+        initialSorting: [],
+        initialExpanded: {},
+        initialPagination: {
+            pageIndex: 0,
+            pageSize: pageSize.value
        }
    });

--- a/src/views/Feed/columns.jsx
+++ b/src/views/Feed/columns.jsx
@@ -199,8 +199,10 @@ export const columns = [
        id: 'expander',
        header: () => null,
        enableSorting: false,
+        size: 20,
+        minSize: 0,
+        maxSize: 20,
        meta: {
-            class: 'w-[20px]',
            expandedRow
        },
        cell: ({ row }) => {
@@ -223,9 +225,7 @@ export const columns = [
    },
    {
        accessorKey: 'created_at',
-        meta: {
-            class: 'w-[140px]'
-        },
+        size: 140,
        header: ({ column }) => (
            <Button
                variant="ghost"
@@ -258,9 +258,7 @@ export const columns = [
    },
    {
        accessorKey: 'type',
-        meta: {
-            class: 'w-[130px]'
-        },
+        size: 130,
        header: () => t('table.feed.type'),
        cell: ({ row }) => {
            const type = row.getValue('type');
@@ -275,9 +273,7 @@ export const columns = [
    },
    {
        accessorKey: 'displayName',
-        meta: {
-            class: 'w-[190px]'
-        },
+        size: 190,
        header: () => t('table.feed.user'),
        cell: ({ row }) => {
            const { showUserDialog } = useUserStore();
@@ -296,8 +292,9 @@ export const columns = [
        id: 'detail',
        header: () => t('table.feed.detail'),
        enableSorting: false,
+        minSize: 100,
        meta: {
-            class: 'min-w-[240px] overflow-hidden'
+            stretch: true
        },
        cell: ({ row }) => {
            const original = row.original;
--- a/src/views/FriendLog/FriendLog.vue
+++ b/src/views/FriendLog/FriendLog.vue
@@ -39,13 +39,6 @@
 </template>

 <script setup>
-    import {
-        getCoreRowModel,
-        getFilteredRowModel,
-        getPaginationRowModel,
-        getSortedRowModel,
-        useVueTable
-    } from '@tanstack/vue-table';
    import { computed, ref, watch } from 'vue';
    import { ElMessageBox } from 'element-plus';
    import { storeToRefs } from 'pinia';
@@ -59,7 +52,7 @@
    import { database } from '../../service/database';
    import { removeFromArray } from '../../shared/utils';
    import { useDataTableScrollHeight } from '../../composables/useDataTableScrollHeight';
-    import { valueUpdater } from '../../components/ui/table/utils';
+    import { useVrcxVueTable } from '../../lib/table/useVrcxVueTable';

    import configRepository from '../../service/config';

@@ -163,29 +156,14 @@
        friendLogTable.value.pageSizeLinked ? appearanceSettingsStore.tablePageSize : friendLogTable.value.pageSize
    );

-    const sorting = ref([]);
-    const pagination = ref({
-        pageIndex: 0,
-        pageSize: pageSize.value
-    });
-
-    const table = useVueTable({
+    const { table, pagination } = useVrcxVueTable({
        data: friendLogDisplayData,
        columns,
        getRowId: (row) => `${row.type}:${row.rowId ?? row.userId ?? row.created_at ?? ''}`,
-        getCoreRowModel: getCoreRowModel(),
-        getPaginationRowModel: getPaginationRowModel(),
-        getSortedRowModel: getSortedRowModel(),
-        getFilteredRowModel: getFilteredRowModel(),
-        onSortingChange: (updaterOrValue) => valueUpdater(updaterOrValue, sorting),
-        onPaginationChange: (updaterOrValue) => valueUpdater(updaterOrValue, pagination),
-        state: {
-            get sorting() {
-                return sorting.value;
-            },
-            get pagination() {
-                return pagination.value;
-            }
+        initialSorting: [],
+        initialPagination: {
+            pageIndex: 0,
+            pageSize: pageSize.value
        }
    });

--- a/src/views/FriendLog/columns.jsx
+++ b/src/views/FriendLog/columns.jsx
@@ -24,16 +24,14 @@ export const createColumns = ({ onDelete, onDeletePrompt }) => {
            id: 'spacer',
            header: () => null,
            enableSorting: false,
-            meta: {
-                class: 'w-[20px]'
-            },
+            size: 20,
+            minSize: 0,
+            maxSize: 20,
            cell: () => null
        },
        {
            accessorKey: 'created_at',
-            meta: {
-                class: 'w-[90px]'
-            },
+            size: 90,
            header: ({ column }) => (
                <Button
                    variant="ghost"
@@ -66,9 +64,8 @@ export const createColumns = ({ onDelete, onDeletePrompt }) => {
        },
        {
            accessorKey: 'type',
-            meta: {
-                class: 'w-[110px]'
-            },
+
+            size: 110,
            header: () => t('table.friendLog.type'),
            cell: ({ row }) => {
                const type = row.getValue('type');
@@ -81,10 +78,12 @@ export const createColumns = ({ onDelete, onDeletePrompt }) => {
        },
        {
            accessorKey: 'displayName',
-            meta: {
-                class: 'w-[260px]'
-            },
+            size: 260,
+            minSize: 80,
            header: () => t('table.friendLog.user'),
+            meta: {
+                stretch: true
+            },
            cell: ({ row }) => {
                const original = row.original;
                const displayName =
@@ -119,6 +118,9 @@ export const createColumns = ({ onDelete, onDeletePrompt }) => {
            meta: {
                class: 'w-[80px] max-w-[80px] text-right'
            },
+            enableResizing: false,
+            size: 80,
+            maxSize: 80,
            header: () => t('table.friendLog.action'),
            enableSorting: false,
            cell: ({ row }) => {
@@ -150,9 +152,8 @@ export const createColumns = ({ onDelete, onDeletePrompt }) => {
            id: 'trailing',
            header: () => null,
            enableSorting: false,
-            meta: {
-                class: 'w-[5px]'
-            },
+            enableResizing: false,
+            size: 5,
            cell: () => null
        }
    ];
--- a/src/views/GameLog/GameLog.vue
+++ b/src/views/GameLog/GameLog.vue
@@ -50,13 +50,6 @@
 </template>

 <script setup>
-    import {
-        getCoreRowModel,
-        getFilteredRowModel,
-        getPaginationRowModel,
-        getSortedRowModel,
-        useVueTable
-    } from '@tanstack/vue-table';
    import { computed, ref, watch } from 'vue';
    import { ElMessageBox } from 'element-plus';
    import { storeToRefs } from 'pinia';
@@ -64,18 +57,16 @@

    import dayjs from 'dayjs';

-    import { useAppearanceSettingsStore, useGameLogStore, useSharedFeedStore, useVrcxStore } from '../../stores';
+    import { useAppearanceSettingsStore, useGameLogStore, useVrcxStore } from '../../stores';
    import { DataTableLayout } from '../../components/ui/data-table';
-    import { Switch } from '../../components/ui/switch';
    import { createColumns } from './columns.jsx';
    import { database } from '../../service/database';
    import { removeFromArray } from '../../shared/utils';
    import { useDataTableScrollHeight } from '../../composables/useDataTableScrollHeight';
-    import { valueUpdater } from '../../components/ui/table/utils';
+    import { useVrcxVueTable } from '../../lib/table/useVrcxVueTable';

    const { gameLogTableLookup } = useGameLogStore();
    const { gameLogTable } = storeToRefs(useGameLogStore());
-    const { updateSharedFeed } = useSharedFeedStore();
    const appearanceSettingsStore = useAppearanceSettingsStore();
    const vrcxStore = useVrcxStore();

@@ -126,7 +117,6 @@
    });

    const { t } = useI18n();
-    const emit = defineEmits(['updateGameLogSessionTable']);

    const gameLogRef = ref(null);
    const { tableStyle: tableHeightStyle } = useDataTableScrollHeight(gameLogRef, {
@@ -135,16 +125,6 @@
        paginationHeight: 52
    });

-    function deleteGameLogEntry(row) {
-        removeFromArray(gameLogTable.value.data, row);
-        database.deleteGameLogEntry(row);
-        console.log('deleteGameLogEntry', row);
-        database.getGamelogDatabase().then((data) => {
-            emit('updateGameLogSessionTable', data);
-            updateSharedFeed(true);
-        });
-    }
-
    function deleteGameLogEntryPrompt(row) {
        ElMessageBox.confirm('Continue? Delete Log', 'Confirm', {
            confirmButtonText: 'Confirm',
@@ -159,6 +139,11 @@
            .catch(() => {});
    }

+    function deleteGameLogEntry(row) {
+        removeFromArray(gameLogTable.value.data, row);
+        database.deleteGameLogEntry(row);
+    }
+
    const columns = createColumns({
        getCreatedAt: getGameLogCreatedAt,
        onDelete: deleteGameLogEntry,
@@ -170,30 +155,14 @@
        gameLogTable.value.pageSizeLinked ? appearanceSettingsStore.tablePageSize : gameLogTable.value.pageSize
    );

-    const sorting = ref([]);
-    const pagination = ref({
-        pageIndex: 0,
-        pageSize: pageSize.value
-    });
-
-    const table = useVueTable({
+    const { table, pagination } = useVrcxVueTable({
        data: gameLogDisplayData,
        columns,
-        getRowId: (row) =>
-            `${row.type}:${row.rowId ?? row.uid ?? row.displayName + row.location + row.time}:${getGameLogCreatedAt(row)}`,
-        getCoreRowModel: getCoreRowModel(),
-        getPaginationRowModel: getPaginationRowModel(),
-        getSortedRowModel: getSortedRowModel(),
-        getFilteredRowModel: getFilteredRowModel(),
-        onSortingChange: (updaterOrValue) => valueUpdater(updaterOrValue, sorting),
-        onPaginationChange: (updaterOrValue) => valueUpdater(updaterOrValue, pagination),
-        state: {
-            get sorting() {
-                return sorting.value;
-            },
-            get pagination() {
-                return pagination.value;
-            }
+        getRowId: (row) => `${row.type}:${row.rowId ?? row.displayName + row.location + row.time}`,
+        initialSorting: [],
+        initialPagination: {
+            pageIndex: 0,
+            pageSize: pageSize.value
        }
    });

--- a/src/views/GameLog/columns.jsx
+++ b/src/views/GameLog/columns.jsx
@@ -13,7 +13,6 @@ import { storeToRefs } from 'pinia';
 import { formatDateFilter, openExternalLink } from '../../shared/utils';
 import { i18n } from '../../plugin';
 import {
-    useGameLogStore,
    useInstanceStore,
    useUiStore,
    useUserStore,
@@ -33,7 +32,6 @@ export const createColumns = ({ getCreatedAt, onDelete, onDeletePrompt }) => {
    const { showWorldDialog } = useWorldStore();
    const { lookupUser } = useUserStore();
    const { showPreviousInstancesInfoDialog } = useInstanceStore();
-    const { gameLogIsFriend, gameLogIsFavorite } = useGameLogStore();
    const { shiftHeld } = storeToRefs(useUiStore());

    return [
@@ -41,17 +39,15 @@ export const createColumns = ({ getCreatedAt, onDelete, onDeletePrompt }) => {
            id: 'spacer',
            header: () => null,
            enableSorting: false,
-            meta: {
-                class: 'w-[20px]'
-            },
+            size: 20,
+            minSize: 0,
+            maxSize: 20,
            cell: () => null
        },
        {
            accessorFn: (row) => getCreatedAt(row),
            id: 'created_at',
-            meta: {
-                class: 'w-[140px]'
-            },
+            size: 140,
            header: ({ column }) => (
                <Button
                    variant="ghost"
@@ -84,9 +80,7 @@ export const createColumns = ({ getCreatedAt, onDelete, onDeletePrompt }) => {
        },
        {
            accessorKey: 'type',
-            meta: {
-                class: 'w-[150px]'
-            },
+            size: 150,
            header: () => t('table.gameLog.type'),
            cell: ({ row }) => {
                const original = row.original;
@@ -110,9 +104,7 @@ export const createColumns = ({ getCreatedAt, onDelete, onDeletePrompt }) => {
        },
        {
            accessorKey: 'displayName',
-            meta: {
-                class: 'w-[200px]'
-            },
+            size: 200,
            header: () => t('table.gameLog.user'),
            cell: ({ row }) => {
                const original = row.original;
@@ -139,8 +131,9 @@ export const createColumns = ({ getCreatedAt, onDelete, onDeletePrompt }) => {
            id: 'detail',
            header: () => t('table.gameLog.detail'),
            enableSorting: false,
+            minSize: 150,
            meta: {
-                class: 'min-w-[240px] overflow-hidden'
+                stretch: true
            },
            cell: ({ row }) => {
                const original = row.original;
@@ -246,8 +239,12 @@ export const createColumns = ({ getCreatedAt, onDelete, onDeletePrompt }) => {
        {
            id: 'action',
            meta: {
-                class: 'w-[90px] max-w-[90px] text-right'
+                class: 'text-right'
            },
+            enableResizing: false,
+            size: 90,
+            minSize: 90,
+            maxSize: 90,
            header: () => t('table.gameLog.action'),
            enableSorting: false,
            cell: ({ row }) => {
--- a/src/views/Moderation/Moderation.vue
+++ b/src/views/Moderation/Moderation.vue
@@ -39,13 +39,6 @@
 </template>

 <script setup>
-    import {
-        getCoreRowModel,
-        getFilteredRowModel,
-        getPaginationRowModel,
-        getSortedRowModel,
-        useVueTable
-    } from '@tanstack/vue-table';
    import { computed, ref, watch } from 'vue';
    import { ElMessageBox } from 'element-plus';
    import { Refresh } from '@element-plus/icons-vue';
@@ -58,7 +51,7 @@
    import { moderationTypes } from '../../shared/constants';
    import { playerModerationRequest } from '../../api';
    import { useDataTableScrollHeight } from '../../composables/useDataTableScrollHeight';
-    import { valueUpdater } from '../../components/ui/table/utils';
+    import { useVrcxVueTable } from '../../lib/table/useVrcxVueTable';

    import configRepository from '../../service/config.js';

@@ -151,29 +144,14 @@
            : playerModerationTable.value.pageSize
    );

-    const sorting = ref([{ id: 'created', desc: true }]);
-    const pagination = ref({
-        pageIndex: 0,
-        pageSize: pageSize.value
-    });
-
-    const table = useVueTable({
+    const { table, pagination } = useVrcxVueTable({
        data: moderationDisplayData,
        columns,
        getRowId: (row) => row.id ?? `${row.type}:${row.sourceUserId}:${row.targetUserId}:${row.created ?? ''}`,
-        getCoreRowModel: getCoreRowModel(),
-        getPaginationRowModel: getPaginationRowModel(),
-        getSortedRowModel: getSortedRowModel(),
-        getFilteredRowModel: getFilteredRowModel(),
-        onSortingChange: (updaterOrValue) => valueUpdater(updaterOrValue, sorting),
-        onPaginationChange: (updaterOrValue) => valueUpdater(updaterOrValue, pagination),
-        state: {
-            get sorting() {
-                return sorting.value;
-            },
-            get pagination() {
-                return pagination.value;
-            }
+        initialSorting: [{ id: 'created', desc: true }],
+        initialPagination: {
+            pageIndex: 0,
+            pageSize: pageSize.value
        }
    });

--- a/src/views/Moderation/columns.jsx
+++ b/src/views/Moderation/columns.jsx
@@ -25,16 +25,14 @@ export const createColumns = ({ onDelete, onDeletePrompt }) => {
            id: 'spacer',
            header: () => null,
            enableSorting: false,
-            meta: {
-                class: 'w-[20px]'
-            },
+            size: 20,
+            minSize: 0,
+            maxSize: 20,
            cell: () => null
        },
        {
            accessorKey: 'created',
-            meta: {
-                class: 'w-[90px]'
-            },
+            size: 90,
            header: ({ column }) => (
                <Button
                    variant="ghost"
@@ -67,9 +65,7 @@ export const createColumns = ({ onDelete, onDeletePrompt }) => {
        },
        {
            accessorKey: 'type',
-            meta: {
-                class: 'w-[80px]'
-            },
+            size: 90,
            header: () => t('table.moderation.type'),
            cell: ({ row }) => {
                const type = row.getValue('type');
@@ -83,8 +79,9 @@ export const createColumns = ({ onDelete, onDeletePrompt }) => {
        {
            accessorKey: 'sourceDisplayName',
            meta: {
-                class: 'w-[120px] min-w-0 overflow-hidden'
+                class: 'overflow-hidden'
            },
+            size: 120,
            header: () => t('table.moderation.source'),
            cell: ({ row }) => {
                const original = row.original;
@@ -100,8 +97,10 @@ export const createColumns = ({ onDelete, onDeletePrompt }) => {
        },
        {
            accessorKey: 'targetDisplayName',
+            size: 200,
+            minSize: 80,
            meta: {
-                class: 'w-[200px]'
+                stretch: true
            },
            header: () => t('table.moderation.target'),
            cell: ({ row }) => {
@@ -119,10 +118,14 @@ export const createColumns = ({ onDelete, onDeletePrompt }) => {
        {
            id: 'action',
            meta: {
-                class: 'w-[80px] max-w-[80px] text-right'
+                class: 'text-right'
            },
-            header: () => t('table.moderation.action'),
+            size: 80,
+            minSize: 80,
+            maxSize: 80,
            enableSorting: false,
+            enableResizing: false,
+            header: () => t('table.moderation.action'),
            cell: ({ row }) => {
                const original = row.original;
                if (original.sourceUserId !== currentUser.value?.id) {
@@ -156,9 +159,8 @@ export const createColumns = ({ onDelete, onDeletePrompt }) => {
            id: 'trailing',
            header: () => null,
            enableSorting: false,
-            meta: {
-                class: 'w-[5px]'
-            },
+            enableResizing: false,
+            size: 5,
            cell: () => null
        }
    ];
--- a/src/views/Notifications/Notification.vue
+++ b/src/views/Notifications/Notification.vue
@@ -70,13 +70,6 @@
 </template>

 <script setup>
-    import {
-        getCoreRowModel,
-        getFilteredRowModel,
-        getPaginationRowModel,
-        getSortedRowModel,
-        useVueTable
-    } from '@tanstack/vue-table';
    import { computed, ref, watch } from 'vue';
    import { ElMessageBox } from 'element-plus';
    import { Refresh } from '@element-plus/icons-vue';
@@ -103,7 +96,7 @@
    import { createColumns } from './columns.jsx';
    import { database } from '../../service/database';
    import { useDataTableScrollHeight } from '../../composables/useDataTableScrollHeight';
-    import { valueUpdater } from '../../components/ui/table/utils';
+    import { useVrcxVueTable } from '../../lib/table/useVrcxVueTable';

    import SendInviteRequestResponseDialog from './dialogs/SendInviteRequestResponseDialog.vue';
    import SendInviteResponseDialog from './dialogs/SendInviteResponseDialog.vue';
@@ -219,29 +212,14 @@
            : notificationTable.value.pageSize
    );

-    const sorting = ref([{ id: 'created_at', desc: true }]);
-    const pagination = ref({
-        pageIndex: 0,
-        pageSize: pageSize.value
-    });
-
-    const table = useVueTable({
+    const { table, pagination } = useVrcxVueTable({
        data: notificationDisplayData,
        columns,
        getRowId: (row) => row.id ?? `${row.type}:${row.senderUserId ?? ''}:${row.created_at ?? ''}`,
-        getCoreRowModel: getCoreRowModel(),
-        getPaginationRowModel: getPaginationRowModel(),
-        getSortedRowModel: getSortedRowModel(),
-        getFilteredRowModel: getFilteredRowModel(),
-        onSortingChange: (updaterOrValue) => valueUpdater(updaterOrValue, sorting),
-        onPaginationChange: (updaterOrValue) => valueUpdater(updaterOrValue, pagination),
-        state: {
-            get sorting() {
-                return sorting.value;
-            },
-            get pagination() {
-                return pagination.value;
-            }
+        initialSorting: [{ id: 'created_at', desc: true }],
+        initialPagination: {
+            pageIndex: 0,
+            pageSize: pageSize.value
        }
    });

--- a/src/views/Notifications/columns.jsx
+++ b/src/views/Notifications/columns.jsx
@@ -84,9 +84,7 @@ export const createColumns = ({
        {
            accessorFn: (row) => getNotificationCreatedAtTs(row),
            id: 'created_at',
-            meta: {
-                class: 'w-[120px]'
-            },
+            size: 120,
            header: ({ column }) => (
                <Button
                    variant="ghost"
@@ -136,9 +134,7 @@ export const createColumns = ({
        },
        {
            accessorKey: 'type',
-            meta: {
-                class: 'w-[180px]'
-            },
+            size: 180,
            header: () => t('table.notification.type'),
            cell: ({ row }) => {
                const original = row.original;
@@ -224,8 +220,9 @@ export const createColumns = ({
        {
            accessorKey: 'senderUsername',
            meta: {
-                class: 'w-[150px] min-w-0 overflow-hidden'
+                class: 'overflow-hidden'
            },
+            size: 150,
            header: () => t('table.notification.user'),
            cell: ({ row }) => {
                const original = row.original;
@@ -279,8 +276,9 @@ export const createColumns = ({
        {
            accessorKey: 'groupName',
            meta: {
-                class: 'w-[150px] min-w-0 overflow-hidden'
+                class: 'overflow-hidden'
            },
+            size: 150,
            header: () => t('table.notification.group'),
            cell: ({ row }) => {
                const original = row.original;
@@ -382,9 +380,8 @@ export const createColumns = ({
        },
        {
            accessorKey: 'photo',
-            meta: {
-                class: 'w-[80px]'
-            },
+            enableResizing: false,
+            size: 80,
            header: () => t('table.notification.photo'),
            cell: ({ row }) => {
                const original = row.original;
@@ -441,8 +438,10 @@ export const createColumns = ({
            header: () => t('table.notification.message'),
            enableSorting: false,
            meta: {
-                class: 'min-w-0 overflow-hidden'
+                class: 'min-w-0 overflow-hidden',
+                stretch: true
            },
+            minSize: 100,
            cell: ({ row }) => {
                const original = row.original;
                return (
@@ -489,8 +488,12 @@ export const createColumns = ({
        {
            id: 'action',
            meta: {
-                class: 'w-[120px] max-w-[120px] text-right'
+                class: 'text-right'
            },
+            size: 120,
+            minSize: 120,
+            maxSize: 120,
+            enableResizing: false,
            header: () => t('table.notification.action'),
            enableSorting: false,
            cell: ({ row }) => {
@@ -781,9 +784,8 @@ export const createColumns = ({
            id: 'trailing',
            header: () => null,
            enableSorting: false,
-            meta: {
-                class: 'w-[5px]'
-            },
+            enableResizing: false,
+            size: 5,
            cell: () => null
        }
    ];
--- a/src/views/PlayerList/PlayerList.vue
+++ b/src/views/PlayerList/PlayerList.vue
@@ -168,8 +168,7 @@
 </template>

 <script setup>
-    import { computed, defineAsyncComponent, onActivated, onMounted, ref, watch } from 'vue';
-    import { getCoreRowModel, getPaginationRowModel, getSortedRowModel, useVueTable } from '@tanstack/vue-table';
+    import { computed, defineAsyncComponent, ref, watch } from 'vue';
    import { HomeFilled } from '@element-plus/icons-vue';
    import { storeToRefs } from 'pinia';
    import { useI18n } from 'vue-i18n';
@@ -188,7 +187,7 @@
    import { DataTableLayout } from '../../components/ui/data-table';
    import { createColumns } from './columns.jsx';
    import { useDataTableScrollHeight } from '../../composables/useDataTableScrollHeight';
-    import { valueUpdater } from '../../components/ui/table/utils';
+    import { useVrcxVueTable } from '../../lib/table/useVrcxVueTable';
    import { watchState } from '../../service/watchState';

    import ChatboxBlacklistDialog from './dialogs/ChatboxBlacklistDialog.vue';
@@ -261,16 +260,10 @@
        return a[field].toLowerCase().localeCompare(b[field].toLowerCase());
    }

-    const sorting = ref([]);
-    const pagination = ref({
-        pageIndex: 0,
-        pageSize: 500
-    });
-
-    const columnPinning = ref({
+    const initialColumnPinning = {
        left: ['avatar', 'timer', 'displayName'],
        right: []
-    });
+    };

    const playerListColumns = computed(() =>
        createColumns({
@@ -285,30 +278,15 @@

    const playerListDisplayData = computed(() => currentInstanceUsersData.value ?? []);

-    const playerListTable = useVueTable({
+    const { table: playerListTable } = useVrcxVueTable({
        data: playerListDisplayData,
        columns: playerListColumns.value,
        getRowId: (row) => `${row?.ref?.id ?? ''}:${row?.displayName ?? ''}:${row?.photonId ?? ''}`,
-        getCoreRowModel: getCoreRowModel(),
-        getPaginationRowModel: getPaginationRowModel(),
-        getSortedRowModel: getSortedRowModel(),
-        onSortingChange: (updaterOrValue) => valueUpdater(updaterOrValue, sorting),
-        onPaginationChange: (updaterOrValue) => valueUpdater(updaterOrValue, pagination),
-        onColumnPinningChange: (updaterOrValue) => valueUpdater(updaterOrValue, columnPinning),
-        state: {
-            get sorting() {
-                return sorting.value;
-            },
-            get pagination() {
-                return pagination.value;
-            },
-            get columnPinning() {
-                return columnPinning.value;
-            }
-        },
-        initialState: {
-            columnPinning: columnPinning.value,
-            pagination: pagination.value
+        enablePinning: true,
+        initialColumnPinning,
+        initialPagination: {
+            pageIndex: 0,
+            pageSize: 500
        }
    });

--- a/src/views/PlayerList/columns.jsx
+++ b/src/views/PlayerList/columns.jsx
@@ -66,9 +66,7 @@ export const createColumns = ({
            header: () => t('table.playerList.avatar'),
            size: 70,
            enableSorting: false,
-            meta: {
-                class: 'w-[70px]'
-            },
+            enableResizing: false,
            cell: ({ row }) => {
                const userRef = row.original?.ref;
                const src = userImage(userRef);
@@ -90,9 +88,7 @@ export const createColumns = ({
            header: ({ column }) =>
                sortButton({ column, label: t('table.playerList.timer') }),
            size: 90,
-            meta: {
-                class: 'w-[90px]'
-            },
+            enableResizing: false,
            sortingFn: (rowA, rowB) =>
                (rowA.original?.timer ?? 0) - (rowB.original?.timer ?? 0),
            cell: ({ row }) => <Timer epoch={row.original?.timer} />
@@ -106,9 +102,6 @@ export const createColumns = ({
                    label: t('table.playerList.displayName')
                }),
            size: 200,
-            meta: {
-                class: 'w-[200px]'
-            },
            sortingFn: (rowA, rowB) =>
                sortAlphabetically(rowA.original, rowB.original, 'displayName'),
            cell: ({ row }) => {
@@ -132,9 +125,6 @@ export const createColumns = ({
            header: ({ column }) =>
                sortButton({ column, label: t('table.playerList.rank') }),
            size: 110,
-            meta: {
-                class: 'w-[110px]'
-            },
            sortingFn: (rowA, rowB) =>
                (rowA.original?.ref?.$trustSortNum ?? 0) -
                (rowB.original?.ref?.$trustSortNum ?? 0),
@@ -157,9 +147,6 @@ export const createColumns = ({
            header: () => t('table.playerList.status'),
            minSize: 200,
            enableSorting: false,
-            meta: {
-                class: 'w-[200px]'
-            },
            cell: ({ row }) => {
                const userRef = row.original?.ref;
                const status = userRef?.status;
@@ -188,9 +175,6 @@ export const createColumns = ({
            header: ({ column }) =>
                sortButton({ column, label: t('table.playerList.photonId') }),
            size: 110,
-            meta: {
-                class: 'w-[110px]'
-            },
            sortingFn: (rowA, rowB) =>
                (rowA.original?.photonId ?? 0) - (rowB.original?.photonId ?? 0),
            cell: ({ row }) => {
@@ -239,7 +223,7 @@ export const createColumns = ({
            size: 90,
            accessorFn: (row) => getInstanceIconWeight(row),
            meta: {
-                class: 'w-[90px] text-center'
+                class: 'text-center'
            },
            sortingFn: (rowA, rowB, columnId) => {
                const a = rowA.original;
@@ -312,9 +296,6 @@ export const createColumns = ({
            header: () => t('table.playerList.platform'),
            size: 90,
            enableSorting: false,
-            meta: {
-                class: 'w-[90px]'
-            },
            cell: ({ row }) => {
                const userRef = row.original?.ref;
                const platform = userRef?.$platform;
@@ -354,9 +335,6 @@ export const createColumns = ({
            header: () => t('table.playerList.language'),
            size: 100,
            enableSorting: false,
-            meta: {
-                class: 'w-[100px]'
-            },
            cell: ({ row }) => {
                const userRef = row.original?.ref;
                const langs = userRef?.$languages ?? [];
@@ -393,9 +371,6 @@ export const createColumns = ({
            header: () => t('table.playerList.bioLink'),
            size: 100,
            enableSorting: false,
-            meta: {
-                class: 'w-[100px]'
-            },
            cell: ({ row }) => {
                const links =
                    row.original?.ref?.bioLinks?.filter(Boolean) ?? [];
@@ -429,11 +404,12 @@ export const createColumns = ({
            id: 'note',
            accessorFn: (row) => row?.ref?.note,
            header: () => t('table.playerList.note'),
-            size: 400,
-            enableSorting: false,
+            size: 150,
+            minSize: 40,
            meta: {
-                class: 'w-[150px]'
+                stretch: true
            },
+            enableSorting: false,
            cell: ({ row }) => {
                const note = row.original?.ref?.note;
                const text =