v5.2.0

Author: novykh

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netdata/netdata-ui",
-  "version": "5.1.16",
+  "version": "5.2.0",
   "description": "netdata UI kit",
   "main": "dist/index.js",
   "module": "dist/es6/index.js",
@@ -39,6 +39,7 @@
   ],
   "dependencies": {
     "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/modifiers": "^9.0.0",
     "@dnd-kit/sortable": "^10.0.0",
     "@elastic/react-search-ui": "^1.23.0",
     "@elastic/search-ui-site-search-connector": "^1.23.0",

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

@@ -8,6 +8,8 @@ import ResizeHandler from "./resizeHandler"
 import Sorting, { SortIconContainer } from "./sorting"
 import Info from "./info"
 import Filter from "./filter"
+import useSortableHeader from "./sortableHeader"
+import DragHandle from "./dragHandle"
 
 const Label = styled(Text)`
   width: 100%;
@@ -40,10 +42,16 @@ const BodyHeaderCell = ({
   children,
   isSubheader,
   hasSubheaders,
+  enableColumnReordering,
 }) => {
   useTableState(rerenderSelector)
 
   const { column } = header
+  const { sortableRef, sortableStyle, dragHandleProps, isDragging } = useSortableHeader(
+    column.id,
+    enableColumnReordering
+  )
+
   const tableMeta =
     typeof column.columnDef.tableMeta === "function"
       ? column.columnDef.tableMeta({}, column, index)
@@ -63,6 +71,8 @@ const BodyHeaderCell = ({
 
   return (
     <Flex
+      ref={sortableRef}
+      style={enableColumnReordering ? sortableStyle : undefined}
       flex={
         !column.columnDef.fullWidth && (column.columnDef.notFlex || column.getCanResize())
           ? false
@@ -98,6 +108,7 @@ const BodyHeaderCell = ({
           overflow="hidden"
           width="100%"
         >
+          <DragHandle dragHandleProps={dragHandleProps} visible={isDragging} />
           {column.isPlaceholder ? null : (
             <Label
               as={column.columnDef.labelAs}

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

@@ -0,0 +1,41 @@
+import React from "react"
+import styled from "styled-components"
+import Flex from "@/components/templates/flex"
+import { Icon } from "@/components/icon"
+
+const HandleContainer = styled(Flex)`
+  cursor: grab;
+  opacity: 0;
+  transition: opacity 0.15s ease-in-out;
+  flex-shrink: 0;
+
+  &:active {
+    cursor: grabbing;
+  }
+
+  svg {
+    width: 10px;
+    height: 10px;
+  }
+`
+
+export const DragHandle = ({ dragHandleProps, visible }) => {
+  if (!dragHandleProps || Object.keys(dragHandleProps).length === 0) {
+    return null
+  }
+
+  return (
+    <HandleContainer
+      {...dragHandleProps}
+      alignItems="center"
+      justifyContent="center"
+      padding={[0, 1, 0, 0]}
+      style={{ opacity: visible ? 1 : undefined }}
+      className="drag-handle"
+    >
+      <Icon name="hamburger" color="textLite" />
+    </HandleContainer>
+  )
+}
+
+export default DragHandle

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

@@ -0,0 +1,30 @@
+import React from "react"
+import { createPortal } from "react-dom"
+import { DragOverlay as DndDragOverlay } from "@dnd-kit/core"
+import styled from "styled-components"
+import Flex from "@/components/templates/flex"
+import { Text } from "@/components/typography"
+
+const OverlayContainer = styled(Flex)`
+  background: ${({ theme }) => theme.colors.mainBackground};
+  border: 1px solid ${({ theme }) => theme.colors.border};
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  padding: 8px 16px;
+  border-radius: 4px;
+  opacity: 0.9;
+`
+
+const DragOverlay = ({ activeColumn }) => {
+  if (!activeColumn) return null
+
+  return createPortal(
+    <DndDragOverlay>
+      <OverlayContainer alignItems="center" gap={2}>
+        <Text strong>{activeColumn.columnDef.header || activeColumn.id}</Text>
+      </OverlayContainer>
+    </DndDragOverlay>,
+    document.body
+  )
+}
+
+export default DragOverlay

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

@@ -1,9 +1,20 @@
-import React, { memo } from "react"
+import React, { memo, useState, useMemo, useCallback } from "react"
 import styled from "styled-components"
+import {
+  DndContext,
+  closestCenter,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+} from "@dnd-kit/core"
+import { SortableContext, horizontalListSortingStrategy, arrayMove } from "@dnd-kit/sortable"
+import { restrictToHorizontalAxis } from "@dnd-kit/modifiers"
 import Flex from "@/components/templates/flex"
 import { useTableState } from "../../provider"
 import Cell from "./cell"
 import { Handler } from "./resizeHandler"
+import DragOverlay from "./dragOverlay"
 
 const rerenderSelector = state => {
   const columns = state.allColumns || []
@@ -19,8 +30,10 @@ const rerenderSelector = state => {
   }
 }
 
-const HeaderGroup = ({ id, headers, testPrefix, rowReverse, ...rest }) => {
-  return (
+const HeaderGroup = ({ id, headers, testPrefix, rowReverse, enableColumnReordering, ...rest }) => {
+  const columnIds = useMemo(() => headers.map(h => h.column.id), [headers])
+
+  const content = (
     <Flex
       id={id}
       data-testid={`netdata-table-headRow${testPrefix}`}
@@ -36,23 +49,37 @@ const HeaderGroup = ({ id, headers, testPrefix, rowReverse, ...rest }) => {
           header={header}
           testPrefix={testPrefix}
           hasSubheaders={!!header.subHeaders.length}
+          enableColumnReordering={
+            enableColumnReordering && header.column.columnDef.enableReordering !== false
+          }
         >
           {!!header.subHeaders.length && (
             <HeaderGroup
               headers={header.subHeaders}
               id={header.id}
               key={header.id}
               {...rest}
+              enableColumnReordering={enableColumnReordering}
               isSubheader
             />
           )}
         </Cell>
       ))}
     </Flex>
   )
+
+  if (!enableColumnReordering) {
+    return content
+  }
+
+  return (
+    <SortableContext items={columnIds} strategy={horizontalListSortingStrategy}>
+      {content}
+    </SortableContext>
+  )
 }
 
-const HeaderGroups = ({ groups, size, side, flex = "grow", ...rest }) => {
+const HeaderGroups = ({ groups, size, side, flex = "grow", enableColumnReordering, ...rest }) => {
   if (!groups[0].headers.length) return null
 
   return (
@@ -69,7 +96,13 @@ const HeaderGroups = ({ groups, size, side, flex = "grow", ...rest }) => {
       flex={flex}
       column
     >
-      <HeaderGroup headers={groups[0].headers} id={groups[0].id} key={groups[0].id} {...rest} />
+      <HeaderGroup
+        headers={groups[0].headers}
+        id={groups[0].id}
+        key={groups[0].id}
+        {...rest}
+        enableColumnReordering={enableColumnReordering}
+      />
     </Flex>
   )
 }
@@ -82,12 +115,67 @@ const HeaderRow = styled(Flex)`
   &:hover ${Handler} {
     display: block;
   }
+
+  &:hover .drag-handle {
+    opacity: 1;
+  }
 `
 
-const BodyHeader = memo(({ table, testPrefix, ...rest }) => {
+const BodyHeader = memo(({ table, testPrefix, enableColumnReordering, ...rest }) => {
   useTableState(rerenderSelector)
 
-  return (
+  const [activeId, setActiveId] = useState(null)
+
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        distance: 5,
+      },
+    }),
+    useSensor(KeyboardSensor)
+  )
+
+  const activeColumn = useMemo(() => {
+    if (!activeId) return null
+    return table.getColumn(activeId)
+  }, [activeId, table])
+
+  const handleDragStart = useCallback(event => {
+    setActiveId(event.active.id)
+  }, [])
+
+  const handleDragEnd = useCallback(
+    event => {
+      const { active, over } = event
+      setActiveId(null)
+
+      if (!active || !over || active.id === over.id) return
+
+      const currentOrder = table.getState().columnOrder
+      const allColumns = table.getAllLeafColumns()
+
+      let columnOrder = currentOrder.length > 0 ? currentOrder : allColumns.map(c => c.id)
+
+      const oldIndex = columnOrder.indexOf(active.id)
+      const newIndex = columnOrder.indexOf(over.id)
+
+      if (oldIndex === -1 || newIndex === -1) return
+
+      const activeColumn = table.getColumn(active.id)
+      const overColumn = table.getColumn(over.id)
+      if (activeColumn?.getIsPinned() !== overColumn?.getIsPinned()) return
+
+      const newOrder = arrayMove(columnOrder, oldIndex, newIndex)
+      table.setColumnOrder(newOrder)
+    },
+    [table]
+  )
+
+  const handleDragCancel = useCallback(() => {
+    setActiveId(null)
+  }, [])
+
+  const headerContent = (
     <HeaderRow
       data-testid={`netdata-table-head${testPrefix}`}
       flex
@@ -106,13 +194,15 @@ const BodyHeader = memo(({ table, testPrefix, ...rest }) => {
         {...rest}
         flex={false}
         table={table}
+        enableColumnReordering={enableColumnReordering}
       />
       <HeaderGroups
         groups={table.getCenterHeaderGroups()}
         size={table.getCenterTotalSize()}
         testPrefix={testPrefix}
         {...rest}
         table={table}
+        enableColumnReordering={enableColumnReordering}
       />
       <HeaderGroups
         groups={table.getRightHeaderGroups()}
@@ -122,10 +212,29 @@ const BodyHeader = memo(({ table, testPrefix, ...rest }) => {
         {...rest}
         flex={false}
         table={table}
+        enableColumnReordering={enableColumnReordering}
         rowReverse
       />
     </HeaderRow>
   )
+
+  if (!enableColumnReordering) {
+    return headerContent
+  }
+
+  return (
+    <DndContext
+      sensors={sensors}
+      collisionDetection={closestCenter}
+      modifiers={[restrictToHorizontalAxis]}
+      onDragStart={handleDragStart}
+      onDragEnd={handleDragEnd}
+      onDragCancel={handleDragCancel}
+    >
+      {headerContent}
+      <DragOverlay activeColumn={activeColumn} />
+    </DndContext>
+  )
 })
 
 export default BodyHeader

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

@@ -0,0 +1,33 @@
+import { useSortable } from "@dnd-kit/sortable"
+import { CSS } from "@dnd-kit/utilities"
+
+const useSortableHeader = (columnId, enabled) => {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({
+    id: columnId,
+    disabled: !enabled,
+  })
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1,
+    position: "relative",
+    zIndex: isDragging ? 1 : undefined,
+  }
+
+  return {
+    sortableRef: setNodeRef,
+    sortableStyle: style,
+    dragHandleProps: enabled ? { ...attributes, ...listeners } : {},
+    isDragging,
+  }
+}
+
+export default useSortableHeader

src/components/table/body/index.js

@@ -34,6 +34,7 @@ const Body = memo(
     virtualRef,
     initialOffset = 0,
     onScroll,
+    enableColumnReordering,
     ...rest
   }) => {
     useTableState(rerenderSelector)
@@ -134,6 +135,7 @@ const Body = memo(
                     testPrefix={testPrefix}
                     coloredSortedColumn={coloredSortedColumn}
                     index={virtualRow.index}
+                    enableColumnReordering={enableColumnReordering}
                     {...rest}
                   />
                 ) : (