custom col widths

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
         }
     });
 

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 }) => {