From 1cecd04fbd9b6a6fa028a070274192f090aac237 Mon Sep 17 00:00:00 2001
From: novykh <ioannis.klironomos@gmail.com>
Date: Wed, 17 Apr 2024 11:05:12 +0300
Subject: [PATCH] v4.4.2

---
 package.json                              |  2 +-
 src/components/table/body/header/cell.js  | 20 +++++++++++--
 src/components/table/body/header/index.js | 35 +++++++++++++----------
 src/components/table/table.js             |  2 ++
 4 files changed, 40 insertions(+), 19 deletions(-)

diff --git a/package.json b/package.json
index dec71639..55283053 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@netdata/netdata-ui",
-  "version": "4.4.1",
+  "version": "4.4.2",
   "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 9fded8d5..de843ce6 100644
--- a/src/components/table/body/header/cell.js
+++ b/src/components/table/body/header/cell.js
@@ -39,7 +39,15 @@ const rerenderSelector = state => ({
   selecting: state.selectedRows,
 })
 
-const BodyHeaderCell = ({ header, table, testPrefix, coloredSortedColumn, index }) => {
+const BodyHeaderCell = ({
+  header,
+  table,
+  testPrefix,
+  coloredSortedColumn,
+  index,
+  children,
+  isSubheader,
+}) => {
   useTableState(rerenderSelector)
 
   const { column } = header
@@ -75,7 +83,7 @@ const BodyHeaderCell = ({ header, table, testPrefix, coloredSortedColumn, index
           background: "columnHighlight",
           backgroundOpacity: "0.2",
         })}
-      padding={[1, 2]}
+      padding={isSubheader ? [0] : [1, 2]}
       {...headStyles}
       column
     >
@@ -90,7 +98,12 @@ const BodyHeaderCell = ({ header, table, testPrefix, coloredSortedColumn, index
         >
           <Sorting sortable={column.getCanSort()} sorting={column.getIsSorted()} />
           {column.isPlaceholder ? null : (
-            <Label sorting={column.getIsSorted()} sortable={column.getCanSort()}>
+            <Label
+              as={column.columnDef.labelAs}
+              {...column.columnDef.labelProps}
+              sorting={column.getIsSorted()}
+              sortable={column.getCanSort()}
+            >
               {flexRender(column.columnDef.header, header.getContext())}
             </Label>
           )}
@@ -99,6 +112,7 @@ const BodyHeaderCell = ({ header, table, testPrefix, coloredSortedColumn, index
       </Flex>
       <Info meta={meta} />
       <ResizeHandler header={header} table={table} />
+      {children}
     </Flex>
   )
 }
diff --git a/src/components/table/body/header/index.js b/src/components/table/body/header/index.js
index 72efe5fd..ba484638 100644
--- a/src/components/table/body/header/index.js
+++ b/src/components/table/body/header/index.js
@@ -14,18 +14,25 @@ const rerenderSelector = state => {
   }
 }
 
-const HeaderGroup = ({ headerGroup, testPrefix, ...rest }) => (
-  <Flex
-    id={headerGroup.id}
-    data-testid={`netdata-table-headRow${testPrefix}`}
-    flex
-    background="tableRowBg2"
-  >
-    {headerGroup.headers.map((header, index) => (
-      <Cell key={header.id} index={index} {...rest} header={header} testPrefix={testPrefix} />
-    ))}
-  </Flex>
-)
+const HeaderGroup = ({ id, headers, testPrefix, ...rest }) => {
+  return (
+    <Flex id={id} data-testid={`netdata-table-headRow${testPrefix}`} flex background="tableRowBg2">
+      {headers.map((header, index) => (
+        <Cell key={header.id} index={index} {...rest} header={header} testPrefix={testPrefix}>
+          {!!header.subHeaders.length && (
+            <HeaderGroup
+              headers={header.subHeaders}
+              id={header.id}
+              key={header.id}
+              {...rest}
+              isSubheader
+            />
+          )}
+        </Cell>
+      ))}
+    </Flex>
+  )
+}
 
 const HeaderGroups = ({ groups, size, side, ...rest }) => {
   if (!groups[0].headers.length) return null
@@ -44,9 +51,7 @@ const HeaderGroups = ({ groups, size, side, ...rest }) => {
       flex="grow"
       column
     >
-      {groups.map(headerGroup => (
-        <HeaderGroup headerGroup={headerGroup} key={headerGroup.id} {...rest} />
-      ))}
+      <HeaderGroup headers={groups[0].headers} id={groups[0].id} key={groups[0].id} {...rest} />
     </Flex>
   )
 }
diff --git a/src/components/table/table.js b/src/components/table/table.js
index 26f5f8a8..a557f8ea 100644
--- a/src/components/table/table.js
+++ b/src/components/table/table.js
@@ -97,6 +97,7 @@ const Table = memo(
         virtualizeOptions,
         tableRef,
         className,
+        width,
         ...rest
       },
       ref
@@ -219,6 +220,7 @@ const Table = memo(
           flex="1"
           ref={ref}
           className={className}
+          width={width}
         >
           <Header
             q={globalFilter}