From 2797fcd0c5850651d39d5cf71942110a70e8c274 Mon Sep 17 00:00:00 2001
From: connoratrug <c.stroomberg@rug.nl>
Date: Thu, 5 Mar 2026 13:57:59 +0100
Subject: [PATCH 1/6] feat: drag explorer header column edge to resize column
 width

Hover over the column edge and drag to resize column

- add composable to do size calculations
- use request animation frame to deduplicate drag events and avoid direct repaints ( performance )
- pass the container to allow calculating drag indicator line for table with dynamic content and horizontal scroll
- move column sort down to label to avoid confusion with drag
---
 .../app/components/table/TableEMX2.vue        |  44 +++++++-
 .../components/table/TableHeaderAction.vue    |  11 +-
 .../app/composables/useColumnResize.ts        |  89 +++++++++++++++
 .../composables/useColumnResize.spec.ts       | 104 ++++++++++++++++++
 4 files changed, 239 insertions(+), 9 deletions(-)
 create mode 100644 apps/tailwind-components/app/composables/useColumnResize.ts
 create mode 100644 apps/tailwind-components/tests/vitest/composables/useColumnResize.spec.ts

diff --git a/apps/tailwind-components/app/components/table/TableEMX2.vue b/apps/tailwind-components/app/components/table/TableEMX2.vue
index cac2ee45351..e59a2075507 100644
--- a/apps/tailwind-components/app/components/table/TableEMX2.vue
+++ b/apps/tailwind-components/app/components/table/TableEMX2.vue
@@ -26,8 +26,15 @@
   </div>
 
   <div
+    ref="tableContainer"
     class="relative overflow-auto overflow-y-hidden rounded-b-theme border border-theme border-color-theme"
   >
+    <div
+      v-if="guideX !== null"
+      class="absolute top-0 bottom-0 w-[2px] bg-button-primary pointer-events-none z-50"
+      :style="{ left: guideX + 'px' }"
+    />
+
     <div class="overflow-x-auto overscroll-x-contain bg-table rounded-t-3px">
       <table ref="table" class="text-left w-full table-fixed">
         <thead>
@@ -43,11 +50,17 @@
             </TableHeadCell>
             <TableHeadCell
               v-for="column in sortedVisibleColumns"
-              :class="{
-                'w-60 lg:w-full': columns.length <= 5,
-                'w-60': columns.length > 5,
-              }"
+              :style="{ width: columnWidths[column.id] + 'px' }"
+              class="relative group:"
             >
+              <div
+                class="absolute right-0 top-0 h-full w-4 cursor-col-resize group"
+                @mousedown.stop="startResize($event, column.id)"
+              >
+                <div
+                  class="absolute right-0 top-0 h-full w-[2px] bg-transparent group-hover:bg-button-primary"
+                />
+              </div>
               <TableHeaderAction
                 :column="column"
                 :schemaId="schemaId"
@@ -78,6 +91,7 @@
 
             <TableCellEMX2
               v-for="(column, colIndex) in sortedVisibleColumns"
+              :style="{ width: columnWidths[column.id] + 'px' }"
               class="text-table-row group-hover:bg-hover"
               :class="{
                 'w-60 lg:w-full': columns.length <= 5,
@@ -229,6 +243,7 @@ import TableControlColumns from "./control/Columns.vue";
 import TextNoResultsMessage from "../text/NoResultsMessage.vue";
 import TableHeaderAction from "./TableHeaderAction.vue";
 import DraftLabel from "../label/DraftLabel.vue";
+import { useColumnResize } from "../../composables/useColumnResize";
 
 const props = withDefaults(
   defineProps<{
@@ -252,6 +267,11 @@ const refTableColumn = ref<IRefColumn>();
 const refSourceTableId = ref<string>(props.tableId);
 const columns = ref<IColumn[]>([]);
 
+const tableContainer = ref<HTMLElement | null>(null);
+
+const { columnWidths, guideX, startResize, setInitialWidths } =
+  useColumnResize(tableContainer);
+
 const settings = defineModel<ITableSettings>("settings", {
   required: false,
   default: () => ({
@@ -286,6 +306,22 @@ const { data, refresh } = useAsyncData(
   }
 );
 
+watch(
+  () => data.value?.tableMetadata,
+  (newMetadata) => {
+    if (newMetadata) {
+      columns.value = newMetadata.columns.filter(
+        (c) =>
+          !c.id.startsWith("mg") &&
+          !["HEADING", "SECTION"].includes(c.columnType)
+      );
+
+      setInitialWidths(columns.value);
+    }
+  },
+  { immediate: true }
+);
+
 const rows = computed(() =>
   Array.isArray(data.value?.tableData?.rows) ? data.value?.tableData?.rows : []
 );
diff --git a/apps/tailwind-components/app/components/table/TableHeaderAction.vue b/apps/tailwind-components/app/components/table/TableHeaderAction.vue
index 98888adc6de..022b9088536 100644
--- a/apps/tailwind-components/app/components/table/TableHeaderAction.vue
+++ b/apps/tailwind-components/app/components/table/TableHeaderAction.vue
@@ -27,10 +27,7 @@ const emit = defineEmits<{
 }>();
 </script>
 <template>
-  <div
-    class="flex justify-start items-center gap-1 hover:cursor-pointer"
-    @click="emit('sort-requested', column.id)"
-  >
+  <div class="flex justify-start items-center gap-1">
     <button
       :id="`table-emx2-${schemaId}-${tableId}-${column.label}-sort-btn`"
       type="button"
@@ -42,7 +39,11 @@ const emit = defineEmits<{
           : 'none'
       "
     >
-      <span>{{ column.label }}</span>
+      <span
+        @click="emit('sort-requested', column.id)"
+        class="hover:cursor-pointer"
+        >{{ column.label }}</span
+      >
     </button>
     <ArrowUp
       v-if="
diff --git a/apps/tailwind-components/app/composables/useColumnResize.ts b/apps/tailwind-components/app/composables/useColumnResize.ts
new file mode 100644
index 00000000000..10ab308edd8
--- /dev/null
+++ b/apps/tailwind-components/app/composables/useColumnResize.ts
@@ -0,0 +1,89 @@
+import { ref, onBeforeUnmount, type Ref } from "vue";
+
+export function useColumnResize(container: Ref<HTMLElement | null>) {
+  const columnWidths = ref<Record<string, number>>({});
+  const guideX = ref<number | null>(null);
+
+  const resizingColumn = ref<string | null>(null);
+
+  const startX = ref(0);
+  const startWidth = ref(0);
+
+  let rafId: number | null = null;
+  let pendingX = 0;
+
+  function setInitialWidths(columns: { id: string }[], defaultWidth = 240) {
+    columns.forEach((col) => {
+      if (!columnWidths.value[col.id]) {
+        columnWidths.value[col.id] = defaultWidth;
+      }
+    });
+  }
+
+  function getRelativeX(clientX: number) {
+    const rect = container.value?.getBoundingClientRect();
+    return rect ? clientX - rect.left : clientX;
+  }
+
+  function startResize(event: MouseEvent, columnId: string) {
+    resizingColumn.value = columnId;
+
+    startX.value = event.clientX;
+    startWidth.value = columnWidths.value[columnId] ?? 240;
+
+    guideX.value = getRelativeX(event.clientX);
+
+    document.body.style.cursor = "col-resize";
+
+    window.addEventListener("mousemove", handleMouseMove);
+    window.addEventListener("mouseup", stopResize);
+  }
+
+  function handleMouseMove(event: MouseEvent) {
+    pendingX = event.clientX;
+
+    if (rafId !== null) return;
+
+    rafId = requestAnimationFrame(updateGuide);
+  }
+
+  function updateGuide() {
+    guideX.value = getRelativeX(pendingX);
+    rafId = null;
+  }
+
+  function stopResize() {
+    if (!resizingColumn.value) return;
+
+    const diff = pendingX - startX.value;
+    const newWidth = startWidth.value + diff;
+
+    const MIN_WIDTH = 80;
+
+    if (newWidth > MIN_WIDTH) {
+      columnWidths.value[resizingColumn.value] = newWidth;
+    }
+
+    resizingColumn.value = null;
+    guideX.value = null;
+
+    document.body.style.cursor = "";
+
+    window.removeEventListener("mousemove", handleMouseMove);
+    window.removeEventListener("mouseup", stopResize);
+
+    if (rafId !== null) {
+      cancelAnimationFrame(rafId);
+      rafId = null;
+    }
+  }
+
+  onBeforeUnmount(() => stopResize());
+
+  return {
+    columnWidths,
+    guideX,
+    startResize,
+    setInitialWidths,
+  };
+}
diff --git a/apps/tailwind-components/tests/vitest/composables/useColumnResize.spec.ts b/apps/tailwind-components/tests/vitest/composables/useColumnResize.spec.ts
new file mode 100644
index 00000000000..79f54212b66
--- /dev/null
+++ b/apps/tailwind-components/tests/vitest/composables/useColumnResize.spec.ts
@@ -0,0 +1,104 @@
+import { describe, it, expect, beforeEach, vi } from "vitest";
+import { ref } from "vue";
+import { useColumnResize } from "../../../app/composables/useColumnResize";
+
+describe("useColumnResize", () => {
+  let container: any;
+
+  beforeEach(() => {
+    container = ref({
+      getBoundingClientRect: () => ({ left: 100 }),
+      scrollLeft: 0,
+    });
+
+    // mock RAF
+    vi.stubGlobal("requestAnimationFrame", (cb: any) => {
+      cb();
+      return 1;
+    });
+
+    vi.stubGlobal("cancelAnimationFrame", vi.fn());
+  });
+
+  it("initializes column widths", () => {
+    const { columnWidths, setInitialWidths } = useColumnResize(container);
+
+    setInitialWidths([{ id: "name" }, { id: "age" }]);
+
+    expect(columnWidths.value.name).toBe(240);
+    expect(columnWidths.value.age).toBe(240);
+  });
+
+  it("does not override existing width", () => {
+    const { columnWidths, setInitialWidths } = useColumnResize(container);
+
+    columnWidths.value.name = 500;
+
+    setInitialWidths([{ id: "name" }]);
+
+    expect(columnWidths.value.name).toBe(500);
+  });
+
+  it("starts resizing correctly", () => {
+    const { columnWidths, startResize, guideX } = useColumnResize(container);
+
+    columnWidths.value.name = 200;
+
+    startResize({ clientX: 300 } as MouseEvent, "name");
+
+    // 300 - container.left(100)
+    expect(guideX.value).toBe(200);
+  });
+
+  it("updates guide position on mouse move", () => {
+    const { columnWidths, startResize, guideX } = useColumnResize(container);
+
+    columnWidths.value.name = 200;
+
+    startResize({ clientX: 300 } as MouseEvent, "name");
+
+    window.dispatchEvent(new MouseEvent("mousemove", { clientX: 350 }));
+
+    expect(guideX.value).toBe(250);
+  });
+
+  it("commits new column width on mouseup", () => {
+    const { columnWidths, startResize } = useColumnResize(container);
+
+    columnWidths.value.name = 200;
+
+    startResize({ clientX: 300 } as MouseEvent, "name");
+
+    window.dispatchEvent(new MouseEvent("mousemove", { clientX: 350 }));
+
+    window.dispatchEvent(new MouseEvent("mouseup"));
+
+    expect(columnWidths.value.name).toBe(250);
+  });
+
+  it("respects minimum width", () => {
+    const { columnWidths, startResize } = useColumnResize(container);
+
+    columnWidths.value.name = 200;
+
+    startResize({ clientX: 300 } as MouseEvent, "name");
+
+    window.dispatchEvent(new MouseEvent("mousemove", { clientX: 0 }));
+
+    window.dispatchEvent(new MouseEvent("mouseup"));
+
+    expect(columnWidths.value.name).toBeGreaterThanOrEqual(80);
+  });
+
+  it("removes guide after resize ends", () => {
+    const { columnWidths, startResize, guideX } = useColumnResize(container);
+
+    columnWidths.value.name = 200;
+
+    startResize({ clientX: 300 } as MouseEvent, "name");
+
+    window.dispatchEvent(new MouseEvent("mouseup"));
+
+    expect(guideX.value).toBe(null);
+  });
+});

From 019bbb60da8ab0ab4fe45b8ebbccf62934a06434 Mon Sep 17 00:00:00 2001
From: p237959 <47183404+connoratrug@users.noreply.github.com>
Date: Thu, 5 Mar 2026 14:35:25 +0100
Subject: [PATCH 2/6] Update
 apps/tailwind-components/app/components/table/TableEMX2.vue

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 apps/tailwind-components/app/components/table/TableEMX2.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/tailwind-components/app/components/table/TableEMX2.vue b/apps/tailwind-components/app/components/table/TableEMX2.vue
index e59a2075507..15d03eb2cc2 100644
--- a/apps/tailwind-components/app/components/table/TableEMX2.vue
+++ b/apps/tailwind-components/app/components/table/TableEMX2.vue
@@ -51,7 +51,7 @@
             <TableHeadCell
               v-for="column in sortedVisibleColumns"
               :style="{ width: columnWidths[column.id] + 'px' }"
-              class="relative group:"
+              class="relative group"
             >
               <div
                 class="absolute right-0 top-0 h-full w-4 cursor-col-resize group"

From 512d0f2071fb0d8f437308048e8bc2f97424fbb5 Mon Sep 17 00:00:00 2001
From: connoratrug <c.stroomberg@rug.nl>
Date: Fri, 6 Mar 2026 09:21:55 +0100
Subject: [PATCH 3/6] tweak hover style

---
 apps/tailwind-components/app/components/table/TableEMX2.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/tailwind-components/app/components/table/TableEMX2.vue b/apps/tailwind-components/app/components/table/TableEMX2.vue
index 15d03eb2cc2..9c7636a5ed1 100644
--- a/apps/tailwind-components/app/components/table/TableEMX2.vue
+++ b/apps/tailwind-components/app/components/table/TableEMX2.vue
@@ -58,7 +58,7 @@
                 @mousedown.stop="startResize($event, column.id)"
               >
                 <div
-                  class="absolute right-0 top-0 h-full w-[2px] bg-transparent group-hover:bg-button-primary"
+                  class="absolute right-0 top-0 h-full w-[2px] bg-transparent hover:bg-button-primary"
                 />
               </div>
               <TableHeaderAction

From 2082aed429f7d1d34f614f61d302411231b6cbb6 Mon Sep 17 00:00:00 2001
From: p237959 <47183404+connoratrug@users.noreply.github.com>
Date: Mon, 9 Mar 2026 09:42:01 +0100
Subject: [PATCH 4/6] Update
 apps/tailwind-components/app/components/table/TableEMX2.vue

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 .../app/components/table/TableEMX2.vue        | 23 ++++++++++---------
 1 file changed, 12 insertions(+), 11 deletions(-)

diff --git a/apps/tailwind-components/app/components/table/TableEMX2.vue b/apps/tailwind-components/app/components/table/TableEMX2.vue
index 9c7636a5ed1..67039853d3a 100644
--- a/apps/tailwind-components/app/components/table/TableEMX2.vue
+++ b/apps/tailwind-components/app/components/table/TableEMX2.vue
@@ -306,20 +306,21 @@ const { data, refresh } = useAsyncData(
   }
 );
 
-watch(
-  () => data.value?.tableMetadata,
-  (newMetadata) => {
-    if (newMetadata) {
-      columns.value = newMetadata.columns.filter(
-        (c) =>
-          !c.id.startsWith("mg") &&
-          !["HEADING", "SECTION"].includes(c.columnType)
-      );
+let widthsInitialized = false;
 
-      setInitialWidths(columns.value);
+watch(
+  () => columns.value,
+  (newColumns) => {
+    if (
+      !widthsInitialized &&
+      Array.isArray(newColumns) &&
+      newColumns.length > 0
+    ) {
+      setInitialWidths(newColumns);
+      widthsInitialized = true;
     }
   },
-  { immediate: true }
+  { immediate: true, deep: true }
 );
 
 const rows = computed(() =>

From ce2a8dbdf7bf02bd6cb4646024ef0b03587b42f6 Mon Sep 17 00:00:00 2001
From: connoratrug <c.stroomberg@rug.nl>
Date: Thu, 12 Mar 2026 13:32:50 +0100
Subject: [PATCH 5/6] disable selection during resize

---
 .../tailwind-components/app/components/table/TableEMX2.vue | 7 +++++--
 .../tailwind-components/app/composables/useColumnResize.ts | 4 ++++
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/apps/tailwind-components/app/components/table/TableEMX2.vue b/apps/tailwind-components/app/components/table/TableEMX2.vue
index 67039853d3a..66b900320e0 100644
--- a/apps/tailwind-components/app/components/table/TableEMX2.vue
+++ b/apps/tailwind-components/app/components/table/TableEMX2.vue
@@ -50,7 +50,10 @@
             </TableHeadCell>
             <TableHeadCell
               v-for="column in sortedVisibleColumns"
-              :style="{ width: columnWidths[column.id] + 'px' }"
+              :style="{
+                width: columnWidths[column.id] + 'px',
+                userSelect: isResizing ? 'none' : 'all',
+              }"
               class="relative group"
             >
               <div
@@ -269,7 +272,7 @@ const columns = ref<IColumn[]>([]);
 
 const tableContainer = ref<HTMLElement | null>(null);
 
-const { columnWidths, guideX, startResize, setInitialWidths } =
+const { columnWidths, guideX, startResize, setInitialWidths, isResizing } =
   useColumnResize(tableContainer);
 
 const settings = defineModel<ITableSettings>("settings", {
diff --git a/apps/tailwind-components/app/composables/useColumnResize.ts b/apps/tailwind-components/app/composables/useColumnResize.ts
index 10ab308edd8..fcf06dd4cff 100644
--- a/apps/tailwind-components/app/composables/useColumnResize.ts
+++ b/apps/tailwind-components/app/composables/useColumnResize.ts
@@ -3,6 +3,7 @@ import { ref, onBeforeUnmount, type Ref } from "vue";
 export function useColumnResize(container: Ref<HTMLElement | null>) {
   const columnWidths = ref<Record<string, number>>({});
   const guideX = ref<number | null>(null);
+  const isResizing = ref(false);
 
   const resizingColumn = ref<string | null>(null);
 
@@ -26,6 +27,7 @@ export function useColumnResize(container: Ref<HTMLElement | null>) {
   }
 
   function startResize(event: MouseEvent, columnId: string) {
+    isResizing.value = true;
     resizingColumn.value = columnId;
 
     startX.value = event.clientX;
@@ -53,6 +55,7 @@ export function useColumnResize(container: Ref<HTMLElement | null>) {
   }
 
   function stopResize() {
+    isResizing.value = false;
     if (!resizingColumn.value) return;
 
     const diff = pendingX - startX.value;
@@ -85,5 +88,6 @@ export function useColumnResize(container: Ref<HTMLElement | null>) {
     guideX,
     startResize,
     setInitialWidths,
+    isResizing,
   };
 }

From 45f1d4a84208f5d493ef90d10d7ef72eee291d9b Mon Sep 17 00:00:00 2001
From: p237959 <47183404+connoratrug@users.noreply.github.com>
Date: Thu, 12 Mar 2026 14:20:48 +0100
Subject: [PATCH 6/6] Update
 apps/tailwind-components/app/components/table/TableEMX2.vue

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 apps/tailwind-components/app/components/table/TableEMX2.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/tailwind-components/app/components/table/TableEMX2.vue b/apps/tailwind-components/app/components/table/TableEMX2.vue
index 66b900320e0..a2a64d8c70f 100644
--- a/apps/tailwind-components/app/components/table/TableEMX2.vue
+++ b/apps/tailwind-components/app/components/table/TableEMX2.vue
@@ -52,7 +52,7 @@
               v-for="column in sortedVisibleColumns"
               :style="{
                 width: columnWidths[column.id] + 'px',
-                userSelect: isResizing ? 'none' : 'all',
+                userSelect: isResizing ? 'none' : 'auto',
               }"
               class="relative group"
             >