Add group headers.

Author: novykh

src/components/drops/drop/container.js

@@ -18,7 +18,7 @@ const styledAnimation = css`
   animation-delay: 0.01s;
 `
 
-const Container = styled(Flex).attrs(({ zIndex = 60, ...rest }) => ({
+const Container = styled(Flex).attrs(({ zIndex = 60000, ...rest }) => ({
   zIndex,
   position: "fixed",
   ...rest,

src/components/drops/drop/index.js

@@ -15,6 +15,7 @@ const Backdrop = styled.div`
   inset: 0;
   pointer-events: all;
   background-color: rgba(0, 0, 0, 0.3);
+  z-index: 50000;
   ${backdropBlur};
 }
 `

src/components/icon/assets/weights_compare.svg

@@ -303,6 +303,8 @@ import virtualization from "./assets/virtualization.svg"
 import warning from "./assets/warning.svg"
 import warning_triangle from "./assets/warning_triangle.svg"
 import warning_triangle_hollow from "./assets/warning_triangle_hollow.svg"
+import weights_compare from "./assets/weights_compare.svg"
+import weights_drill_down from "./assets/weights_drill_down.svg"
 import x from "./assets/x.svg"
 import firewallSolid from "./assets/firewall_solid.svg"
 import qualityOfServiceSolid from "./assets/qualityOfService_solid.svg"
@@ -622,5 +624,7 @@ export const iconsList = {
   warning,
   warning_triangle,
   warning_triangle_hollow,
+  weights_compare,
+  weights_drill_down,
   x,
 }

src/components/icon/assets/weights_drill_down.svg

@@ -34,18 +34,39 @@ const FullTable = ({
       {...rest}
     >
       <Table.Head data-testid={`netdata-table-head${testPrefix}`}>
-        <Table.HeadRow data-testid={`netdata-table-headRow${testPrefix}`}>
-          <HeadCell
-            dataGa={dataGa}
-            enableResize={enableResize}
-            enableSorting={enableSorting}
-            headers={headers}
-            pinnedStyles={pinnedStyles}
-            table={table}
-            testPrefix={testPrefix}
-            coloredSortedColumn={coloredSortedColumn}
-          />
-        </Table.HeadRow>
+        {Array.isArray(table.getHeaderGroups()) ? (
+          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
+              dataGa={dataGa}
+              enableResize={enableResize}
+              enableSorting={enableSorting}
+              headers={headers}
+              pinnedStyles={pinnedStyles}
+              table={table}
+              testPrefix={testPrefix}
+              coloredSortedColumn={coloredSortedColumn}
+            />
+          </Table.HeadRow>
+        )}
       </Table.Head>
       <Table.Body data-testid={`netdata-table-body${testPrefix}`}>
         <Rows

src/components/icon/icons-list.js

@@ -114,6 +114,7 @@ const HeadCell = ({
 
       return (
         <Table.HeadCell
+          colSpan={colSpan}
           data-testid={`netdata-table-head-cell${testPrefix}`}
           filter={
             column.getCanFilter() && (

src/components/tableV2/core/fullTable.js

@@ -9,7 +9,36 @@ export default (dataColumns, { rowActions, enableSelection, testPrefix, tableMet
   return useMemo(() => {
     if (!dataColumns || dataColumns.length < 1) return []
 
+    let isGrouped = false
+
     dataColumns = dataColumns.map((col, index) => {
+      if (Array.isArray(col.columns)) {
+        isGrouped = true
+
+        return {
+          id: index,
+          ...col,
+          columns: col.columns.map((subCol, index) => {
+            if (!subCol.id) throw new Error(`Please provide id at ${index}`)
+
+            return {
+              enableColumnFilter: false,
+              enableGlobalFilter: true,
+              enableSorting: true,
+              size: 150,
+              maxSize: 5000,
+              minSize: 150,
+              enableHiding: true,
+              enableResize: true,
+              footer: props => props.column.id,
+              tableMeta,
+              ...subCol,
+              accessorKey: subCol.accessorKey || subCol.id,
+            }
+          }),
+        }
+      }
+
       if (!col.id) throw new Error(`Please provide id at ${index}`)
 
       return {
@@ -28,8 +57,14 @@ export default (dataColumns, { rowActions, enableSelection, testPrefix, tableMet
       }
     })
 
-    if (selectionColumn) dataColumns.unshift(selectionColumn)
-    if (rowActionsColumn) dataColumns.push(rowActionsColumn)
+    if (selectionColumn)
+      dataColumns.unshift(
+        isGrouped ? { id: "selectionColumn", columns: selectionColumn } : selectionColumn
+      )
+    if (rowActionsColumn)
+      dataColumns.push(
+        isGrouped ? { id: "rowActionsColumn", columns: rowActionsColumn } : rowActionsColumn
+      )
 
     return dataColumns
   }, [dataColumns, rowActionsColumn, selectionColumn])