From ac10212f239f42322816475e593183b0426f42cf Mon Sep 17 00:00:00 2001 From: dogfootruler-kr <3510343+dogfootruler-kr@users.noreply.github.com> Date: Fri, 17 Oct 2025 16:48:07 +0900 Subject: [PATCH] feat(core): add headerCursor override for column headers\n\n- Add headerCursor to BaseGridColumn\n- Thread through MappedGridColumn\n- Use override in header hover cursor logic\n- Document in API.md --- packages/core/API.md | 2 ++ packages/core/src/internal/data-grid/data-grid-types.ts | 1 + packages/core/src/internal/data-grid/data-grid.tsx | 7 ++++++- .../core/src/internal/data-grid/render/data-grid-lib.ts | 1 + 4 files changed, 10 insertions(+), 1 deletion(-) diff --git a/packages/core/API.md b/packages/core/API.md index 18295976f..f9f76a120 100644 --- a/packages/core/API.md +++ b/packages/core/API.md @@ -262,6 +262,7 @@ interface BaseGridColumn { readonly group?: string; readonly icon?: GridColumnIcon | string; readonly overlayIcon?: GridColumnIcon | string; + readonly headerCursor?: CSSProperties["cursor"]; readonly hasMenu?: boolean; readonly style?: "normal" | "highlight"; readonly grow?: number; @@ -293,6 +294,7 @@ export type GridColumn = SizedGridColumn | AutoGridColumn; | group | The name of the group the column belongs to | | icon | The icon the column belongs to. The icon must be either one of the predefined icons or an icon passed to the `headerIcons` prop | | overlayIcon | An icon which is painted on top offset bottom right of the `icon`. Must be a predefined icon or an icon passed to the `headerIcons` prop | +| headerCursor | Optional cursor to use when hovering the column header. Falls back to pointer/default based on interaction if not provided. | | hasMenu | Enables/disables the menu dropdown indicator. If not enabled, `onHeaderMenuClick` will not be emitted. | | style | Makes the column use the highlighted theming from the `Theme`. `themeOverride` can be used to perform the same effect. | | grow | When set to a number > 0 the column will grow to consume extra available space according to the weight of its grow property. | diff --git a/packages/core/src/internal/data-grid/data-grid-types.ts b/packages/core/src/internal/data-grid/data-grid-types.ts index 9509d05e5..1daf423cb 100644 --- a/packages/core/src/internal/data-grid/data-grid-types.ts +++ b/packages/core/src/internal/data-grid/data-grid-types.ts @@ -150,6 +150,7 @@ export interface BaseGridColumn { readonly group?: string; readonly icon?: GridColumnIcon | string; readonly overlayIcon?: GridColumnIcon | string; + readonly headerCursor?: CSSProperties["cursor"]; readonly menuIcon?: GridColumnMenuIcon | string; readonly indicatorIcon?: GridColumnIcon | string; readonly hasMenu?: boolean; diff --git a/packages/core/src/internal/data-grid/data-grid.tsx b/packages/core/src/internal/data-grid/data-grid.tsx index 338a52e10..be4bec18e 100644 --- a/packages/core/src/internal/data-grid/data-grid.tsx +++ b/packages/core/src/internal/data-grid/data-grid.tsx @@ -971,6 +971,9 @@ const DataGrid: React.ForwardRefRenderFunction = (p, cursorOverride = cell.cursor; } const canDrag = hoveredOnEdge ?? false; + const headerCursorOverride = + headerHovered && hCol !== undefined ? mappedColumns[hCol]?.headerCursor : undefined; + const cursor = isDragging ? "grabbing" : canDrag || isResizing @@ -979,7 +982,9 @@ const DataGrid: React.ForwardRefRenderFunction = (p, ? "crosshair" : cursorOverride !== undefined ? cursorOverride - : headerHovered || clickableInnerCellHovered || editableBoolHovered || groupHeaderHovered + : headerCursorOverride !== undefined + ? headerCursorOverride + : headerHovered || clickableInnerCellHovered || editableBoolHovered || groupHeaderHovered ? "pointer" : "default"; diff --git a/packages/core/src/internal/data-grid/render/data-grid-lib.ts b/packages/core/src/internal/data-grid/render/data-grid-lib.ts index 96eb1d90f..b85f319df 100644 --- a/packages/core/src/internal/data-grid/render/data-grid-lib.ts +++ b/packages/core/src/internal/data-grid/render/data-grid-lib.ts @@ -31,6 +31,7 @@ export function useMappedColumns( grow: c.grow, hasMenu: c.hasMenu, icon: c.icon, + headerCursor: c.headerCursor, id: c.id, menuIcon: c.menuIcon, overlayIcon: c.overlayIcon,