custom col widths

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

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