v4.7.0

Author: novykh

package.json

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

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

@@ -14,9 +14,15 @@ const rerenderSelector = state => {
   }
 }
 
-const HeaderGroup = ({ id, headers, testPrefix, ...rest }) => {
+const HeaderGroup = ({ id, headers, testPrefix, rowReverse, ...rest }) => {
   return (
-    <Flex id={id} data-testid={`netdata-table-headRow${testPrefix}`} flex background="tableRowBg2">
+    <Flex
+      id={id}
+      data-testid={`netdata-table-headRow${testPrefix}`}
+      flex
+      background="tableRowBg2"
+      rowReverse={rowReverse}
+    >
       {headers.map((header, index) => (
         <Cell
           key={header.id}
@@ -41,7 +47,7 @@ const HeaderGroup = ({ id, headers, testPrefix, ...rest }) => {
   )
 }
 
-const HeaderGroups = ({ groups, size, side, ...rest }) => {
+const HeaderGroups = ({ groups, size, side, flex = "grow", ...rest }) => {
   if (!groups[0].headers.length) return null
 
   return (
@@ -55,7 +61,7 @@ const HeaderGroups = ({ groups, size, side, ...rest }) => {
         : { left: 0, border: { side: "right" } })}
       zIndex={side ? 11 : undefined}
       width={`${size}px`}
-      flex="grow"
+      flex={flex}
       column
     >
       <HeaderGroup headers={groups[0].headers} id={groups[0].id} key={groups[0].id} {...rest} />
@@ -98,7 +104,9 @@ const BodyHeader = memo(({ table, testPrefix, ...rest }) => {
         size={table.getRightTotalSize()}
         testPrefix={testPrefix}
         {...rest}
+        flex={false}
         table={table}
+        rowReverse
       />
     </Flex>
   )

src/components/table/body/index.js

@@ -97,6 +97,7 @@ const Body = memo(
           height: "100%",
           overflow: "auto",
           flex: "1",
+          maxWidth: `min(${table.getTotalSize()}, 100%)`,
         }}
         data-testid={`netdata-table${testPrefix}`}
       >

src/components/table/body/row.js

@@ -176,11 +176,12 @@ export default memo(
             border={{ side: "left" }}
             zIndex={zIndex || 1}
             basis={`${table.getRightTotalSize()}px`}
-            flex="grow"
+            flex={false}
             background={index % 2 === 0 ? "tableRowBg2" : "tableRowBg"}
             _hover={{
               background: index % 2 === 0 ? "tableRowBg2Hover" : "tableRowBgHover",
             }}
+            rowReverse
           >
             {row.getRightVisibleCells().map((cell, index) => (
               <CellGroup