chore(netdata table): minor updates (#407)

* chore(netdata table): add support for cell and header cell styles

* chore(netdata table): fix sort icons

* v2.5.5

Author: burbuli8ra

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netdata/netdata-ui",
-  "version": "2.5.4",
+  "version": "2.5.5",
   "description": "netdata UI kit",
   "main": "./lib/index.js",
   "files": [

src/components/tableV2/core/base-table.js

@@ -34,12 +34,9 @@ const StyledHeaderCell = styled(Box)`
   }
 `
 const StyledSortIcon = styled(Icon)`
-  position: absolute;
-  top: 0;
-  bottom: 0;
   height: 16px;
+  margin: auto 4px;
   width: 16px;
-  margin: auto;
 `
 const StyledPagination = styled(Flex)`
   height: 45px;
@@ -80,7 +77,10 @@ Table.HeadRow = forwardRef(({ children, ...props }, ref) => (
 ))
 
 Table.HeadCell = forwardRef(
-  ({ children, align = "left", width, maxWidth, minWidth, styles = {}, ...props }, ref) => (
+  (
+    { align = "left", children, headStyles = {}, maxWidth, minWidth, width, styles = {}, ...rest },
+    ref
+  ) => (
     <StyledHeaderCell
       width={{ max: maxWidth, base: width, min: minWidth }}
       ref={ref}
@@ -91,9 +91,10 @@ Table.HeadCell = forwardRef(
         position: "sticky",
         top: 0,
         ...styles,
+        ...headStyles,
       }}
-      {...props}
       as="th"
+      {...rest}
     >
       {children}
     </StyledHeaderCell>
@@ -103,19 +104,20 @@ Table.HeadCell = forwardRef(
 Table.SortingHeadCell = forwardRef(
   (
     {
+      align = "left",
       children,
-      onSortClicked,
-      setSortDirection,
+      "data-testid": dataTestid,
+      filter,
+      headStyles = {},
       maxWidth,
-      width,
       minWidth,
-      sortDirection,
-      filter,
-      align = "left",
-      "data-testid": dataTestid,
+      onSortClicked,
+      setSortDirection,
       "sortby-testid": sortbyTestid,
+      sortDirection,
       styles = {},
-      ...props
+      width,
+      ...rest
     },
     ref
   ) => {
@@ -142,29 +144,34 @@ Table.SortingHeadCell = forwardRef(
         width={{ max: maxWidth, base: width, min: minWidth }}
         as="th"
         ref={ref}
-        {...props}
+        {...rest}
         sx={{
           textAlign: align,
           fontSize: "14px",
           height: "90px",
           position: "sticky",
           top: 0,
           ...styles,
+          ...headStyles,
         }}
         data-testid={dataTestid}
       >
-        <Box
+        <Flex
+          cursor="pointer"
+          data-testid={sortbyTestid}
+          onClick={onClick}
           onMouseEnter={onMouseEnter}
           onMouseLeave={onMouseLeave}
-          onClick={onClick}
           position="relative"
-          cursor="pointer"
-          data-testid={sortbyTestid}
         >
           {children}
           <StyledSortIcon color="text" name={sortingIcons[sortDirection] ?? null} />
-          {showHoveringIcon && <StyledSortIcon color="textLite" name={sortingIcons["indicator"]} />}
-        </Box>
+          {showHoveringIcon ? (
+            <StyledSortIcon color="textLite" name={sortingIcons["indicator"]} />
+          ) : (
+            <Box width={6} height={4} />
+          )}
+        </Flex>
         {filter}
       </StyledHeaderCell>
     )
@@ -178,21 +185,34 @@ Table.Body = forwardRef(({ children, ...props }, ref) => (
 ))
 
 Table.Cell = forwardRef(
-  ({ children, onClick, width, maxWidth, minWidth, align = "left", ...props }, ref) => {
+  (
+    {
+      align = "left",
+      cellStyles = {},
+      children,
+      maxWidth,
+      minWidth,
+      onClick,
+      styles = {},
+      width,
+      ...rest
+    },
+    ref
+  ) => {
     const handleClick = e => {
       e.persist()
-      if (props.stopPropagation) e.stopPropagation()
+      if (rest.stopPropagation) e.stopPropagation()
       onClick?.()
     }
     return (
       <Box
         width={{ max: maxWidth, base: width, min: minWidth }}
         padding={[3]}
-        sx={{ textAlign: align, height: "80px" }}
+        sx={{ textAlign: align, height: "80px", ...styles, ...cellStyles }}
         as="td"
         ref={ref}
-        {...props}
         onClick={handleClick}
+        {...rest}
       >
         {children}
       </Box>
@@ -217,7 +237,7 @@ Table.Row = forwardRef(
       onMouseEnter?.(event)
     }
 
-    const handleMousLeave = event => {
+    const handleMouseLeave = event => {
       onMouseLeave?.(event)
     }
 
@@ -227,7 +247,7 @@ Table.Row = forwardRef(
     return (
       <Box
         onMouseEnter={handleMouseEnter}
-        onMouseLeave={handleMousLeave}
+        onMouseLeave={handleMouseLeave}
         as={StyledRow}
         _hover={isRowClickable && { background: "borderSecondary" }}
         cursor={cursor}

src/components/tableV2/core/headCell.js

@@ -1,4 +1,4 @@
-import React, { useState } from "react"
+import React from "react"
 
 import ComparisonFilter from "../components/comparisonFilter"
 import SelectFilter from "../components/selectFilter"
@@ -42,6 +42,7 @@ const makeHeadCell = ({ headers, enableSorting, testPrefix }) => {
   const HeadCell = headers.map(({ id, colSpan, getContext, isPlaceholder, column }) => {
     const { getCanSort, columnDef } = column
     const { meta } = columnDef
+    const headStyles = meta?.headStyles || {}
     const styles = meta?.styles || {}
 
     const selectedFilter = meta && meta?.filter?.component ? meta?.filter?.component : "default"
@@ -52,21 +53,22 @@ const makeHeadCell = ({ headers, enableSorting, testPrefix }) => {
     if (getCanSort() && enableSorting) {
       return (
         <Table.SortingHeadCell
-          width={column.getSize()}
-          minWidth={column.columnDef.minSize}
-          maxWidth={column.columnDef.maxSize}
-          data-testid={`netdata-table-head-cell${testPrefix}`}
-          sortby-testid={`netdata-table-head-cell-sortyBy-${id}${testPrefix}`}
-          sortDirection={column.getIsSorted()}
-          onSortClicked={column.getToggleSortingHandler()}
           colSpan={colSpan}
-          key={id}
+          data-testid={`netdata-table-head-cell${testPrefix}`}
           filter={
             column.getCanFilter() && (
               <Filter column={column} testPrefix={testPrefix} {...filterOptions} />
             )
           }
+          headStyles={headStyles}
+          key={id}
+          maxWidth={column.columnDef.maxSize}
+          minWidth={column.columnDef.minSize}
+          onSortClicked={column.getToggleSortingHandler()}
+          sortby-testid={`netdata-table-head-cell-sortyBy-${id}${testPrefix}`}
+          sortDirection={column.getIsSorted()}
           styles={styles}
+          width={column.getSize()}
         >
           <Box position="absolute" right={0}>
             {tooltipText && (