v4.4.2

Author: novykh

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",

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>
   )
 }

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>
   )
 }

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}