chore(netdata table): add border to last sticky column cells (#409)

burbuli8ra · web-flow · commit 3c4503af3bc4 · 2022-11-22T11:26:44.000+02:00
* chore(netdata table): add border separator to last pinned column

* chore(netadata table): review changes

Initialize `pinnedStyles` as an empty object

* v2.5.8
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@netdata/netdata-ui",
-  "version": "2.5.7",
+  "version": "2.5.8",
   "description": "netdata UI kit",
   "main": "./lib/index.js",
   "files": [
diff --git a/src/components/icon/styled.js b/src/components/icon/styled.js
@@ -10,7 +10,7 @@ const SIZES = {
 }
 
 const styledColor = ({ theme, color }) => color && `fill: ${getColor(color)({ theme })};`
-const styledhoverColor = ({ theme, hoverColor }) =>
+const styledHoverColor = ({ theme, hoverColor }) =>
   hoverColor && `&:hover { fill: ${getColor(hoverColor)({ theme })}; }`
 const styledRotate = ({ rotate }) => !isNaN(rotate) && `transform: rotate(${rotate * 90}deg);`
 
@@ -21,7 +21,7 @@ export const StyledIcon = styled.svg`
   pointer-events: ${({ disabled }) => (disabled ? "none" : "unset")};
   ${styledRotate}
   ${styledColor}
-  ${styledhoverColor}
+  ${styledHoverColor}
   ${margin}
   ${alignSelf}
 `
diff --git a/src/components/tableV2/core/base-table.js b/src/components/tableV2/core/base-table.js
@@ -119,8 +119,6 @@ Table.HeadCell = forwardRef(
       children,
       align = "left",
       width,
-      maxWidth,
-      minWidth,
       tooltipText,
       filter,
       onMouseDown,
@@ -134,6 +132,7 @@ Table.HeadCell = forwardRef(
     ref
   ) => (
     <StyledHeaderCell
+      as="th"
       ref={ref}
       sx={{
         textAlign: align,
@@ -145,7 +144,6 @@ Table.HeadCell = forwardRef(
         ...headStyles,
       }}
       width={`${width}px`}
-      as="th"
       {...props}
     >
       <Flex>
@@ -255,39 +253,41 @@ Table.Body = forwardRef(({ children, ...props }, ref) => (
 Table.Cell = forwardRef(
   (
     {
+      align = "left",
+      cellStyles = {},
       children,
-      onClick,
-      width,
       maxWidth,
       minWidth,
-      align = "left",
-      cellStyles = {},
+      onClick,
+      pinnedStyles = {},
       styles = {},
-      ...props
+      width,
+      ...rest
     },
     ref
   ) => {
     const handleClick = e => {
       e.persist()
-      if (props.stopPropagation) e.stopPropagation()
+      if (rest.stopPropagation) e.stopPropagation()
       onClick?.()
     }
     return (
       <Box
-        width={{ max: `${maxWidth}px`, base: `${width}px`, min: `${minWidth}px` }}
+        as="td"
+        onClick={handleClick}
         padding={[3]}
+        ref={ref}
         sx={{
           textAlign: align,
           height: "65px",
           maxHeight: "65px",
           whiteSpace: "nowrap",
           ...cellStyles,
+          ...pinnedStyles,
           ...styles,
         }}
-        as="td"
-        ref={ref}
-        {...props}
-        onClick={handleClick}
+        width={{ max: `${maxWidth}px`, base: `${width}px`, min: `${minWidth}px` }}
+        {...rest}
       >
         {children}
       </Box>
diff --git a/src/components/tableV2/core/dataCell.js b/src/components/tableV2/core/dataCell.js
@@ -2,14 +2,15 @@ import React, { memo } from "react"
 
 import Table from "./base-table"
 
-const DataCell = ({ cell, testPrefix, flexRender }) => {
+const DataCell = ({ cell, flexRender, pinnedStyles, testPrefix }) => {
   return (
     <Table.Cell
-      width={cell.column.getSize()}
-      minWidth={cell.column.columnDef.minSize}
-      maxWidth={cell.column.columnDef.maxSize}
       data-testid={`netdata-table-cell-${cell.column.columnDef.id}${testPrefix}`}
       key={cell.id}
+      maxWidth={cell.column.columnDef.maxSize}
+      minWidth={cell.column.columnDef.minSize}
+      pinnedStyles={pinnedStyles}
+      width={cell.column.getSize()}
       {...cell.column.columnDef.meta}
     >
       {flexRender(cell.column.columnDef.cell, cell.getContext())}
diff --git a/src/components/tableV2/core/fullTable.js b/src/components/tableV2/core/fullTable.js
@@ -5,44 +5,46 @@ import makeHeadCell from "./headCell"
 import Rows from "./rows"
 
 const FullTable = ({
-  tableRef,
-  getRowHandler,
-  testPrefix,
   dataGa,
-  headers,
-  enableSorting,
-  testPrefixCallback,
-  onClickRow,
-  table,
   disableClickRow,
+  enableResize,
+  enableSorting,
   flexRender,
+  getRowHandler,
+  headers,
+  onClickRow,
   onHoverRow,
-  enableResize,
+  pinnedStyles = {},
+  table,
+  tableRef,
+  testPrefix,
+  testPrefixCallback,
   width,
 }) => {
   return (
     <Table
-      width={width}
-      ref={tableRef}
+      dataGa={dataGa}
       data-testid={`netdata-table${testPrefix}`}
+      ref={tableRef}
       testPrefix={testPrefix}
-      dataGa={dataGa}
+      width={width}
     >
       <Table.Head data-testid={`netdata-table-head${testPrefix}`}>
         <Table.HeadRow data-testid={`netdata-table-headRow${testPrefix}`}>
-          {makeHeadCell({ headers, enableSorting, testPrefix, enableResize, table })}
+          {makeHeadCell({ enableResize, enableSorting, headers, pinnedStyles, table, testPrefix })}
         </Table.HeadRow>
       </Table.Head>
       <Table.Body data-testid={`netdata-table-body${testPrefix}`}>
         <Rows
-          testPrefix={testPrefix}
-          testPrefixCallback={testPrefixCallback}
-          onClickRow={onClickRow}
-          table={table}
           disableClickRow={disableClickRow}
           flexRender={flexRender}
           getRowHandler={getRowHandler}
+          onClickRow={onClickRow}
           onHoverRow={onHoverRow}
+          pinnedStyles={pinnedStyles}
+          table={table}
+          testPrefix={testPrefix}
+          testPrefixCallback={testPrefixCallback}
         />
       </Table.Body>
     </Table>
diff --git a/src/components/tableV2/core/headCell.js b/src/components/tableV2/core/headCell.js
@@ -37,82 +37,87 @@ const availableFilters = {
   default: SearchFilter,
 }
 
-const makeHeadCell = ({ headers, enableSorting, testPrefix, enableResize, table }) => {
-  const HeadCell = headers.map(
-    ({ id, colSpan, getContext, isPlaceholder, column, getResizeHandler, getSize }) => {
-      const { getCanSort, columnDef, getCanResize, getIsResizing } = column
-      const { meta } = columnDef
-      const headStyles = meta?.headStyles || {}
-      const styles = meta?.styles || {}
-
-      const selectedFilter = meta && meta?.filter?.component ? meta?.filter?.component : "default"
-      const filterOptions = meta && meta?.filter ? meta?.filter : {}
-      const tooltipText = meta && meta?.tooltip ? meta?.tooltip : ""
-      const Filter = availableFilters[selectedFilter]
+const makeHeadCell = ({
+  enableResize,
+  enableSorting,
+  headers,
+  pinnedStyles = {},
+  table,
+  testPrefix,
+}) =>
+  headers.map(({ id, colSpan, getContext, isPlaceholder, column, getResizeHandler, getSize }) => {
+    const { getCanSort, columnDef, getCanResize, getIsResizing } = column
+    const { meta } = columnDef
+    const headStyles = {
+      ...(meta?.headStyles || {}),
+      ...pinnedStyles,
+    }
+    const styles = meta?.styles || {}
 
-      const resizeFuntions =
-        enableResize && getCanResize()
-          ? {
-              onMouseDown: getResizeHandler(),
-              onTouchStart: getResizeHandler(),
-              getIsResizing,
-              deltaOffset: table.getState().columnSizingInfo.deltaOffset,
-            }
-          : {}
+    const selectedFilter = meta && meta?.filter?.component ? meta?.filter?.component : "default"
+    const filterOptions = meta && meta?.filter ? meta?.filter : {}
+    const tooltipText = meta && meta?.tooltip ? meta?.tooltip : ""
+    const Filter = availableFilters[selectedFilter]
 
-      const headWidth = getSize()
+    const resizeFuntions =
+      enableResize && getCanResize()
+        ? {
+            onMouseDown: getResizeHandler(),
+            onTouchStart: getResizeHandler(),
+            getIsResizing,
+            deltaOffset: table.getState().columnSizingInfo.deltaOffset,
+          }
+        : {}
 
-      if (getCanSort() && enableSorting) {
-        return (
-          <Table.SortingHeadCell
-            width={headWidth}
-            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()}
-            key={id}
-            colSpan={colSpan}
-            filter={
-              column.getCanFilter() && (
-                <Filter column={column} testPrefix={testPrefix} {...filterOptions} />
-              )
-            }
-            headStyles={headStyles}
-            styles={styles}
-            tooltipText={tooltipText}
-            {...resizeFuntions}
-          >
-            {isPlaceholder ? null : flexRender(column.columnDef.header, getContext())}{" "}
-          </Table.SortingHeadCell>
-        )
-      }
+    const headWidth = getSize()
 
+    if (getCanSort() && enableSorting) {
       return (
-        <Table.HeadCell
-          width={headWidth}
-          minWidth={column.columnDef.minSize}
-          maxWidth={column.columnDef.maxSize}
+        <Table.SortingHeadCell
+          colSpan={colSpan}
           data-testid={`netdata-table-head-cell${testPrefix}`}
-          key={id}
-          styles={styles}
-          tooltipText={tooltipText}
           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}
+          tooltipText={tooltipText}
+          width={headWidth}
           {...resizeFuntions}
         >
-          {isPlaceholder ? null : flexRender(column.columnDef.header, getContext())}
-        </Table.HeadCell>
+          {isPlaceholder ? null : flexRender(column.columnDef.header, getContext())}{" "}
+        </Table.SortingHeadCell>
       )
     }
-  )
 
-  return HeadCell
-}
+    return (
+      <Table.HeadCell
+        data-testid={`netdata-table-head-cell${testPrefix}`}
+        filter={
+          column.getCanFilter() && (
+            <Filter column={column} testPrefix={testPrefix} {...filterOptions} />
+          )
+        }
+        headStyles={headStyles}
+        maxWidth={column.columnDef.maxSize}
+        minWidth={column.columnDef.minSize}
+        key={id}
+        styles={styles}
+        tooltipText={tooltipText}
+        width={headWidth}
+        {...resizeFuntions}
+      >
+        {isPlaceholder ? null : flexRender(column.columnDef.header, getContext())}
+      </Table.HeadCell>
+    )
+  })
 
 export default makeHeadCell
diff --git a/src/components/tableV2/core/rows.js b/src/components/tableV2/core/rows.js
diff --git a/src/components/tableV2/features/columnPinning.js b/src/components/tableV2/features/columnPinning.js

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@netdata/netdata-ui",`
`3`		`- "version": "2.5.7",`
	`3`	`+ "version": "2.5.8",`
`4`	`4`	`"description": "netdata UI kit",`
`5`	`5`	`"main": "./lib/index.js",`
`6`	`6`	`"files": [`