Add minimum resizable column width based on header content (#1444)

Author: BenjaminCharmes

webapp/src/components/DynamicDataTable.vue

@@ -74,7 +74,12 @@
       </template>
       <template #empty> No entries found. </template>
 
-      <Column v-if="showButtons" class="checkbox" selection-mode="multiple"></Column>
+      <Column
+        v-if="showButtons"
+        class="checkbox"
+        selection-mode="multiple"
+        :style="{ minWidth: '3.5ch' }"
+      ></Column>
 
       <!-- <Column expander style="width: 5rem" /> -->
       <Column
@@ -83,6 +88,7 @@
         :field="column.field"
         sortable
         :class="{ 'filter-active': isFilterActive(column.field) }"
+        :style="{ minWidth: getColumnMinWidth(column) }"
         :filter-menu-class="column.field === 'type' || column.field === 'date' ? 'no-operator' : ''"
       >
         <template #header>
@@ -431,6 +437,7 @@ export default {
       ],
     };
   },
+
   computed: {
     rows() {
       return this.$store.state.datatablePaginationSettings[this.dataType].rows;
@@ -619,6 +626,32 @@ export default {
     });
   },
   methods: {
+    getColumnMinWidth(column) {
+      const COLUMN_BASE_PADDING = 2.5;
+      const CHAR_WIDTH_ESTIMATE = 0.75;
+      const SORT_ICON_SPACE = 2.5;
+      const FILTER_BUTTON_WIDTH = 3.5;
+      const HEADER_ICON_SPACE = 2.5;
+      const MIN_COLUMN_WIDTH = 10;
+
+      let minWidth = COLUMN_BASE_PADDING;
+
+      if (column.header) {
+        minWidth += column.header.length * CHAR_WIDTH_ESTIMATE;
+      }
+
+      if (column.icon) {
+        minWidth += HEADER_ICON_SPACE;
+      }
+
+      minWidth += SORT_ICON_SPACE;
+
+      if (column.filter) {
+        minWidth += FILTER_BUTTON_WIDTH;
+      }
+
+      return Math.max(minWidth, MIN_COLUMN_WIDTH) + "ch";
+    },
     onSort(event) {
       const sortedColumns = event.multiSortMeta || [];