custom col widths

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

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