Simplify table header definition

Deltares · Nov 7, 2024 · 818ab33 · 818ab33
1 parent 6b99ae7
commit 818ab33
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 15 deletions.
diff --git a/src/components/table/TimeSeriesTable.vue b/src/components/table/TimeSeriesTable.vue
@@ -20,14 +20,19 @@
         <tr>
           <template v-for="(column, index) in columns" :key="column.key">
             <th
-              :class="[
-                (column as unknown as TableHeaders).class,
-                {
-                  'table-header--editing': isEditingTimeSeries(
-                    column.key as string,
-                  ),
-                },
-              ]"
+              v-if="column.key === 'date'"
+              class="table-date sticky-column mb-4"
+            >
+              <span>{{ column.title }}</span>
+            </th>
+            <th
+              v-else
+              class="table-header"
+              :class="{
+                'table-header--editing': isEditingTimeSeries(
+                  column.key as string,
+                ),
+              }"
             >
               <div class="table-header-indicator">
                 <div class="table-header-indicator-text">
@@ -119,7 +124,7 @@
           :class="{ highlighted: selected?.date === item.date }"
           @click="(e) => handleRowClick(e, item)"
         >
-          <td class="sticky-column">
+          <td class="table-date sticky-column">
             <v-text-field
               v-if="isEditing && item.isNewRow"
               :modelValue="toISOString(item.date)"
@@ -482,22 +487,28 @@ function onUpdateItem(event: TableData) {
   width: 100%;
 }
 
-.date-header {
+th.table-date {
+  vertical-align: top;
   min-width: 24ch;
   width: 24ch;
+  border-right: thin solid rgba(var(--v-border-color), var(--v-border-opacity));
+  align-items: center;
 }
 
 th.sticky-column {
   position: sticky;
-  border-right: thin solid rgba(var(--v-border-color), var(--v-border-opacity));
   left: 0;
 }
 
+td.table-date {
+  border-right: thin solid rgba(var(--v-border-color), var(--v-border-opacity));
+  align-items: center;
+}
+
 td.sticky-column {
   position: sticky;
   left: 0;
   background-color: rgb(var(--v-theme-surface));
-  border-right: thin solid rgba(var(--v-border-color), var(--v-border-opacity));
 }
 
 :deep(.v-select .v-select__selection-text) {

diff --git a/src/lib/table/createTableHeaders.ts b/src/lib/table/createTableHeaders.ts
@@ -10,7 +10,6 @@ export function createTableHeaders(
   tableHeaders.push({
     key: 'date',
     title: 'Date',
-    class: 'table-header sticky-column date-header',
     editable: false,
   })
   seriesIds.forEach((seriesId) => {
@@ -20,7 +19,6 @@ export function createTableHeaders(
         key: chartSeries.id,
         title: formatHeader(chartSeries),
         color: chartSeries.style.stroke?.toString(),
-        class: 'table-header',
         editable: true,
       })
     }

diff --git a/src/lib/table/types/TableHeaders.ts b/src/lib/table/types/TableHeaders.ts
@@ -4,6 +4,5 @@ type ReadonlyDataTableHeader = (typeof VDataTable)['headers']
 
 export interface TableHeaders extends ReadonlyDataTableHeader {
   color?: string
-  class?: string
   editable: boolean
 }