Fix sort color for column.

Author: novykh

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

@@ -184,6 +184,7 @@ Table.SortingHeadCell = forwardRef(
       styles = {},
       headStyles = {},
       tooltipText,
+      coloredSortedColumn,
       ...props
     },
     ref
@@ -213,7 +214,7 @@ Table.SortingHeadCell = forwardRef(
         headStyles={headStyles}
         {...props}
         filter={filter}
-        {...(!!sortDirection && { background: "successBackground" })}
+        {...(coloredSortedColumn && !!sortDirection && { background: "successBackground" })}
       >
         <Box
           onMouseEnter={onMouseEnter}
@@ -229,7 +230,7 @@ Table.SortingHeadCell = forwardRef(
             gap={1}
           >
             {children}
-            <Box position="absolute" top={1} right={-12}>
+            <Box position="absolute" top={1} right="-16px">
               <Icon
                 height="16px"
                 width="16px"

src/components/tableV2/core/fullTable.js

@@ -20,6 +20,7 @@ const FullTable = ({
   width,
   scrollParentRef,
   virtualizeOptions = {},
+  coloredSortedColumn,
   ...rest
 }) => {
   return (
@@ -40,6 +41,7 @@ const FullTable = ({
             pinnedStyles={pinnedStyles}
             table={table}
             testPrefix={testPrefix}
+            coloredSortedColumn={coloredSortedColumn}
           />
         </Table.HeadRow>
       </Table.Head>
@@ -54,6 +56,7 @@ const FullTable = ({
           table={table}
           testPrefix={testPrefix}
           testPrefixCallback={testPrefixCallback}
+          coloredSortedColumn={coloredSortedColumn}
           {...virtualizeOptions}
         />
       </Table.Body>

src/components/tableV2/core/headCell.js

@@ -37,7 +37,15 @@ const availableFilters = {
   default: SearchFilter,
 }
 
-const HeadCell = ({ enableResize, enableSorting, headers, pinnedStyles = {}, table, testPrefix }) =>
+const HeadCell = ({
+  enableResize,
+  enableSorting,
+  headers,
+  pinnedStyles = {},
+  table,
+  testPrefix,
+  ...rest
+}) =>
   headers.map(({ id, colSpan, getContext, isPlaceholder, column, getResizeHandler, getSize }) => {
     const { getCanSort, columnDef, getCanResize, getIsResizing } = column
     const { meta } = columnDef
@@ -87,6 +95,7 @@ const HeadCell = ({ enableResize, enableSorting, headers, pinnedStyles = {}, tab
           tooltipText={tooltipText}
           width={headWidth}
           {...resizeFuntions}
+          {...rest}
         >
           {isPlaceholder ? null : flexRender(column.columnDef.header, getContext())}{" "}
         </Table.SortingHeadCell>
@@ -110,6 +119,7 @@ const HeadCell = ({ enableResize, enableSorting, headers, pinnedStyles = {}, tab
         tooltipText={tooltipText}
         width={headWidth}
         {...resizeFuntions}
+        {...rest}
       >
         {isPlaceholder ? null : flexRender(column.columnDef.header, getContext())}
       </Table.HeadCell>

src/components/tableV2/core/rows.js

@@ -18,6 +18,7 @@ const Rows = ({
   hasNextPage,
   loading,
   loadMore,
+  coloredSortedColumn,
 }) => {
   const { onHover, hoveredRow, hoveredColumn } = useTableContext()
 
@@ -81,10 +82,11 @@ const Rows = ({
                 onMouseEnter={() => onHover({ row: row.id, column: cell.column.id })}
                 onMouseLeave={() => onHover()}
                 {...cell.column.columnDef.meta}
-                {...(!!cell.column.getIsSorted() && {
-                  background: "successBackground",
-                  backgroundOpacity: 0.3,
-                })}
+                {...(coloredSortedColumn &&
+                  !!cell.column.getIsSorted() && {
+                    background: "successBackground",
+                    backgroundOpacity: 0.3,
+                  })}
                 index={virtualRow.index}
                 isRowHovering={row.id === hoveredRow}
                 isColumnHovering={cell.column.id === hoveredColumn}

src/components/tableV2/features/columnPinning.js

@@ -14,6 +14,7 @@ const ColumnPinning = ({
   testPrefix,
   testPrefixCallback,
   scrollParentRef,
+  ...rest
 }) => {
   const getThemeColor = useColor()
   const headers = table.getLeftFlatHeaders()
@@ -42,6 +43,7 @@ const ColumnPinning = ({
         testPrefix={`pin${testPrefix}`}
         testPrefixCallback={testPrefixCallback}
         width={enableResize ? `${table.getLeftTotalSize()}px` : "100%"}
+        {...rest}
       />
     </Box>
   )

src/components/tableV2/netdataTable.js

@@ -57,6 +57,7 @@ const NetdataTable = ({
   testPrefix = "",
   testPrefixCallback,
   virtualizeOptions = {},
+  coloredSortedColumn = true,
   ...rest
 }) => {
   const [columnVisibility, setColumnVisibility] = useState(defaultColumnVisibility)
@@ -196,6 +197,7 @@ const NetdataTable = ({
               dataGa={dataGa}
               scrollParentRef={scrollParentRef}
               virtualizeOptions={virtualizeOptions}
+              coloredSortedColumn={coloredSortedColumn}
             />
           )}
           <MainTable
@@ -211,6 +213,7 @@ const NetdataTable = ({
             tableRef={tableRef}
             testPrefix={testPrefix}
             virtualizeOptions={virtualizeOptions}
+            coloredSortedColumn={coloredSortedColumn}
             {...rest}
           />
         </Flex>