custom col widths

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

@@ -7,17 +7,23 @@
         <div class="rounded-md border">
             <div v-loading="loading" class="overflow-auto" :style="tableStyle">
                 <Table :class="tableClassValue" :style="tableElementStyle">
+                    <colgroup>
+                        <col v-for="col in table.getVisibleLeafColumns()" :key="col.id" :style="getColStyle(col)" />
+                    </colgroup>
                     <TableHeader>
                         <TableRow v-for="headerGroup in table.getHeaderGroups()" :key="headerGroup.id">
                             <TableHead
                                 v-for="header in headerGroup.headers"
                                 :key="header.id"
-                                :class="getHeaderClass(header)"
+                                :class="getHeaderClass(header)">
-                                :style="getPinnedStyle(header.column, true)">
+                                <template v-if="!header.isPlaceholder">
-                                <FlexRender
+                                    <FlexRender :render="header.column.columnDef.header" :props="header.getContext()" />
-                                    v-if="!header.isPlaceholder"
+                                    <div
-                                    :render="header.column.columnDef.header"
+                                        v-if="header.column.getCanResize?.()"
-                                    :props="header.getContext()" />
+                                        class="absolute right-0 top-0 h-full w-1 cursor-col-resize touch-none select-none"
+                                        @mousedown.stop="header.getResizeHandler?.()($event)"
+                                        @touchstart.stop="header.getResizeHandler?.()($event)" />
+                                </template>
                             </TableHead>
                         </TableRow>
                     </TableHeader>
@@ -28,8 +34,7 @@
                                     <TableCell
                                         v-for="cell in row.getVisibleCells()"
                                         :key="cell.id"
-                                        :class="getCellClass(cell)"
+                                        :class="getCellClass(cell)">
-                                        :style="getPinnedStyle(cell.column, false)">
                                         <FlexRender :render="cell.column.columnDef.cell" :props="cell.getContext()" />
                                     </TableCell>
                                 </TableRow>
@@ -47,7 +52,7 @@
                         </template>
 
                         <TableRow v-else>
-                            <TableCell :colspan="visibleColumnCount" class="h-24 text-center">
+                            <TableCell class="h-24 text-center">
                                 <slot name="empty">
                                     {{ emptyText }}
                                 </slot>
@@ -60,7 +65,7 @@
 
         <div v-if="showPagination" class="mt-4 flex w-full items-center gap-3">
             <div v-if="pageSizes.length" class="inline-flex items-center flex-1 justify-end gap-2">
-                <span class="text-xs text-muted-foreground">{{ t('table.pagination.rows_per_page') }}</span>
+                <span class="text-xs text-muted-foreground truncate">{{ t('table.pagination.rows_per_page') }}</span>
                 <Select v-model="pageSizeValue">
                     <SelectTrigger size="sm">
                         <SelectValue />
@@ -125,10 +130,6 @@
             type: [String, Array],
             default: null
         },
-        useTableMinWidth: {
-            type: Boolean,
-            default: false
-        },
         tableStyle: {
             type: Object,
             default: null
@@ -169,14 +170,6 @@
 
     const { t } = useI18n();
 
-    const visibleColumnCount = computed(() => {
-        const count = props.table.getVisibleLeafColumns?.().length ?? 0;
-        if (count > 0) {
-            return count;
-        }
-        return props.table.getAllColumns?.().length ?? 1;
-    });
-
     const expandedRenderer = computed(() => {
         const columns = props.table.getAllColumns?.() ?? [];
         for (const column of columns) {
@@ -194,10 +187,9 @@
             .filter(Boolean)
             .join(' ');
 
-    const tableClassValue = computed(() => joinClasses('table-fixed', props.tableClass));
+    const tableClassValue = computed(() => joinClasses('table-fixed w-full', props.tableClass));
 
     const tableElementStyle = computed(() => {
-        if (!props.useTableMinWidth) return undefined;
         const size = props.table?.getTotalSize?.();
         if (!Number.isFinite(size) || size <= 0) return undefined;
         return { minWidth: `${size}px` };
@@ -210,11 +202,30 @@
         return value;
     };
 
+    const isSpacer = (col) => col?.id === '__spacer';
+
+    const isStretch = (col) => {
+        return !!col?.columnDef?.meta?.stretch;
+    };
+
+    const getColStyle = (col) => {
+        if (isSpacer(col)) return { width: '0px' };
+
+        if (isStretch(col)) {
+            return null;
+        }
+
+        const size = col?.getSize?.();
+        if (!Number.isFinite(size)) return null;
+        return { width: `${size}px` };
+    };
+
     const getHeaderClass = (header) => {
         const columnDef = header?.column?.columnDef;
         const meta = columnDef?.meta ?? {};
         return joinClasses(
-            'sticky top-0 z-10 bg-background',
+            'sticky top-0 z-10 bg-background relative',
+            isSpacer(header.column) && 'p-0',
             resolveClassValue(meta.class, header?.getContext?.()),
             resolveClassValue(meta.headerClass, header?.getContext?.()),
             resolveClassValue(meta.thClass, header?.getContext?.()),
@@ -226,9 +237,8 @@
     const getCellClass = (cell) => {
         const columnDef = cell?.column?.columnDef;
         const meta = columnDef?.meta ?? {};
-        const isPinned = Boolean(cell?.column?.getIsPinned?.());
         return joinClasses(
-            isPinned ? 'bg-background' : null,
+            isSpacer(cell.column) && 'p-0',
             resolveClassValue(meta.class, cell?.getContext?.()),
             resolveClassValue(meta.cellClass, cell?.getContext?.()),
             resolveClassValue(meta.tdClass, cell?.getContext?.()),
@@ -237,31 +247,6 @@
         );
     };
 
-    const getPinnedStyle = (column, isHeader) => {
-        const pinned = column?.getIsPinned?.();
-        if (!pinned) return null;
-
-        const style = {
-            position: 'sticky',
-            zIndex: isHeader ? 30 : 20
-        };
-
-        const size = column?.getSize?.();
-        if (Number.isFinite(size)) {
-            style.width = `${size}px`;
-        }
-
-        if (pinned === 'left') {
-            const left = column?.getStart?.('left');
-            if (Number.isFinite(left)) style.left = `${left}px`;
-        } else if (pinned === 'right') {
-            const right = column?.getAfter?.('right');
-            if (Number.isFinite(right)) style.right = `${right}px`;
-        }
-
-        return style;
-    };
-
     const handlePageSizeChange = (size) => {
         if (props.onPageSizeChange) {
             props.onPageSizeChange(size);

src/lib/table/useVrcxVueTable.js

@@ -0,0 +1,210 @@
+import {
+    getCoreRowModel,
+    getExpandedRowModel,
+    getFilteredRowModel,
+    getPaginationRowModel,
+    getSortedRowModel,
+    isFunction,
+    useVueTable
+} from '@tanstack/vue-table';
+import { ref, unref } from 'vue';
+
+function getColumnId(col) {
+    return col?.id ?? col?.accessorKey ?? null;
+}
+
+function findStretchColumnId(columns) {
+    if (!Array.isArray(columns)) {
+        return null;
+    }
+    for (const col of columns) {
+        if (col?.meta?.['stretch']) {
+            return getColumnId(col);
+        }
+    }
+    return null;
+}
+
+function setRef(updaterOrValue, targetRef) {
+    targetRef.value = isFunction(updaterOrValue)
+        ? updaterOrValue(targetRef.value)
+        : updaterOrValue;
+}
+
+function resolveMaybeGetter(func) {
+    return typeof func === 'function' ? func() : unref(func);
+}
+
+function withSpacerColumn(columns, enabled, spacerId, stretchAfterId) {
+    if (!enabled) {
+        return columns;
+    }
+    if (!Array.isArray(columns)) {
+        return columns;
+    }
+
+    const id = spacerId ?? '__spacer';
+
+    if (columns.some((c) => getColumnId(c) === id)) {
+        return columns;
+    }
+
+    const spacerColumn = {
+        id,
+        header: () => null,
+        cell: () => null,
+        enableSorting: false,
+        enableResizing: false,
+        size: 0,
+        minSize: 0,
+        meta: { thClass: 'p-0', tdClass: 'p-0' }
+    };
+
+    if (stretchAfterId) {
+        const idx = columns.findIndex((c) => getColumnId(c) === stretchAfterId);
+        if (idx !== -1) {
+            return [
+                ...columns.slice(0, idx + 1),
+                spacerColumn,
+                ...columns.slice(idx + 1)
+            ];
+        }
+    }
+
+    return [...columns, spacerColumn];
+}
+
+export function useVrcxVueTable(options) {
+    const {
+        getRowId,
+        getRowCanExpand,
+
+        enablePagination = true,
+        initialPagination,
+        enableSorting = true,
+        initialSorting,
+        enableFiltering = true,
+
+        enableExpanded = false,
+        initialExpanded,
+
+        enablePinning = false,
+        initialColumnPinning,
+
+        enableColumnResizing = true,
+        columnResizeMode = 'onChange',
+        initialColumnSizing,
+
+        fillRemainingSpace = true,
+        spacerColumnId = '__spacer',
+
+        tableOptions = {}
+    } = options ?? {};
+
+    const hasData = options && 'data' in options;
+    const hasColumns = options && 'columns' in options;
+    if (!hasData) console.warn('useVrcxVueTable: `data` is required');
+    if (!hasColumns) console.warn('useVrcxVueTable: `columns` is required');
+
+    const sorting = ref(initialSorting ?? []);
+    const expanded = ref(initialExpanded ?? {});
+    const pagination = ref(initialPagination ?? { pageIndex: 0, pageSize: 50 });
+    const columnPinning = ref(initialColumnPinning ?? { left: [], right: [] });
+    const columnSizing = ref(initialColumnSizing ?? {});
+
+    const state = {};
+    const handlers = {};
+    const rowModels = {};
+    const extra = {};
+
+    function register(enabled, key, r, onChangeKey, rowModelPart, extraPart) {
+        if (!enabled) {
+            return;
+        }
+
+        Object.defineProperty(state, key, {
+            enumerable: true,
+            get: () => r.value
+        });
+
+        if (onChangeKey) handlers[onChangeKey] = (val) => setRef(val, r);
+        if (rowModelPart) Object.assign(rowModels, rowModelPart);
+        if (extraPart) Object.assign(extra, extraPart);
+    }
+
+    register(enableSorting, 'sorting', sorting, 'onSortingChange', {
+        getSortedRowModel: getSortedRowModel()
+    });
+
+    register(enablePagination, 'pagination', pagination, 'onPaginationChange', {
+        getPaginationRowModel: getPaginationRowModel()
+    });
+
+    register(
+        enableExpanded,
+        'expanded',
+        expanded,
+        'onExpandedChange',
+        { getExpandedRowModel: getExpandedRowModel() },
+        { getRowCanExpand }
+    );
+
+    register(
+        enablePinning,
+        'columnPinning',
+        columnPinning,
+        'onColumnPinningChange'
+    );
+
+    register(
+        enableColumnResizing,
+        'columnSizing',
+        columnSizing,
+        'onColumnSizingChange',
+        null,
+        { enableColumnResizing: true, columnResizeMode }
+    );
+
+    if (enableFiltering) {
+        Object.assign(rowModels, {
+            getFilteredRowModel: getFilteredRowModel()
+        });
+    }
+
+    const table = useVueTable({
+        get data() {
+            return resolveMaybeGetter(options.data);
+        },
+        get columns() {
+            const cols = resolveMaybeGetter(options.columns);
+
+            const stretchAfterId = findStretchColumnId(cols);
+
+            return withSpacerColumn(
+                cols,
+                fillRemainingSpace,
+                spacerColumnId,
+                stretchAfterId
+            );
+        },
+        getRowId,
+
+        getCoreRowModel: getCoreRowModel(),
+        ...rowModels,
+        ...handlers,
+        ...extra,
+
+        state,
+
+        ...tableOptions
+    });
+
+    return {
+        table,
+        sorting,
+        pagination,
+        expanded,
+        columnPinning,
+        columnSizing
+    };
+}

src/stores/feed.js

@@ -178,10 +178,7 @@ export const useFeedStore = defineStore('Feed', () => {
         if (!feedSearch(feed)) {
             return;
         }
-        feedTable.value.data.push({
+        feedTable.value.data.push(feed);
-            ...feed,
-            uid: crypto.randomUUID()
-        });
         sweepFeed();
         UiStore.notifyMenu('feed');
     }

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 { table, pagination } = useVrcxVueTable({
-    const expanded = ref({});
-    const pagination = ref({
-        pageIndex: 0,
-        pageSize: pageSize.value
-    });
-
-    const table = useVueTable({
         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(),
+        initialSorting: [],
-        getPaginationRowModel: getPaginationRowModel(),
+        initialExpanded: {},
-        getSortedRowModel: getSortedRowModel(),
+        initialPagination: {
-        getFilteredRowModel: getFilteredRowModel(),
+            pageIndex: 0,
-        getExpandedRowModel: getExpandedRowModel(),
+            pageSize: pageSize.value
-        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;
-            }
         }
     });
 

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: {
+        size: 140,
-            class: 'w-[140px]'
-        },
         header: ({ column }) => (
             <Button
                 variant="ghost"
@@ -258,9 +258,7 @@ export const columns = [
     },
     {
         accessorKey: 'type',
-        meta: {
+        size: 130,
-            class: 'w-[130px]'
-        },
         header: () => t('table.feed.type'),
         cell: ({ row }) => {
             const type = row.getValue('type');
@@ -275,9 +273,7 @@ export const columns = [
     },
     {
         accessorKey: 'displayName',
-        meta: {
+        size: 190,
-            class: 'w-[190px]'
-        },
         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;

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

src/views/FriendLog/columns.jsx

@@ -24,16 +24,14 @@ export const createColumns = ({ onDelete, onDeletePrompt }) => {
             id: 'spacer',
             header: () => null,
             enableSorting: false,
-            meta: {
+            size: 20,
-                class: 'w-[20px]'
+            minSize: 0,
-            },
+            maxSize: 20,
             cell: () => null
         },
         {
             accessorKey: 'created_at',
-            meta: {
+            size: 90,
-                class: 'w-[90px]'
-            },
             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: {
+            size: 260,
-                class: 'w-[260px]'
+            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: {
+            enableResizing: false,
-                class: 'w-[5px]'
+            size: 5,
-            },
             cell: () => null
         }
     ];

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

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: {
+            size: 20,
-                class: 'w-[20px]'
+            minSize: 0,
-            },
+            maxSize: 20,
             cell: () => null
         },
         {
             accessorFn: (row) => getCreatedAt(row),
             id: 'created_at',
-            meta: {
+            size: 140,
-                class: 'w-[140px]'
-            },
             header: ({ column }) => (
                 <Button
                     variant="ghost"
@@ -84,9 +80,7 @@ export const createColumns = ({ getCreatedAt, onDelete, onDeletePrompt }) => {
         },
         {
             accessorKey: 'type',
-            meta: {
+            size: 150,
-                class: 'w-[150px]'
-            },
             header: () => t('table.gameLog.type'),
             cell: ({ row }) => {
                 const original = row.original;
@@ -110,9 +104,7 @@ export const createColumns = ({ getCreatedAt, onDelete, onDeletePrompt }) => {
         },
         {
             accessorKey: 'displayName',
-            meta: {
+            size: 200,
-                class: 'w-[200px]'
-            },
             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 }) => {

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

src/views/Moderation/columns.jsx

@@ -25,16 +25,14 @@ export const createColumns = ({ onDelete, onDeletePrompt }) => {
             id: 'spacer',
             header: () => null,
             enableSorting: false,
-            meta: {
+            size: 20,
-                class: 'w-[20px]'
+            minSize: 0,
-            },
+            maxSize: 20,
             cell: () => null
         },
         {
             accessorKey: 'created',
-            meta: {
+            size: 90,
-                class: 'w-[90px]'
-            },
             header: ({ column }) => (
                 <Button
                     variant="ghost"
@@ -67,9 +65,7 @@ export const createColumns = ({ onDelete, onDeletePrompt }) => {
         },
         {
             accessorKey: 'type',
-            meta: {
+            size: 90,
-                class: 'w-[80px]'
-            },
             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: {
+            enableResizing: false,
-                class: 'w-[5px]'
+            size: 5,
-            },
             cell: () => null
         }
     ];

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

src/views/Notifications/columns.jsx

@@ -84,9 +84,7 @@ export const createColumns = ({
         {
             accessorFn: (row) => getNotificationCreatedAtTs(row),
             id: 'created_at',
-            meta: {
+            size: 120,
-                class: 'w-[120px]'
-            },
             header: ({ column }) => (
                 <Button
                     variant="ghost"
@@ -136,9 +134,7 @@ export const createColumns = ({
         },
         {
             accessorKey: 'type',
-            meta: {
+            size: 180,
-                class: 'w-[180px]'
-            },
             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: {
+            enableResizing: false,
-                class: 'w-[80px]'
+            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: {
+            enableResizing: false,
-                class: 'w-[5px]'
+            size: 5,
-            },
             cell: () => null
         }
     ];

src/views/PlayerList/PlayerList.vue

@@ -168,8 +168,7 @@
 </template>
 
 <script setup>
-    import { computed, defineAsyncComponent, onActivated, onMounted, ref, watch } from 'vue';
+    import { computed, defineAsyncComponent, ref, watch } from 'vue';
-    import { getCoreRowModel, getPaginationRowModel, getSortedRowModel, useVueTable } from '@tanstack/vue-table';
     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 initialColumnPinning = {
-    const pagination = ref({
-        pageIndex: 0,
-        pageSize: 500
-    });
-
-    const columnPinning = ref({
         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(),
+        enablePinning: true,
-        getPaginationRowModel: getPaginationRowModel(),
+        initialColumnPinning,
-        getSortedRowModel: getSortedRowModel(),
+        initialPagination: {
-        onSortingChange: (updaterOrValue) => valueUpdater(updaterOrValue, sorting),
+            pageIndex: 0,
-        onPaginationChange: (updaterOrValue) => valueUpdater(updaterOrValue, pagination),
+            pageSize: 500
-        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
         }
     });
 

src/views/PlayerList/columns.jsx

@@ -66,9 +66,7 @@ export const createColumns = ({
             header: () => t('table.playerList.avatar'),
             size: 70,
             enableSorting: false,
-            meta: {
+            enableResizing: false,
-                class: 'w-[70px]'
-            },
             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: {
+            enableResizing: false,
-                class: 'w-[90px]'
-            },
             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,
+            size: 150,
-            enableSorting: false,
+            minSize: 40,
             meta: {
-                class: 'w-[150px]'
+                stretch: true
             },
+            enableSorting: false,
             cell: ({ row }) => {
                 const note = row.original?.ref?.note;
                 const text =