From c448c49d2be04f164789ee5d1e321dc6912522f4 Mon Sep 17 00:00:00 2001
From: Kai Arrowood <kai.arrowood@konghq.com>
Date: Thu, 4 Apr 2024 11:11:36 -0400
Subject: [PATCH] feat(ktable): add column resize support [khcp-11161] (#2105)

Add column resize support to `KTable` for [KHCP-11161](https://konghq.atlassian.net/browse/KHCP-11161).
---
 docs/components/table.md           |  21 +-
 sandbox/pages/SandboxTable.vue     |   1 +
 src/components/KTable/KTable.cy.ts |  18 +-
 src/components/KTable/KTable.vue   | 377 ++++++++++++++++++++++-------
 src/types/table.ts                 |   2 +
 5 files changed, 331 insertions(+), 88 deletions(-)

diff --git a/docs/components/table.md b/docs/components/table.md
index 54962a0f68..4c02ef8f9d 100644
--- a/docs/components/table.md
+++ b/docs/components/table.md
@@ -43,6 +43,16 @@ See [the State section](#error) about `hasError`
 
 See [the State section](#loading) about `isLoading`
 
+### resizeColumns
+
+Allow table column width to be resizable. Adjusting a column's width will trigger an `@update:table-preferences` event.
+
+<KTable :fetcher="tableOptionsFetcher" :headers="resizeHeaders" resize-columns />
+
+```html
+  <KTable :fetcher="fetcher" :headers="headers" resize-columns />
+```
+
 ### disablePaginationPageJump
 
 Set this to `true` to limit pagination navigation to `previous` / `next` page only.
@@ -749,7 +759,7 @@ Using a `KPop` inside of a clickable row requires some special handling. Non-cli
   <template v-slot:other>
     <div>
       <KPop title="Cool header">
-        <KButton>
+        <KButton appearance="tertiary">
           <template #icon>
             <KIcon
               icon="more"
@@ -782,7 +792,7 @@ Using a `KPop` inside of a clickable row requires some special handling. Non-cli
   <template v-slot:other>
     <div>
       <KPop title="Cool header">
-        <KButton>
+        <KButton appearance="tertiary">
           <template #icon>
             <KIcon
               icon="more"
@@ -910,6 +920,8 @@ interface TablePreferences {
   sortColumnKey?: string
   /** The order by which to sort the column, one of `asc` or `desc` */
   sortColumnOrder?: 'asc' | 'desc'
+  /** The customized column widths, if resizing is allowed */
+  columnWidths?: Record<string, number>
 }
 ```
 
@@ -1590,6 +1602,11 @@ export default defineComponent({
         { label: 'Description', key: 'description', sortable: true },
         { label: 'Enabled', key: 'enabled', sortable: false }
       ],
+      resizeHeaders: [
+        { label: 'Name', key: 'name' },
+        { label: 'ID', key: 'id' },
+        { label: 'Enabled', key: 'enabled' },
+      ],
       tableOptionsHeaders: [
         { label: 'Name', key: 'name' },
         { label: 'ID', key: 'id' },
diff --git a/sandbox/pages/SandboxTable.vue b/sandbox/pages/SandboxTable.vue
index 7d9801fc04..3d680df0cc 100644
--- a/sandbox/pages/SandboxTable.vue
+++ b/sandbox/pages/SandboxTable.vue
@@ -29,6 +29,7 @@
         :initial-fetcher-params="{
           pageSize: 30
         }"
+        resize-columns
       >
         <template #actions>
           <KDropdown>
diff --git a/src/components/KTable/KTable.cy.ts b/src/components/KTable/KTable.cy.ts
index 3dba9bc33c..380beaf603 100644
--- a/src/components/KTable/KTable.cy.ts
+++ b/src/components/KTable/KTable.cy.ts
@@ -237,6 +237,20 @@ describe('KTable', () => {
 
       cy.get('.k-table').should('have.class', 'has-hover')
     })
+
+    it('renders column resize toggles when resizeColumns is set', () => {
+      mount(KTable, {
+        props: {
+          testMode: 'true',
+          headers: options.headers,
+          fetcher: () => { return { data: options.data } },
+          resizeColumns: true,
+        },
+      })
+
+      cy.get('.k-table').find('th.resizable').should('be.visible')
+      cy.get('.resize-handle').should('exist')
+    })
   })
 
   describe('data revalidates and changes as expected', () => {
@@ -276,7 +290,6 @@ describe('KTable', () => {
           fetcher: offsetPaginationFetcher,
           isLoading: false,
           headers: offsetPaginationHeaders,
-          offset: true,
         },
       })
 
@@ -570,7 +583,6 @@ describe('KTable', () => {
           paginationPageSizes: [10, 15, 20],
           hidePaginationWhenOptional: true,
           initialFetcherParams: { offset: null },
-          offset: true,
           cacheIdentifier: 'offset-pagination',
         },
       })
@@ -590,7 +602,6 @@ describe('KTable', () => {
           headers: options.headers,
           paginationPageSizes: [10, 15, 20],
           hidePaginationWhenOptional: true,
-          offset: true,
         },
       })
 
@@ -617,7 +628,6 @@ describe('KTable', () => {
           headers: options.headers,
           paginationPageSizes: [10, 15, 20],
           hidePaginationWhenOptional: true,
-          offset: true,
           searchInput: '',
           cacheIdentifier: 'search-example',
         },
diff --git a/src/components/KTable/KTable.vue b/src/components/KTable/KTable.vue
index 32de3168b5..75b66749c1 100644
--- a/src/components/KTable/KTable.vue
+++ b/src/components/KTable/KTable.vue
@@ -73,90 +73,125 @@
       </slot>
     </div>
 
-    <section
-      v-else
-      class="k-table-wrapper"
-      @scroll.passive="scrollHandler"
-    >
-      <table
-        class="k-table"
-        :class="{'has-hover': hasHover, 'is-clickable': isClickable, 'side-border': hasSideBorder}"
-        :data-tableid="tableId"
+    <div v-else>
+      <div
+        class="k-table-wrapper"
+        @scroll.passive="scrollHandler"
       >
-        <thead :class="{ 'is-scrolled': isScrolled }">
-          <tr :class="{ 'is-scrolled': isScrolled }">
-            <th
-              v-for="(column, index) in tableHeaders"
-              :key="`k-table-${tableId}-headers-${index}`"
-              :aria-sort="!disableSorting && column.key === sortColumnKey ? (sortColumnOrder === 'asc' ? 'ascending' : 'descending') : undefined"
-              class="k-table-headers"
-              :class="{
-                'sortable': !disableSorting && !column.hideLabel && column.sortable,
-                'active-sort': !disableSorting && !column.hideLabel && column.sortable && column.key === sortColumnKey,
-                [sortColumnOrder]: !disableSorting && column.key === sortColumnKey && !column.hideLabel,
-                'is-scrolled': isScrolled
-              }"
-              @click="() => {
-                if (!disableSorting && column.sortable) {
-                  $emit('sort', {
-                    prevKey: sortColumnKey,
-                    sortColumnKey: column.key,
-                    sortColumnOrder: sortColumnOrder === 'asc' ? 'desc' : 'asc' // display opposite because sortColumnOrder outdated
-                  })
-                  sortClickHandler(column)
-                }
-              }"
+        <table
+          class="k-table"
+          :class="{
+            'has-hover': hasHover,
+            'is-clickable': isClickable,
+            'side-border': hasSideBorder
+          }"
+          :data-tableid="tableId"
+        >
+          <thead :class="{ 'is-scrolled': isScrolled }">
+            <tr
+              ref="headerRow"
+              :class="{ 'is-scrolled': isScrolled }"
             >
-              <span class="k-table-headers-container">
+              <th
+                v-for="(column, index) in tableHeaders"
+                :key="`k-table-${tableId}-headers-${index}`"
+                :aria-sort="!disableSorting && column.key === sortColumnKey ? (sortColumnOrder === 'asc' ? 'ascending' : 'descending') : undefined"
+                class="k-table-headers"
+                :class="getHeaderClasses(column, index)"
+                :data-testid="`k-table-header-${column.key}`"
+                :style="columnStyles[column.key]"
+                @click="() => {
+                  if (!disableSorting && column.sortable) {
+                    $emit('sort', {
+                      prevKey: sortColumnKey,
+                      sortColumnKey: column.key,
+                      sortColumnOrder: sortColumnOrder === 'asc' ? 'desc' : 'asc' // display opposite because sortColumnOrder outdated
+                    })
+                    sortClickHandler(column)
+                  }
+                }"
+                @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, tableHeaders[index - 1].key)"
+                    @mouseleave="resizerHoveredColumn = ''"
+                    @mouseover="resizerHoveredColumn = tableHeaders[index - 1].key"
+                  />
+
+                  <slot
+                    :column="getGeneric(column)"
+                    :name="getColumnSlotName(column.key)"
+                  >
+                    <span
+                      :class="{
+                        'sr-only': column.hideLabel,
+                        'truncated-column': resizeColumns,
+                      }"
+                    >
+                      {{ column.label ? column.label : column.key }}
+                    </span>
+                  </slot>
+
+                  <KIcon
+                    v-if="!disableSorting && !column.hideLabel && column.sortable"
+                    aria-hidden="true"
+                    class="caret"
+                    :color="`var(--kui-color-text, ${KUI_COLOR_TEXT})`"
+                    icon="chevronDown"
+                    :size="KUI_ICON_SIZE_20"
+                  />
+
+                  <div
+                    v-if="resizeColumns && index !== tableHeaders.length - 1"
+                    class="resize-handle"
+                    @click.stop
+                    @mousedown="startResize($event, column.key)"
+                    @mouseleave="resizerHoveredColumn = ''"
+                    @mouseover="resizerHoveredColumn = column.key"
+                  />
+                </div>
+              </th>
+            </tr>
+          </thead>
+
+          <tbody>
+            <tr
+              v-for="(row, rowIndex) in data"
+              v-bind="rowAttrs(row)"
+              :key="`k-table-${tableId}-row-${rowIndex}`"
+              :role="isClickable ? 'link' : null"
+              :tabindex="isClickable ? 0 : null"
+              v-on="hasSideBorder ? tdlisteners(row, row) : {}"
+            >
+              <td
+                v-for="(value, index) in tableHeaders"
+                v-bind="cellAttrs({ headerKey: value.key, row, rowIndex, colIndex: index })"
+                :key="`k-table-${tableId}-cell-${index}`"
+                :class="{
+                  'resize-hover': resizeColumns && resizeHoverColumn === value.key && index !== tableHeaders.length - 1,
+                  'truncated-column': resizeColumns
+                }"
+                :style="columnStyles[value.key]"
+                v-on="tdlisteners(row[value.key], row)"
+              >
                 <slot
-                  :column="getGeneric(column)"
-                  :name="getColumnSlotName(column.key)"
+                  :name="value.key"
+                  :row="getGeneric(row)"
+                  :row-key="rowIndex"
+                  :row-value="row[value.key]"
                 >
-                  <span :class="{'sr-only': column.hideLabel}">
-                    {{ column.label ? column.label : column.key }}
-                  </span>
+                  {{ row[value.key] }}
                 </slot>
-
-                <KIcon
-                  v-if="!disableSorting && !column.hideLabel && column.sortable"
-                  aria-hidden="true"
-                  class="caret"
-                  :color="`var(--kui-color-text, ${KUI_COLOR_TEXT})`"
-                  icon="chevronDown"
-                  :size="KUI_ICON_SIZE_20"
-                />
-              </span>
-            </th>
-          </tr>
-        </thead>
-
-        <tbody>
-          <tr
-            v-for="(row, rowIndex) in data"
-            v-bind="rowAttrs(row)"
-            :key="`k-table-${tableId}-row-${rowIndex}`"
-            :role="isClickable ? 'link' : null"
-            :tabindex="isClickable ? 0 : null"
-            v-on="hasSideBorder ? tdlisteners(row, row) : {}"
-          >
-            <td
-              v-for="(value, index) in tableHeaders"
-              v-bind="cellAttrs({ headerKey: value.key, row, rowIndex, colIndex: index })"
-              :key="`k-table-${tableId}-cell-${index}`"
-              v-on="tdlisteners(row[value.key], row)"
-            >
-              <slot
-                :name="value.key"
-                :row="getGeneric(row)"
-                :row-key="rowIndex"
-                :row-value="row[value.key]"
-              >
-                {{ row[value.key] }}
-              </slot>
-            </td>
-          </tr>
-        </tbody>
-      </table>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
 
       <KPagination
         v-if="shouldShowPagination"
@@ -177,7 +212,7 @@
         @page-change="pageChangeHandler"
         @page-size-change="pageSizeChangeHandler"
       />
-    </section>
+    </div>
   </div>
 </template>
 
@@ -231,6 +266,13 @@ const props = defineProps({
     default: () => null,
     required: false,
   },
+  /**
+   * Allow columns to be resized
+   */
+  resizeColumns: {
+    type: Boolean,
+    default: false,
+  },
   /**
    * Enable client side sort - only do this if using a fetcher
    * that returns static data
@@ -509,7 +551,14 @@ const defaultFetcherProps = {
   offset: null,
 }
 const data = ref<Record<string, any>[]>([])
+const headerRow = ref<HTMLDivElement>()
 const tableHeaders: Ref<TableHeader[]> = ref([])
+// highest priority - column currently being resized (mouse may be completely outside the column)
+const resizingColumn = ref('')
+// column the user is currently hovering over the resize handle for (may be hovered on the adjacent column to what we want to resize)
+const resizerHoveredColumn = ref('')
+// lowest priority - currently hovered resizable column (mouse is somewhere in the <th>)
+const currentHoveredColumn = ref('')
 const total = ref(0)
 const isScrolled = ref(false)
 const page = ref(1)
@@ -632,6 +681,133 @@ const tdlisteners = computed((): any => {
   }
 })
 
+const columnWidths = ref<Record<string, number>>({})
+const columnStyles = computed(() => {
+  const styles: Record<string, any> = {}
+  for (const colKey in columnWidths.value) {
+    // no width set
+    if (!columnWidths.value[colKey]) {
+      continue
+    }
+    const width = columnWidths.value[colKey] + 'px'
+    styles[colKey] = {
+      width,
+      maxWidth: width,
+      minWidth: width,
+    }
+  }
+  return styles
+})
+
+const getHeaderClasses = (column: TableHeader, index: number): Record<string, boolean> => {
+  return {
+    // display the resize handle on the right side of the column if resizeColumns is enabled, hovering current column, and not the last column
+    'resize-hover': resizeHoverColumn.value === column.key && props.resizeColumns && index !== tableHeaders.value.length - 1,
+    'truncated-column resizable': props.resizeColumns,
+    // display sort control if column is sortable, label is visible, and sorting is not disabled
+    sortable: !props.disableSorting && !column.hideLabel && !!column.sortable,
+    // display active sorting styles if column is currently sorted
+    'active-sort': !props.disableSorting && !column.hideLabel && !!column.sortable && column.key === sortColumnKey.value,
+    [sortColumnOrder.value]: !props.disableSorting && column.key === sortColumnKey.value && !column.hideLabel,
+    'is-scrolled': isScrolled.value,
+  }
+}
+
+/**
+ * We have to track the state of all three hover events because
+ * they have differing priorities that can have clashing styles.
+ */
+const resizerHoverState = computed((): string => {
+  if (resizingColumn.value) {
+    // highest priority - resize event in progress, mouse may be completely outside of the column
+    return 'resizing'
+  } else if (resizerHoveredColumn.value) {
+    // hovered over a column resize handle (may need to trigger styles on the adjacent column instead of the current)
+    return 'resize-hover'
+  } else if (currentHoveredColumn.value) {
+    // lowest priority - hovered somewhere in the <th> of a resizable column
+    return 'th-hover'
+  }
+
+  return ''
+})
+
+const resizeHoverColumn = computed((): string => {
+  switch (resizerHoverState.value) {
+    case 'resizing':
+      return resizingColumn.value
+    case 'resize-hover':
+      return resizerHoveredColumn.value
+    case 'th-hover':
+      return currentHoveredColumn.value
+    default:
+      return ''
+  }
+})
+
+// get the resizable header divs to be used for the resize observers
+const headerElems = computed((): NodeListOf<Element> | undefined => headerRow.value?.querySelectorAll('th.resizable'))
+const headerHeight = computed((): string => {
+  const elem = headerElems.value?.item(0)
+  if (elem) {
+    const styles = window.getComputedStyle(elem)
+
+    if (styles.height) {
+      return `${parseInt(styles.height, 10)}px`
+    }
+  }
+
+  return 'auto'
+})
+
+const startResize = (evt: MouseEvent, colKey: string) => {
+  let x = 0
+  let width = 0
+
+  resizingColumn.value = colKey
+
+  // get the current column's element
+  let col: HTMLElement | null = null
+  headerElems.value?.forEach((elem) => {
+    if (elem.getAttribute('data-testid') === `k-table-header-${colKey}`) {
+      col = document.querySelector(`[data-tableid="${tableId.value}"] [data-testid="k-table-header-${colKey}"]`)
+    }
+  })
+
+  // resize in progress
+  const mouseMoveHandler = (e: MouseEvent): void => {
+    // distance mouse has moved
+    const dx = e.clientX - x
+
+    // Update column width to match
+    col?.setAttribute('style', `width: ${width + dx}px`)
+    columnWidths.value[colKey] = width + dx
+  }
+
+  // done resizing
+  const mouseUpHandler = (): void => {
+    resizingColumn.value = ''
+    document?.removeEventListener('mousemove', mouseMoveHandler)
+    document?.removeEventListener('mouseup', mouseUpHandler)
+    emitTablePreferences()
+  }
+
+  // get mouse position
+  x = evt.clientX
+
+  if (col) {
+    // set current column's width
+    const styles = window.getComputedStyle(col)
+    if (styles.width) {
+      width = parseInt(styles.width, 10)
+    }
+
+    // event listeners for resizing
+    document?.addEventListener('mousemove', mouseMoveHandler)
+    document?.addEventListener('mouseup', mouseUpHandler)
+  }
+}
+
 const isInitialFetch = ref(true)
 const fetchData = async () => {
   const searchInput = props.searchInput
@@ -830,6 +1006,7 @@ const tablePreferences = computed((): TablePreferences => ({
   pageSize: pageSize.value,
   sortColumnKey: sortColumnKey.value,
   sortColumnOrder: sortColumnOrder.value as 'asc' | 'desc',
+  ...(props.resizeColumns ? { columnWidths: columnWidths.value } : {}),
 }))
 
 const emitTablePreferences = (): void => {
@@ -954,7 +1131,6 @@ export const defaultSorter = (key: string, previousKey: string, sortOrder: strin
 </script>
 
 <style lang="scss" scoped>
-@import '@/styles/tmp-variables';
 
 .k-table-wrapper {
   overflow: auto;
@@ -982,6 +1158,20 @@ export const defaultSorter = (key: string, previousKey: string, sortOrder: strin
     white-space: nowrap;
   }
 
+  th.resize-hover {
+    // creates a 2px "border" on the right - can't use the border because it will "jump"
+    box-shadow: calc(-1 * var(--kui-border-width-20, $kui-border-width-20)) 0 0 0 var(--kui-color-border-decorative-purple, $kui-color-border-decorative-purple) inset;
+  }
+
+  td.resize-hover {
+    // creates a 2px "border" on the right - can't use the border because it will "jump"
+    box-shadow: calc(-1 * var(--kui-border-width-20, $kui-border-width-20)) 0 0 0 var(--kui-color-border, $kui-color-border) inset;
+  }
+
+  .truncated-column {
+    @include truncate;
+  }
+
   thead {
     background-color: var(--kui-color-background, $kui-color-background);
     border-bottom: var(--kui-border-width-10, $kui-border-width-10) solid var(--kui-color-border, $kui-color-border);
@@ -1028,6 +1218,25 @@ export const defaultSorter = (key: string, previousKey: string, sortOrder: strin
       padding: var(--kui-space-50, $kui-space-50) var(--kui-space-60, $kui-space-60);
       text-align: left;
 
+      &.resizable {
+        min-width: 40px;
+        position: relative;
+
+        .resize-handle {
+          cursor: col-resize;
+          height: v-bind('headerHeight');
+          position: absolute;
+          right: 0;
+          top: 0;
+          width: 6px;
+
+          &.previous {
+            left: 0;
+            right: unset;
+          }
+        }
+      }
+
       &.active-sort {
         color: var(--kui-color-text-primary, $kui-color-text-primary);
       }
@@ -1084,8 +1293,12 @@ export const defaultSorter = (key: string, previousKey: string, sortOrder: strin
 
   // Variants
   &.has-hover {
-     tbody tr:hover {
+    tbody tr:hover {
       background-color: var(--kui-color-background-primary-weakest, $kui-color-background-primary-weakest);
+
+      td {
+        border-color: var(--kui-color-border-primary-weakest, $kui-color-border-primary-weakest);
+      }
     }
   }
 
diff --git a/src/types/table.ts b/src/types/table.ts
index 1d0568d0b7..dfa1830f08 100644
--- a/src/types/table.ts
+++ b/src/types/table.ts
@@ -9,6 +9,8 @@ export interface TablePreferences {
   sortColumnKey?: string
   /** The order by which to sort the column, one of `asc` or `desc` */
   sortColumnOrder?: SortColumnOrder
+  /** The customized column widths, if resizing is allowed */
+  columnWidths?: Record<string, number>
 }
 
 export const TablePaginationTypeArray = ['default', 'offset'] as const