fix(ktable): resized column choppiness (#2139)

* fix(ktable): resized column choppiness * chore(sandbox): hidable table column * fix(ktable): minor fix
Kong · Jun 15, 2024 · 76ad562 · 76ad562
1 parent 2d8a492
commit 76ad562
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 21 deletions.
diff --git a/sandbox/pages/SandboxTable.vue b/sandbox/pages/SandboxTable.vue
@@ -21,9 +21,9 @@
         :fetcher="fetcher"
         :has-error="tableErrorState"
         :headers="[
-          { key: 'name', label: 'Name' },
+          { key: 'name', label: 'Full Name' },
           { key: 'username', label: 'Username' },
-          { key: 'email', label: 'Email' },
+          { key: 'email', label: 'Email', hidable: true },
           { key: 'actions', hideLabel: true }
         ]"
         :initial-fetcher-params="{

diff --git a/src/components/KTable/KTable.vue b/src/components/KTable/KTable.vue
@@ -120,16 +120,19 @@
                 @mouseleave="currentHoveredColumn = ''"
                 @mouseover="currentHoveredColumn = column.key"
               >
-                <div class="k-table-headers-container">
-                  <div
-                    v-if="resizeColumns && index !== 0"
-                    class="resize-handle previous"
-                    @click.stop
-                    @mousedown="startResize($event, visibleHeaders[index - 1].key)"
-                    @mouseleave="resizerHoveredColumn = ''"
-                    @mouseover="resizerHoveredColumn = visibleHeaders[index - 1].key"
-                  />
-
+                <div
+                  v-if="resizeColumns && index !== 0"
+                  class="resize-handle previous"
+                  @click.stop
+                  @mousedown="startResize($event, visibleHeaders[index - 1].key)"
+                  @mouseleave="resizerHoveredColumn = ''"
+                  @mouseover="resizerHoveredColumn = visibleHeaders[index - 1].key"
+                />
+
+                <div
+                  class="k-table-headers-container"
+                  :class="{ 'resized': resizingColumn === column.key }"
+                >
                   <slot
                     :column="getGeneric(column)"
                     :name="getColumnSlotName(column.key)"
@@ -152,16 +155,16 @@
                     icon="chevronDown"
                     :size="KUI_ICON_SIZE_20"
                   />
-
-                  <div
-                    v-if="resizeColumns && index !== visibleHeaders.length - 1"
-                    class="resize-handle"
-                    @click.stop
-                    @mousedown="startResize($event, column.key)"
-                    @mouseleave="resizerHoveredColumn = ''"
-                    @mouseover="resizerHoveredColumn = column.key"
-                  />
                 </div>
+
+                <div
+                  v-if="resizeColumns && index !== visibleHeaders.length - 1"
+                  class="resize-handle"
+                  @click.stop
+                  @mousedown="startResize($event, column.key)"
+                  @mouseleave="resizerHoveredColumn = ''"
+                  @mouseover="resizerHoveredColumn = column.key"
+                />
               </th>
             </tr>
           </thead>
@@ -1173,6 +1176,11 @@ export const defaultSorter = (key: string, previousKey: string, sortOrder: strin
 </script>
 
 <style lang="scss" scoped>
+/* Component variables */
+
+$kTableThPaddingBottom: var(--kui-space-60, $kui-space-60);
+
+/* Component styles */
 
 .k-table-wrapper {
   overflow: auto;
@@ -1261,7 +1269,9 @@ export const defaultSorter = (key: string, previousKey: string, sortOrder: strin
       font-size: var(--kui-font-size-30, $kui-font-size-30);
       font-weight: var(--kui-font-weight-semibold, $kui-font-weight-semibold);
       padding: var(--kui-space-50, $kui-space-50) var(--kui-space-60, $kui-space-60);
+      padding-bottom: $kTableThPaddingBottom;
       text-align: left;
+      vertical-align: bottom;
 
       &.resizable {
         min-width: 40px;
@@ -1309,6 +1319,11 @@ export const defaultSorter = (key: string, previousKey: string, sortOrder: strin
         .caret {
           margin-left: var(--kui-space-40, $kui-space-40) !important;
         }
+
+        &.resized {
+          bottom: $kTableThPaddingBottom;
+          position: absolute;
+        }
       }
     }
   }