v5.0.35

Author: novykh

package.json

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

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

@@ -100,10 +100,10 @@ const BodyHeaderCell = ({
             </Label>
           )}
           <Sorting sortable={column.getCanSort()} sorting={column.getIsSorted()} />
+          <Info meta={meta} />
         </LabelContainer>
         <Filter column={column} testPrefix={testPrefix} index={index} />
       </Flex>
-      <Info meta={meta} />
       <ResizeHandler header={header} table={table} />
       {children}
     </Flex>

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

@@ -9,7 +9,7 @@ const Info = ({ meta }) => {
   if (!tooltipText) return null
 
   return (
-    <Flex position="absolute" top="1px" right="1px" width={3} height={3}>
+    <Flex width={3} height={3}>
       <Tooltip align="bottom" content={tooltipText}>
         <Icon color="nodeBadgeColor" size="small" name="information" />
       </Tooltip>

src/components/table/body/index.js

@@ -1,6 +1,7 @@
 import React, { memo, useCallback, useRef, useEffect } from "react"
 import { useVirtualizer, defaultRangeExtractor } from "@tanstack/react-virtual"
 import identity from "lodash/identity"
+import Flex from "@/components/templates/flex"
 import { useTableState } from "../provider"
 import Row from "./row"
 import Header from "./header"
@@ -91,17 +92,14 @@ const Body = memo(
     }, [virtualRows, getHasPrevPage(), loading])
 
     return (
-      <div
+      <Flex
         ref={ref}
-        style={{
-          display: "flex",
-          height: "100%",
-          overflow: "auto",
-          flex: "1",
-          // maxWidth: `min(${table.getTotalSize()}, 100%)`, // WHY: Removing since it causes issues with fullWidth cells
-        }}
+        height="100%"
+        overflow="auto"
+        flex="1"
         data-testid={`netdata-table${testPrefix}`}
         onScroll={onScroll}
+        border
       >
         <div
           style={{
@@ -155,7 +153,7 @@ const Body = memo(
             )
           })}
         </div>
-      </div>
+      </Flex>
     )
   }
 )

src/components/table/header/actions/columnVisibility/columnsMenu.js

@@ -115,7 +115,6 @@ const ColumnsMenu = ({
             columns={pinnedColumns}
             searchQuery={searchQuery}
             dataGa={dataGa}
-            title="Pinned"
             showBorder
           />
           {columnGroups?.length ? (

src/components/table/header/actions/columnVisibility/index.js

@@ -7,6 +7,11 @@ import { useTableState } from "../../../provider"
 
 const rerenderSelector = state => state.columnVisibility
 
+const excludedById = {
+  selectionColumn: true,
+  rowActionsColumn: true,
+}
+
 const ColumnVisibilityAction = ({
   alwaysEnabled,
   columnPinning = {},
@@ -35,6 +40,8 @@ const ColumnVisibilityAction = ({
 
     table.getHeaderGroups().forEach(headerGroup => {
       headerGroup.headers.forEach(header => {
+        if (excludedById[header.column.id]) return
+
         if (header.column.columns && header.column.columns.length > 0) {
           const groupColumns = header.column.columns.filter(col => col.getCanHide())
           if (groupColumns.length > 0) {
@@ -54,7 +61,7 @@ const ColumnVisibilityAction = ({
     })
 
     return groups
-  }, [table])
+  }, [table.getAllLeafColumns()])
 
   const allColumns = useMemo(
     () =>
@@ -89,6 +96,7 @@ const ColumnVisibilityAction = ({
         { columns: [], pinnedColumns: [] }
       )
     : { columns: allColumns, pinnedColumns: [] }
+
   return (
     <>
       <BulkAction

src/components/table/header/index.js

@@ -38,7 +38,9 @@ const Header = ({
       background="mainBackground"
       gap={1}
       alignItems="center"
-      padding={[1]}
+      padding={[2, 3]}
+      round
+      border={{ side: ["vertical", "top"] }}
       {...tableMeta.bulkActionsStyles}
     >
       {typeof title === "string" ? <TextBig strong>{title}</TextBig> : title}