feat: persist column size prefs

Author: pujitm

web/eslint.config.mjs

@@ -71,7 +71,7 @@ const vueRules = {
   'vue/no-unsupported-features': [
     'error',
     {
-      version: '^3.3.0',
+      version: '^3.4.0',
     },
   ],
   'vue/no-unused-properties': [

web/src/components/Common/BaseTreeTable.vue

@@ -54,6 +54,7 @@ interface Props {
   canDrag?: (row: TreeRow<T>) => boolean;
   canDropInside?: (row: TreeRow<T>) => boolean;
   enableResizing?: boolean;
+  columnSizing?: Record<string, number>;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -67,6 +68,7 @@ const props = withDefaults(defineProps<Props>(), {
   // searchableKeys default removed, will handle in getter if needed or empty
   includeMetaInSearch: true,
   enableResizing: false,
+  columnSizing: () => ({}),
 });
 
 const emit = defineEmits<{
@@ -81,6 +83,7 @@ const emit = defineEmits<{
   ): void;
   (e: 'row:drop', payload: DropEvent<T>): void;
   (e: 'update:selectedIds', value: string[]): void;
+  (e: 'update:columnSizing', value: Record<string, number>): void;
 }>();
 
 const UButton = resolveComponent('UButton');
@@ -92,6 +95,8 @@ const selectedIdsRef = ref(props.selectedIds);
 const tableContainerRef = ref<HTMLElement | null>(null);
 const columnVisibility = ref<Record<string, boolean>>({});
 
+const columnSizing = defineModel<Record<string, number>>('columnSizing', { default: () => ({}) });
+
 type ColumnHeaderRenderer = TableColumn<TreeRow<T>>['header'];
 
 watch(
@@ -459,6 +464,7 @@ function enhanceRowInstance(row: TableInstanceRow<T>): EnhancedRow<T> {
       ref="tableRef"
       v-model:row-selection="rowSelection"
       v-model:column-visibility="columnVisibility"
+      v-model:column-sizing="columnSizing"
       :data="flattenedData"
       :columns="processedColumns"
       :get-row-id="(row: any) => row.id"

web/src/components/Docker/DockerContainersTable.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed, h, reactive, ref, resolveComponent, watch } from 'vue';
 import { useMutation, useSubscription } from '@vue/apollo-composable';
+import { useStorage } from '@vueuse/core';
 
 import BaseTreeTable from '@/components/Common/BaseTreeTable.vue';
 import MultiValueCopyBadges from '@/components/Common/MultiValueCopyBadges.vue';
@@ -207,6 +208,7 @@ const { visibleFolders, expandedFolders, toggleExpandFolder, setExpandedFolders
   flatEntries: flatEntriesRef,
 });
 const busyRowIds = ref<Set<string>>(new Set());
+const columnSizing = useStorage<Record<string, number>>('docker-table-column-sizing', {});
 
 const logs = useDockerLogSessions();
 const contextMenu = useContextMenu<DockerContainer>();
@@ -966,6 +968,7 @@ function handleSelectAllChildren(row: TreeRow<DockerContainer>) {
       :busy-row-ids="busyRowIds"
       :enable-drag-drop="!!flatEntries"
       enable-resizing
+      v-model:column-sizing="columnSizing"
       :searchable-keys="searchableKeys"
       :search-accessor="dockerSearchAccessor"
       :can-expand="(row: TreeRow<DockerContainer>) => row.type === 'folder'"