Create column menu

src/components/ColumnHeader/ColumnHeader.tsx

@@ -1,9 +1,11 @@
-import { KeyboardEvent, ReactNode, useCallback, useEffect, useMemo, useRef } from 'react'
+import { KeyboardEvent, MouseEvent, ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { flushSync } from 'react-dom'
 import { Direction } from '../../helpers/sort.js'
 import { measureWidth } from '../../helpers/width.js'
 import { useCellNavigation } from '../../hooks/useCellsNavigation.js'
 import useColumnWidth from '../../hooks/useColumnWidth.js'
+import ColumnMenu from '../ColumnMenu/ColumnMenu.js'
+import ColumnMenuButton from '../ColumnMenuButton/ColumnMenuButton.js'
 import ColumnResizer from '../ColumnResizer/ColumnResizer.js'
 
 interface Props {
@@ -19,9 +21,12 @@ interface Props {
   ariaColIndex: number // aria col index for the header
   ariaRowIndex: number // aria row index for the header
   className?: string // optional class name
+  isColumnMenuOpen: boolean
+  onToggleColumnMenu: (columnIndex: number) => void
 }
 
-export default function ColumnHeader({ columnIndex, columnName, dataReady, direction, onClick, sortable, orderByIndex, orderBySize, ariaColIndex, ariaRowIndex, className, children }: Props) {
+export default function ColumnHeader({ columnIndex, columnName, dataReady, direction, onClick, sortable, orderByIndex, orderBySize, ariaColIndex, ariaRowIndex, className, children, isColumnMenuOpen, onToggleColumnMenu }: Props) {
+  const [position, setPosition] = useState({ left: 0, top: 0 })
   const ref = useRef<HTMLTableCellElement>(null)
   const { tabIndex, navigateToCell } = useCellNavigation({ ref, ariaColIndex, ariaRowIndex })
   const handleClick = useCallback(() => {
@@ -90,6 +95,20 @@ export default function ColumnHeader({ columnIndex, columnName, dataReady, direc
     }
   }, [onClick])
 
+  const handleColumnMenuClick = useCallback((e: MouseEvent) => {
+    e.stopPropagation()
+    const rect = ref.current?.getBoundingClientRect()
+    const buttonRect = (e.currentTarget as HTMLElement).getBoundingClientRect()
+
+    if (rect) {
+      setPosition({
+        left: buttonRect.left,
+        top: rect.bottom,
+      })
+    }
+    onToggleColumnMenu(columnIndex)
+  }, [columnIndex, onToggleColumnMenu])
+
   return (
     <th
       ref={ref}
@@ -109,13 +128,22 @@ export default function ColumnHeader({ columnIndex, columnName, dataReady, direc
       className={className}
     >
       {children}
+      {sortable && <ColumnMenuButton onClick={handleColumnMenuClick} />}
       <ColumnResizer
         setWidth={setWidth}
         onDoubleClick={autoResize}
         width={width}
         tabIndex={tabIndex}
         navigateToCell={navigateToCell}
       />
+      <ColumnMenu
+        columnName={columnName}
+        isVisible={isColumnMenuOpen}
+        position={position}
+        direction={direction}
+        sortable={sortable ?? false}
+        onClick={onClick}
+      />
     </th>
   )
 }

src/components/ColumnMenu/ColumnMenu.tsx

@@ -0,0 +1,101 @@
+import { createPortal } from 'react-dom'
+import { Direction } from '../../helpers/sort'
+import { usePortalContainer } from '../../hooks/usePortalContainer'
+import { KeyboardEvent, useCallback, useEffect, useRef } from 'react'
+
+interface ColumnMenuProps {
+  columnName: string
+  isVisible: boolean
+  position: {
+    left: number
+    top: number
+  }
+  direction?: Direction
+  sortable?: boolean
+  onClick?: () => void
+}
+
+export default function ColumnMenu({
+  columnName,
+  isVisible,
+  position,
+  direction,
+  sortable,
+  onClick,
+}: ColumnMenuProps) {
+  const { containerRef } = usePortalContainer()
+  const { top, left } = position
+  const menuRef = useRef<HTMLDivElement>(null)
+
+  const getSortDirection = useCallback(() => {
+    if (!sortable) return null
+
+    switch (direction) {
+    case 'ascending':
+      return 'Ascending'
+    case 'descending':
+      return 'Descending'
+    default:
+      return 'Sort'
+    }
+  }, [direction, sortable])
+
+  // Focus the menu when it becomes visible
+  useEffect(() => {
+    if (isVisible && menuRef.current) {
+      menuRef.current.focus()
+    }
+  }, [isVisible])
+
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        e.preventDefault()
+        e.stopPropagation()
+        const columnButton =
+          document.activeElement?.parentElement?.querySelector(
+            'div[role="button"]'
+          )
+        if (columnButton instanceof HTMLElement) {
+          columnButton.focus()
+        }
+      } else if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault()
+        e.stopPropagation()
+        onClick?.()
+      }
+    },
+    [onClick]
+  )
+
+  if (!isVisible) {
+    return null
+  }
+
+  return createPortal(
+    <div
+      role='menu'
+      style={{ top, left }}
+      ref={menuRef}
+      tabIndex={-1}
+      aria-label={`${columnName} column menu`}
+      onKeyDown={handleKeyDown}
+    >
+      <div role='presentation'>{columnName}</div>
+      <hr role='separator' />
+      {sortable &&
+        <>
+          <button
+            role='menuitem'
+            onClick={onClick}
+            tabIndex={0}
+            aria-label={`${getSortDirection()} ${columnName}`}
+          >
+            {getSortDirection()}
+          </button>
+        </>
+      }
+    </div>,
+    containerRef.current ?? document.body
+  )
+}

src/components/ColumnMenuButton/ColumnMenuButton.tsx

@@ -0,0 +1,46 @@
+import { KeyboardEvent, MouseEvent, useCallback, useRef } from 'react'
+
+interface ColumnMenuButtonProps {
+  onClick?: (e: MouseEvent) => void
+}
+
+export default function ColumnMenuButton({ onClick }: ColumnMenuButtonProps) {
+  const buttonRef = useRef<HTMLDivElement>(null)
+
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent) => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault()
+        e.stopPropagation()
+
+        // Create a synthetic mouse event with position information from the button
+        if (buttonRef.current && onClick) {
+          const rect = buttonRef.current.getBoundingClientRect()
+          const syntheticEvent = {
+            ...e,
+            clientX: rect.left + rect.width / 2,
+            stopPropagation: () => {
+              e.stopPropagation()
+            },
+          } as unknown as MouseEvent
+
+          onClick(syntheticEvent)
+        }
+      }
+    },
+    [onClick]
+  )
+
+  return (
+    <div
+      ref={buttonRef}
+      onClick={onClick}
+      onKeyDown={handleKeyDown}
+      aria-label='Column Menu Button'
+      role='button'
+      tabIndex={0}
+    >
+      <span>⋮</span>
+    </div>
+  )
+}

src/components/HighTable/HighTable.module.css

@@ -43,18 +43,24 @@
       user-select: none;
       top: 0;
       z-index: var(--header-z-index, auto);
+      overflow: auto;
     }
   }
 
   /* sortable */
   thead th[aria-sort] {
     cursor: pointer;
+    padding-right: calc(var(--cell-horizontal-padding) + 48px);
   }
   th[aria-sort="ascending"]::after,
   th[aria-sort="descending"]::after {
-    position: absolute;
-    right: 0;
-    top: 0;
+    position: relative;
+    display: inline-block;
+    margin-left: 24px;
+    font-size: 0.875em;
+    font-weight: bold;
+    line-height: 1;
+    vertical-align: text-top;
   }
   th[aria-sort="ascending"]::after {
     content: "▴";
@@ -63,6 +69,69 @@
     content: "▾";
   }
 
+  /* column menu */
+  div[role="menu"] {
+    background-color: white;
+    border: 1px solid #c9c9c9;
+    border-radius: 4px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+    min-width: 150px;
+    font-size: 14px;
+    color: #444;
+    position: fixed;
+  }
+
+  div[role="menu"] > [role="presentation"] {
+    padding: 8px 12px;
+    font-weight: bold;
+    color: #444;
+    background-color: #f1f1f3;
+    border-top-left-radius: 4px;
+  }
+
+  div[role="menu"] > [role="menuitem"] {
+    display: block;
+    width: 100%;
+    text-align: left;
+    padding: 8px 12px;
+    border: none;
+    background: none;
+    cursor: pointer;
+  }
+
+  /* column menu button */
+  th > div[role="button"] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    right: 12px;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 20px;
+    height: 20px;
+    cursor: pointer;
+    opacity: 0;
+    transition: opacity 0.2s ease;
+    border-radius: 3px;
+    background-color: #f1f1f3;
+    z-index: 10;
+  }
+
+  th:hover > div[role="button"],
+  th > div[role="button"]:focus,
+  th > div[role="button"]:focus-visible {
+    background-color: #dbdbe5;
+    opacity: 1;
+  }
+
+  th > div[role="button"] > span {
+    font-size: 1rem;
+    line-height: 1;
+    color: #444;
+    font-weight: bold;
+  }
+
   /* column resize */
   thead [role="separator"] {
     position: absolute;
@@ -216,7 +285,7 @@
 
       /* sorting is enabled - add space for the sort caret */
       &[aria-sort] {
-        padding-right: calc(var(--cell-horizontal-padding) + 12px);
+        padding-right: calc(var(--cell-horizontal-padding) + 24px);
       }
     }
   }

src/components/HighTable/HighTable.tsx

@@ -1,4 +1,4 @@
-import { CSSProperties, KeyboardEvent, MouseEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { CSSProperties, KeyboardEvent, MouseEvent, RefObject, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { DataFrame } from '../../helpers/dataframe.js'
 import { PartialRow } from '../../helpers/row.js'
 import { Selection, areAllSelected, isSelected, toggleAll, toggleIndexInSelection, toggleRangeInSelection, toggleRangeInTable } from '../../helpers/selection.js'
@@ -16,6 +16,7 @@ import TableCorner from '../TableCorner/TableCorner.js'
 import TableHeader from '../TableHeader/TableHeader.js'
 import { formatRowNumber, rowError } from './HighTable.helpers.js'
 import styles from './HighTable.module.css'
+import { PortalContainerProvider } from '../../hooks/usePortalContainer.js'
 
 /**
  * A slice of the (optionally sorted) rows to render as HTML.
@@ -47,6 +48,7 @@ interface Props {
   className?: string // additional class names for the component
   columnClassNames?: (string | undefined)[] // list of additional class names for the header and cells of each column. The index in this array corresponds to the column index in data.header
   styled?: boolean // use styled component? (default true)
+  containerRef?: RefObject<HTMLDivElement | null>
 }
 
 const defaultPadding = 20
@@ -62,15 +64,18 @@ const ariaOffset = 2 // 1-based index, +1 for the header
  * onSelectionChange: the callback to call when the selection changes. If undefined, the component selection is read-only if controlled (selection is set), or disabled if not.
  */
 export default function HighTable(props: Props) {
+  const containerRef = useRef<HTMLDivElement>(null)
   const { data, cacheKey } = props
   const ariaColCount = data.header.length + 1 // don't forget the selection column
   const ariaRowCount = data.numRows + 1 // don't forget the header row
   return (
-    <ColumnWidthProvider localStorageKey={cacheKey ? `${cacheKey}:column-widths` : undefined}>
-      <CellsNavigationProvider colCount={ariaColCount} rowCount={ariaRowCount} rowPadding={props.padding ?? defaultPadding}>
-        <HighTableInner {...props} />
-      </CellsNavigationProvider>
-    </ColumnWidthProvider>
+    <PortalContainerProvider containerRef={containerRef}>
+      <ColumnWidthProvider localStorageKey={cacheKey ? `${cacheKey}:column-widths` : undefined}>
+        <CellsNavigationProvider colCount={ariaColCount} rowCount={ariaRowCount} rowPadding={props.padding ?? defaultPadding}>
+          <HighTableInner {...props} containerRef={containerRef} />
+        </CellsNavigationProvider>
+      </ColumnWidthProvider>
+    </PortalContainerProvider>
   )
 }
 
@@ -96,6 +101,7 @@ export function HighTableInner({
   className = '',
   columnClassNames = [],
   styled = true,
+  containerRef,
 }: Props) {
   /**
    * The component relies on the model of a virtual table which rows are ordered and only the
@@ -470,7 +476,7 @@ export function HighTableInner({
   const ariaColCount = data.header.length + 1 // don't forget the selection column
   const ariaRowCount = numRows + 1 // don't forget the header row
   return (
-    <div className={`${styles.hightable} ${styled ? styles.styled : ''} ${className}`}>
+    <div ref={containerRef} className={`${styles.hightable} ${styled ? styles.styled : ''} ${className}`}>
       <div className={styles.tableScroll} ref={scrollRef} role="group" aria-labelledby="caption" style={tableScrollStyle} onKeyDown={restrictedOnScrollKeyDown} tabIndex={0}>
         <div style={{ height: `${scrollHeight}px` }}>
           <table