custom col widths

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

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;