Table fixes.

Author: novykh

src/components/select/index.js

@@ -96,7 +96,7 @@ const makeCustomStyles = (theme, { size, ...providedStyles } = {}) => ({
     borderColor: state.isFocused ? theme.colors.inputBorderFocus : theme.colors.inputBorder,
     boxShadow: "none",
     minWidth: 160,
-    ...(size === "tiny" ? { minHeight: 28 } : {}),
+    ...(size === "tiny" ? { minHeight: 18 } : { minHeight: 18 }),
     ":hover": {
       borderColor: theme.colors.inputBorderHover,
     },
@@ -158,6 +158,16 @@ const makeCustomStyles = (theme, { size, ...providedStyles } = {}) => ({
   }),
   ...(size === "tiny"
     ? {
+        dropdownIndicator: styles => ({ ...styles, padding: "3px" }),
+        clearIndicator: styles => ({ ...styles, padding: "3px" }),
+        indicatorsContainer: styles => ({ ...styles, minHeight: 18 }),
+        valueContainer: styles => ({
+          ...styles,
+          minHeight: 18,
+          padding: "1px 6px",
+        }),
+      }
+    : {
         dropdownIndicator: styles => ({ ...styles, padding: "3px" }),
         clearIndicator: styles => ({ ...styles, padding: "3px" }),
         indicatorsContainer: styles => ({ ...styles, minHeight: 28 }),
@@ -166,8 +176,7 @@ const makeCustomStyles = (theme, { size, ...providedStyles } = {}) => ({
           minHeight: 28,
           padding: "1px 6px",
         }),
-      }
-    : {}),
+      }),
   ...providedStyles,
 })
 

src/components/tableV2/components/pagination.js

@@ -0,0 +1,72 @@
+import React, { memo } from "react"
+import Flex from "src/components/templates/flex"
+import { Text } from "src/components/typography"
+import { IconButton } from "src/components/button"
+
+const Pagination = ({ table }) => {
+  const {
+    nextPage,
+    previousPage,
+    getCanPreviousPage,
+    getCanNextPage,
+    getPageCount,
+    setPageIndex,
+    resetPageIndex,
+  } = table
+
+  const pageIndex = table.getState().pagination.pageIndex
+
+  return (
+    <Flex
+      alignItems="center"
+      justifyContent="end"
+      height="45px"
+      background="mainBackground"
+      border={{ side: "top", color: "borderSecondary" }}
+    >
+      <IconButton
+        title="First"
+        data-testid={"pagination-go-to-first"}
+        cursor="pointer"
+        onClick={resetPageIndex}
+        icon="chevron_left_start"
+        iconSize="small"
+        tooltip="test"
+        disabled={!getCanPreviousPage()}
+      />
+      <IconButton
+        title="Previous"
+        data-testid={"pagination-go-to-previous"}
+        cursor="pointer"
+        onClick={previousPage}
+        icon="chevron_left"
+        iconSize="small"
+        tooltip="Previous"
+        disabled={!getCanPreviousPage()}
+      />
+      <Text data-testid={"pagination-counter"}>
+        Page {getPageCount() === 0 ? 0 : pageIndex} of {getPageCount()}
+      </Text>
+      <IconButton
+        title="Next"
+        data-testid={"pagination-go-to-next"}
+        cursor="pointer"
+        onClick={nextPage}
+        icon="chevron_right"
+        iconSize="small"
+        disabled={!getCanNextPage()}
+      />
+      <IconButton
+        title="Last"
+        data-testid={"pagination-go-to-last"}
+        cursor="pointer"
+        onClick={() => setPageIndex(getPageCount() - 1)}
+        icon="chevron_right_end"
+        iconSize="small"
+        disabled={!getCanNextPage()}
+      />
+    </Flex>
+  )
+}
+
+export default memo(Pagination)

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

@@ -345,83 +345,4 @@ Table.Row = forwardRef(
   }
 )
 
-export const Pagination = ({
-  pageIndex,
-  pageCount,
-  hasNext,
-  hasPrevious,
-  onNextPage,
-  onPreviousPage,
-  setPageIndex,
-  resetPageIndex,
-}) => {
-  const handleOnPrevious = useCallback(() => {
-    if (hasPrevious) onPreviousPage()
-  }, [hasPrevious])
-
-  const handleOnNextPage = useCallback(() => {
-    if (hasNext) onNextPage()
-  }, [hasNext])
-
-  const handleGoToLastPage = useCallback(() => {
-    setPageIndex(pageCount - 1)
-  }, [pageCount, setPageIndex])
-
-  const handleGoToFirstPage = useCallback(() => {
-    resetPageIndex()
-  }, [resetPageIndex])
-
-  return (
-    <Flex
-      alignItems="center"
-      justifyContent="end"
-      height="45px"
-      background="mainBackground"
-      border={{ side: "top", color: "borderSecondary" }}
-    >
-      <IconButton
-        title="First"
-        data-testid={"pagination-go-to-first"}
-        cursor="pointer"
-        onClick={handleGoToFirstPage}
-        icon="chevron_left_start"
-        iconSize="small"
-        tooltip="test"
-        disabled={!hasPrevious}
-      />
-      <IconButton
-        title="Previous"
-        data-testid={"pagination-go-to-previous"}
-        cursor="pointer"
-        onClick={handleOnPrevious}
-        icon="chevron_left"
-        iconSize="small"
-        tooltip="Previous"
-        disabled={!hasPrevious}
-      />
-      <Text data-testid={"pagination-counter"}>
-        Page {pageCount === 0 ? 0 : pageIndex} of {pageCount}
-      </Text>
-      <IconButton
-        title="Next"
-        data-testid={"pagination-go-to-next"}
-        cursor="pointer"
-        onClick={handleOnNextPage}
-        icon="chevron_right"
-        iconSize="small"
-        disabled={!hasNext}
-      />
-      <IconButton
-        title="Last"
-        data-testid={"pagination-go-to-last"}
-        cursor="pointer"
-        onClick={handleGoToLastPage}
-        icon="chevron_right_end"
-        iconSize="small"
-        disabled={!hasNext}
-      />
-    </Flex>
-  )
-}
-
 export default Table

src/components/tableV2/core/fullTable.js

@@ -1,6 +1,6 @@
 import React from "react"
 import Table from "./base-table"
-import HeadCell from "./headCell"
+import HeadCells from "./headCells"
 import Rows from "./rows"
 
 const FullTable = ({
@@ -34,39 +34,24 @@ const FullTable = ({
       {...rest}
     >
       <Table.Head data-testid={`netdata-table-head${testPrefix}`}>
-        {table.getHeaderGroups().length > 1 ? (
-          table.getHeaderGroups().map((headerGroup, index) => (
-            <Table.HeadRow
-              key={index}
-              id={headerGroup.id}
-              data-testid={`netdata-table-headRow${testPrefix}`}
-            >
-              <HeadCell
-                dataGa={dataGa}
-                enableResize={enableResize}
-                enableSorting={enableSorting}
-                headers={headerGroup.headers}
-                pinnedStyles={pinnedStyles}
-                table={table}
-                testPrefix={testPrefix}
-                coloredSortedColumn={coloredSortedColumn}
-              />
-            </Table.HeadRow>
-          ))
-        ) : (
-          <Table.HeadRow data-testid={`netdata-table-headRow${testPrefix}`}>
-            <HeadCell
+        {headers.map((headerGroup, index) => (
+          <Table.HeadRow
+            key={index}
+            id={headerGroup.id}
+            data-testid={`netdata-table-headRow${testPrefix}`}
+          >
+            <HeadCells
               dataGa={dataGa}
               enableResize={enableResize}
               enableSorting={enableSorting}
-              headers={headers}
+              headers={headerGroup.headers}
               pinnedStyles={pinnedStyles}
               table={table}
               testPrefix={testPrefix}
-              coloredSortedColumn={coloredSortedColumn}
+              coloredSortedColumn={enableSorting && coloredSortedColumn}
             />
           </Table.HeadRow>
-        )}
+        ))}
       </Table.Head>
       <Table.Body data-testid={`netdata-table-body${testPrefix}`}>
         <Rows
@@ -79,7 +64,7 @@ const FullTable = ({
           table={table}
           testPrefix={testPrefix}
           testPrefixCallback={testPrefixCallback}
-          coloredSortedColumn={coloredSortedColumn}
+          coloredSortedColumn={enableSorting && coloredSortedColumn}
           meta={meta}
           {...virtualizeOptions}
         />

src/components/tableV2/core/headCell.js renamed to src/components/tableV2/core/headCells.js

@@ -37,7 +37,7 @@ const availableFilters = {
   default: SearchFilter,
 }
 
-const HeadCell = ({
+const HeadCells = ({
   enableResize,
   enableSorting,
   headers,
@@ -138,4 +138,4 @@ const HeadCell = ({
     }
   )
 
-export default HeadCell
+export default HeadCells

src/components/tableV2/features/columnPinning.js

@@ -17,7 +17,7 @@ const ColumnPinning = ({
   ...rest
 }) => {
   const getThemeColor = useColor()
-  const headers = table.getLeftFlatHeaders()
+  const headers = table.getLeftHeaderGroups()
 
   return (
     <Box