From 5eb61a6c6c447ade97a4076a2a4f94ee51301dad Mon Sep 17 00:00:00 2001
From: novykh <ioannis.klironomos@gmail.com>
Date: Wed, 19 Aug 2026 10:57:17 +0300
Subject: [PATCH] v5.5.9

---
 package.json                                  |  2 +-
 src/components/table/body/header/cell.js      |  4 +-
 .../table/groupHeaderDragHandle.test.js       | 41 +++++++++++++++++++
 3 files changed, 45 insertions(+), 2 deletions(-)
 create mode 100644 src/components/table/groupHeaderDragHandle.test.js

diff --git a/package.json b/package.json
index e812fc8f..9596c224 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@netdata/netdata-ui",
-  "version": "5.5.8",
+  "version": "5.5.9",
   "description": "netdata UI kit",
   "main": "dist/index.js",
   "module": "dist/es6/index.js",
diff --git a/src/components/table/body/header/cell.js b/src/components/table/body/header/cell.js
index d5c4e9eb..c65469de 100644
--- a/src/components/table/body/header/cell.js
+++ b/src/components/table/body/header/cell.js
@@ -152,7 +152,9 @@ const BodyHeaderCell = ({
           overflow="hidden"
           width="100%"
         >
-          <DragHandle dragHandleProps={dragHandleProps} visible={isDragging} />
+          {!hasSubheaders && !header.isPlaceholder && (
+            <DragHandle dragHandleProps={dragHandleProps} visible={isDragging} />
+          )}
           {column.isPlaceholder ? null : (
             <Label
               as={column.columnDef.labelAs}
diff --git a/src/components/table/groupHeaderDragHandle.test.js b/src/components/table/groupHeaderDragHandle.test.js
new file mode 100644
index 00000000..c8a56a02
--- /dev/null
+++ b/src/components/table/groupHeaderDragHandle.test.js
@@ -0,0 +1,41 @@
+import React from "react"
+import { renderWithProviders } from "testUtilities"
+import Table from "./table"
+
+const serverColumn = { id: "server", accessorKey: "server", header: "Server" }
+const alertsColumn = { id: "alerts", accessorKey: "alerts", header: "Alerts" }
+const cpuColumn = { id: "cpu", accessorKey: "cpu", header: "CPU" }
+
+it("renders drag handles only on leaf header cells when columns are grouped", async () => {
+  const { container, findByText } = renderWithProviders(
+    <Table
+      data={[]}
+      dataColumns={[
+        { id: "Device", header: "", headerString: () => "", columns: [serverColumn, alertsColumn] },
+        { id: "Metrics", header: "", headerString: () => "", columns: [cpuColumn] },
+      ]}
+      enableColumnReordering
+    />
+  )
+
+  await findByText("Server")
+
+  expect(container.querySelectorAll(".drag-handle")).toHaveLength(3)
+})
+
+it("renders no drag handle on placeholder header cells of ungrouped columns", async () => {
+  const { container, findByText } = renderWithProviders(
+    <Table
+      data={[]}
+      dataColumns={[
+        serverColumn,
+        { id: "Metrics", header: "", headerString: () => "", columns: [cpuColumn, alertsColumn] },
+      ]}
+      enableColumnReordering
+    />
+  )
+
+  await findByText("CPU")
+
+  expect(container.querySelectorAll(".drag-handle")).toHaveLength(3)
+})