From 63ea54098be37aa6944b61a76cd64dca37e07c62 Mon Sep 17 00:00:00 2001
From: Rohan <45748283+r100-stack@users.noreply.github.com>
Date: Wed, 18 Sep 2024 10:37:13 -0400
Subject: [PATCH] Prevent repeated `classList` changes in Table column header
 (#2249)

---
 .../src/core/Table/hooks/useColumnDragAndDrop.tsx  | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/packages/itwinui-react/src/core/Table/hooks/useColumnDragAndDrop.tsx b/packages/itwinui-react/src/core/Table/hooks/useColumnDragAndDrop.tsx
index b94d619ac8c..e082cfaf374 100644
--- a/packages/itwinui-react/src/core/Table/hooks/useColumnDragAndDrop.tsx
+++ b/packages/itwinui-react/src/core/Table/hooks/useColumnDragAndDrop.tsx
@@ -15,6 +15,9 @@ import type {
 } from '../../../react-table/react-table.js';
 import { styles } from '../../../styles.js';
 
+const leftClassName = styles['iui-table-reorder-column-left'];
+const rightClassName = styles['iui-table-reorder-column-right'];
+
 const REORDER_ACTIONS = {
   columnDragStart: 'columnDragStart',
   columnDragEnd: 'columnDragEnd',
@@ -56,12 +59,15 @@ const defaultGetDragAndDropProps =
       position?: 'left' | 'right',
     ) => {
       const columnElement = event.currentTarget as HTMLElement;
-      columnElement.classList.remove(styles['iui-table-reorder-column-right']);
-      columnElement.classList.remove(styles['iui-table-reorder-column-left']);
       if (position === 'left') {
-        columnElement.classList.add(styles['iui-table-reorder-column-left']);
+        columnElement.classList.remove(rightClassName);
+        columnElement.classList.add(leftClassName);
       } else if (position === 'right') {
-        columnElement.classList.add(styles['iui-table-reorder-column-right']);
+        columnElement.classList.remove(leftClassName);
+        columnElement.classList.add(rightClassName);
+      } else {
+        columnElement.classList.remove(leftClassName);
+        columnElement.classList.remove(rightClassName);
       }
     };