From b9ae88b6e18b979d80aadb3e542b66b0b18046bd Mon Sep 17 00:00:00 2001
From: Praveen Murali <itspraveenmurali@gmail.com>
Date: Mon, 26 May 2025 14:59:07 +0530
Subject: [PATCH 1/2] Update table column resizing styles

---
 .../HeaderCell/ResizableHeaderCell.jsx        | 25 +++++++++++++++----
 src/styles/components/_table-overrides.scss   | 22 +++++++++++++---
 2 files changed, 39 insertions(+), 8 deletions(-)

diff --git a/src/components/Table/components/HeaderCell/ResizableHeaderCell.jsx b/src/components/Table/components/HeaderCell/ResizableHeaderCell.jsx
index 98203e54a..e3acadcdc 100644
--- a/src/components/Table/components/HeaderCell/ResizableHeaderCell.jsx
+++ b/src/components/Table/components/HeaderCell/ResizableHeaderCell.jsx
@@ -1,11 +1,13 @@
-import React from "react";
+import React, { useState } from "react";
 
+import classnames from "classnames";
 import { Resizable } from "react-resizable";
 
 import CellContent from "./CellContent";
 
 const ResizableHeaderCell = props => {
-  const { onResize, width, onResizeStop, ...restProps } = props;
+  const { onResize, width, onResizeStop, onResizeStart, ...restProps } = props;
+  const [isResizing, setIsResizing] = useState(false);
 
   if (!width) {
     return <CellContent {...restProps} />;
@@ -18,12 +20,25 @@ const ResizableHeaderCell = props => {
       height={0}
       handle={
         <span
-          className="react-resizable-handle"
+          aria-label="Resize column"
+          role="slider"
+          tabIndex={0}
+          className={classnames("react-resizable-handle", {
+            "react-resizable-handle--resizing": isResizing,
+          })}
           onClick={e => e.stopPropagation()}
-        />
+        >
+          <span className="neeto-ui-table-react-resizable-handle__inner" />
+        </span>
       }
-      onResizeStart={e => {
+      onResizeStart={(e, data) => {
         e.preventDefault();
+        setIsResizing(true);
+        onResizeStart?.(e, data);
+      }}
+      onResizeStop={(e, data) => {
+        setIsResizing(false);
+        onResizeStop?.(e, data);
       }}
     >
       <CellContent {...restProps} />
diff --git a/src/styles/components/_table-overrides.scss b/src/styles/components/_table-overrides.scss
index 48f7995d8..a3aee5205 100644
--- a/src/styles/components/_table-overrides.scss
+++ b/src/styles/components/_table-overrides.scss
@@ -5,7 +5,7 @@
   --neeto-ui-table-header-font-weight: 600;
   --neeto-ui-table-header-text-transform: uppercase;
   --neeto-ui-table-header-border-bottom-width: 1px;
-  --neeto-ui-table-resize-handle-width: 10px;
+  --neeto-ui-table-resize-handle-width: 6px;
   --neeto-ui-table-resize-handle-hover-bg-color: rgb(var(--neeto-ui-gray-300));
 }
 
@@ -93,15 +93,31 @@
   width: var(--neeto-ui-table-resize-handle-width);
   height: 100%;
   bottom: 0;
-  right: -5px;
+  right: 0;
   cursor: col-resize;
   z-index: 1;
+  padding-right: 1px;
+  padding-left: 1px;
+}
+
+.neeto-ui-table-react-resizable-handle__inner {
+  position: relative;
+  height: 90%;
+  top: 5%;
+  width: 100%;
+  border-radius: 4px;
+  display: block;
+  transition: all 0.3s;
 }
 
-.react-resizable-handle:hover {
+.react-resizable-handle:hover .neeto-ui-table-react-resizable-handle__inner {
   background-color: var(--neeto-ui-table-resize-handle-hover-bg-color);
 }
 
+.react-resizable-handle--resizing .neeto-ui-table-react-resizable-handle__inner{
+  background-color: rgb(var(--neeto-ui-primary-500)) !important;
+}
+
 .neetix-table {
   --neeto-ui-table-header-font-size: var(--neeto-ui-text-sm);
   --neeto-ui-table-header-text-transform: capitalize;

From ee5411b511bf28db11fd395d17475b3e75e43034 Mon Sep 17 00:00:00 2001
From: Praveen Murali <itspraveenmurali@gmail.com>
Date: Mon, 26 May 2025 15:30:10 +0530
Subject: [PATCH 2/2] Minor fix

---
 .../Table/components/HeaderCell/ResizableHeaderCell.jsx        | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/components/Table/components/HeaderCell/ResizableHeaderCell.jsx b/src/components/Table/components/HeaderCell/ResizableHeaderCell.jsx
index e3acadcdc..28de0feb8 100644
--- a/src/components/Table/components/HeaderCell/ResizableHeaderCell.jsx
+++ b/src/components/Table/components/HeaderCell/ResizableHeaderCell.jsx
@@ -20,9 +20,6 @@ const ResizableHeaderCell = props => {
       height={0}
       handle={
         <span
-          aria-label="Resize column"
-          role="slider"
-          tabIndex={0}
           className={classnames("react-resizable-handle", {
             "react-resizable-handle--resizing": isResizing,
           })}