Set min width and width for date table column

Deltares · Oct 1, 2024 · 98f07de · 98f07de
1 parent 197cae8
commit 98f07de
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 3 deletions.
diff --git a/src/components/table/TimeSeriesTable.vue b/src/components/table/TimeSeriesTable.vue
@@ -20,7 +20,6 @@
         <tr>
           <template v-for="(column, index) in columns" :key="column.key">
             <th
-              :style="{ minWidth: column.minWidth }"
               :class="[
                 (column as unknown as TableHeaders).class,
                 {
@@ -483,6 +482,11 @@ function onUpdateItem(event: TableData) {
   width: 100%;
 }
 
+.date-header {
+  min-width: 24ch;
+  width: 24ch;
+}
+
 th.sticky-column {
   position: sticky;
   border-right: thin solid rgba(var(--v-border-color), var(--v-border-opacity));

diff --git a/src/lib/table/createTableHeaders.ts b/src/lib/table/createTableHeaders.ts
@@ -10,8 +10,7 @@ export function createTableHeaders(
   tableHeaders.push({
     key: 'date',
     title: 'Date',
-    minWidth: '24ch',
-    class: 'table-header sticky-column',
+    class: 'table-header sticky-column date-header',
     editable: false,
   })
   seriesIds.forEach((seriesId) => {