v4.5.10

Author: novykh

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netdata/netdata-ui",
-  "version": "4.5.9",
+  "version": "4.5.10",
   "description": "netdata UI kit",
   "main": "dist/index.js",
   "module": "dist/es6/index.js",

src/components/table/body/header/cell.js

@@ -47,6 +47,7 @@ const BodyHeaderCell = ({
   index,
   children,
   isSubheader,
+  hasSubheaders,
 }) => {
   useTableState(rerenderSelector)
 
@@ -83,7 +84,7 @@ const BodyHeaderCell = ({
           background: "columnHighlight",
           backgroundOpacity: "0.2",
         })}
-      padding={isSubheader ? [1, 2] : [0]}
+      padding={!hasSubheaders || isSubheader ? [1, 2] : [0]}
       {...headStyles}
       column
     >
@@ -92,7 +93,7 @@ const BodyHeaderCell = ({
           alignItems="center"
           cursor={column.getCanSort() ? "pointer" : "default"}
           onClick={column.getCanSort() ? column.getToggleSortingHandler() : undefined}
-          padding={[0, 2, 0, 0]}
+          padding={[0, 2, 0, !hasSubheaders || isSubheader ? 0 : 2]}
           overflow="hidden"
           width="100%"
         >

src/components/table/body/header/index.js

@@ -18,7 +18,14 @@ 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}>
+        <Cell
+          key={header.id}
+          index={index}
+          {...rest}
+          header={header}
+          testPrefix={testPrefix}
+          hasSubheaders={!!header.subHeaders.length}
+        >
           {!!header.subHeaders.length && (
             <HeaderGroup
               headers={header.subHeaders}

src/components/table/header/index.js

@@ -36,7 +36,7 @@ const Header = ({
       background="mainBackground"
       gap={1}
       alignItems="center"
-      padding={[1, 0]}
+      padding={[1]}
       {...tableMeta.bulkActionsStyles}
     >
       {typeof title === "string" ? <TextBig strong>{title}</TextBig> : title}