Column Menu & Sort Features

.storybook/global.css

@@ -26,6 +26,56 @@ body {
   -webkit-font-smoothing: antialiased;
 }
 
+/* Column menu styles */
+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;
+  z-index: 1000;
+  font-size: 14px;
+  color: #444;
+}
+
+div[role="menu"] > [role="presentation"] {
+  padding: 8px 12px;
+  font-weight: bold;
+  color: #444;
+  background-color: #f1f1f3;
+  border-top-left-radius: 4px;
+}
+
+div[role="menu"] hr[role="separator"] {
+  height: 1px;
+  background-color: #ddd;
+  margin: 0;
+  border: none;
+}
+
+div[role="menu"] [role="group"] {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+div[role="menu"] [role="menuitem"] {
+  padding: 8px 24px;
+  cursor: pointer;
+  position: relative;
+}
+
+div[role="menu"] [role="menuitem"]:hover {
+  background-color: #dbdbe5;
+}
+
+div[role="menu"] [role="menuitem"][aria-checked="true"]::before {
+  content: '✓';
+  position: absolute;
+  left: 4px;
+  color: #706fb1;
+}
+
 /* 6. Improve media defaults */
 img,
 picture,

package.json

@@ -37,6 +37,7 @@
     "build": "npm run build:bundle && npm run build:types",
     "coverage": "vitest run --coverage --coverage.include=src",
     "lint": "eslint",
+    "lint:fix": "eslint --fix",
     "prepublishOnly": "npm run build",
     "storybook": "storybook dev -p 6006",
     "test": "vitest run",

src/components/ColumnHeader/ColumnHeader.test.tsx

@@ -33,7 +33,7 @@ describe('ColumnHeader', () => {
     const content = 'test'
     const { getByRole } = render(<table><thead><tr><ColumnHeader columnName="test" columnIndex={0}>{content}</ColumnHeader></tr></thead></table>)
     const element = getByRole('columnheader')
-    expect(element.textContent).toEqual(content)
+    expect(element.textContent).toEqual(content + '⋮')
     expect(measureWidth).not.toHaveBeenCalled()
   })
 
@@ -110,6 +110,30 @@ describe('ColumnHeader', () => {
     expect(header.style.maxWidth).toEqual(`${savedWidth + delta}px`)
   })
 
+  it('stops event propagation when menu button is clicked', async () => {
+    const onClick = vi.fn()
+    const { user, getByRole } = render(
+      <ColumnWidthProvider localStorageKey={cacheKey}>
+        <table>
+          <thead>
+            <tr>
+              <ColumnHeader
+                columnName="test"
+                columnIndex={0}
+                onClick={onClick}
+              />
+            </tr>
+          </thead>
+        </table>
+      </ColumnWidthProvider>
+    )
+
+    const button = getByRole('button')
+    await user.click(button)
+
+    expect(onClick).not.toHaveBeenCalled()
+  })
+
   it('reloads column width when localStorageKey changes', () => {
     const cacheKey2 = 'key-2'
     const width1 = 150

src/components/ColumnHeader/ColumnHeader.tsx

@@ -1,9 +1,11 @@
-import { MouseEvent, ReactNode, useCallback, useEffect, useMemo, useRef } from 'react'
+import { 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 useColumnWidth from '../../hooks/useColumnWidth.js'
 import ColumnResizer from '../ColumnResizer/ColumnResizer.js'
+import ColumnMenu from '../ColumnMenu/ColumnMenu.js'
+import ColumnMenuButton from '../ColumnMenuButton/ColumnMenuButton.js'
 
 interface Props {
   columnIndex: number // index of the column in the dataframe (0-based)
@@ -12,22 +14,48 @@ interface Props {
   dataReady?: boolean
   direction?: Direction
   onClick?: (e: MouseEvent) => void
+  onHideColumn?: (columnIndex: number) => void
+  onShowAllColumns?: () => void
+  hasHiddenColumns?: boolean
+  title?: string
   sortable?: boolean
   orderByIndex?: number // index of the column in the orderBy array (0-based)
   orderBySize?: number // size of the orderBy array
   className?: string // optional class name
+  visibleHeader?: string[] // list of visible column headers
 }
 
-export default function ColumnHeader({ columnIndex, columnName, dataReady, direction, onClick, sortable, orderByIndex, orderBySize, className, children }: Props) {
+export default function ColumnHeader({
+  orderByIndex,
+  orderBySize,
+  columnIndex,
+  columnName,
+  dataReady,
+  direction,
+  onClick,
+  onHideColumn,
+  onShowAllColumns,
+  hasHiddenColumns,
+  sortable,
+  className,
+  children,
+  title,
+  visibleHeader = [],
+}: Props) {
   const ref = useRef<HTMLTableCellElement>(null)
+  const [showMenu, setShowMenu] = useState(false)
+  const [menuPosition, setMenuPosition] = useState({ x: 0, y: 0 })
 
   // Get the column width from the context
   const { getColumnStyle, setColumnWidth, getColumnWidth } = useColumnWidth()
   const columnStyle = getColumnStyle?.(columnIndex)
   const width = getColumnWidth?.(columnIndex)
-  const setWidth = useCallback((nextWidth: number | undefined) => {
-    setColumnWidth?.({ columnIndex, width: nextWidth })
-  }, [setColumnWidth, columnIndex])
+  const setWidth = useCallback(
+    (nextWidth: number | undefined) => {
+      setColumnWidth?.({ columnIndex, width: nextWidth })
+    },
+    [setColumnWidth, columnIndex]
+  )
 
   // Measure default column width when data is ready, if no width is set
   useEffect(() => {
@@ -70,29 +98,102 @@ export default function ColumnHeader({ columnIndex, columnName, dataReady, direc
     }
   }, [sortable, columnName, direction, orderByIndex])
 
-  return (
-    <th
-      ref={ref}
-      scope="col"
-      role="columnheader"
-      aria-sort={direction ?? (sortable ? 'none' : undefined)}
-      data-order-by-index={orderBySize !== undefined ? orderByIndex : undefined}
-      data-order-by-size={orderBySize}
-      aria-description={description}
-      // 1-based index, +1 for the row header
-      // TODO(SL): don't hardcode it, but get it from the table context
-      aria-colindex={columnIndex + 2}
-      title={description}
-      onClick={onClick}
-      style={columnStyle}
-      className={className}
-    >
-      {children}
-      <ColumnResizer
-        setWidth={setWidth}
-        onDoubleClick={autoResize}
-        width={width}
+  const handleContextMenu = useCallback((e: MouseEvent) => {
+    e.preventDefault()
+    setMenuPosition({
+      x: e.clientX,
+      y: e.clientY,
+    })
+    setShowMenu(true)
+  }, [])
+
+  const closeMenu = useCallback(() => {
+    setShowMenu(false)
+  }, [])
+
+  // Close menu when clicking outside
+  useEffect(() => {
+    if (showMenu) {
+      function handleClickOutside() {
+        setShowMenu(false)
+      }
+
+      document.addEventListener('click', handleClickOutside)
+      return () => {
+        document.removeEventListener('click', handleClickOutside)
+      }
+    }
+  }, [showMenu])
+
+  // Handle menu button click
+  const handleMenuButtonClick = useCallback((e: MouseEvent) => {
+    e.stopPropagation()
+    const rect = ref.current?.getBoundingClientRect()
+    if (rect) {
+      setMenuPosition({
+        x: e.clientX,
+        y: rect.bottom,
+      })
+      setShowMenu(true)
+    }
+  }, [])
+
+  const handleSort = useCallback((_colIndex: number, sortDirection: Direction | null) => {
+    if (onClick) {
+      // Create a synthetic event with sort direction for TableHeader
+      const event = {} as MouseEvent & { sortDirection: typeof sortDirection }
+      event.sortDirection = sortDirection
+      onClick(event)
+    }
+  }, [onClick])
+
+  function renderColumnMenu() {
+    return (
+      <ColumnMenu
+        column={title}
+        columnIndex={columnIndex}
+        onHideColumn={onHideColumn}
+        onShowAllColumns={onShowAllColumns}
+        hasHiddenColumns={hasHiddenColumns}
+        sortable={sortable}
+        direction={direction}
+        onSort={handleSort}
+        isVisible={showMenu}
+        position={menuPosition}
+        onClose={closeMenu}
+        visibleHeader={visibleHeader}
       />
-    </th>
+    )
+  }
+
+  return (
+    <>
+      <th
+        ref={ref}
+        scope="col"
+        role="columnheader"
+        aria-sort={direction ?? (sortable ? 'none' : undefined)}
+        data-order-by-index={orderBySize !== undefined ? orderByIndex : undefined}
+        data-order-by-size={orderBySize}
+        aria-description={description}
+        // 1-based index, +1 for the row header
+        // TODO(SL): don't hardcode it, but get it from the table context
+        aria-colindex={columnIndex + 2}
+        title={description}
+        onClick={onClick}
+        onContextMenu={handleContextMenu}
+        style={{ ...columnStyle, position: 'relative' }}
+        className={className}
+        aria-label={title ?? columnName}
+      >
+        <span>
+          {children}
+        </span>
+        <ColumnMenuButton onClick={handleMenuButtonClick} />
+        <ColumnResizer setWidth={setWidth} onDoubleClick={autoResize} width={width} />
+      </th>
+      {/* ColumnMenu is rendered via portal to document.body */}
+      {renderColumnMenu()}
+    </>
   )
 }