diff --git a/packages/mantine-react-table/src/components/head/MRT_TableHeadCell.tsx b/packages/mantine-react-table/src/components/head/MRT_TableHeadCell.tsx index c89cb01e3..24559650e 100644 --- a/packages/mantine-react-table/src/components/head/MRT_TableHeadCell.tsx +++ b/packages/mantine-react-table/src/components/head/MRT_TableHeadCell.tsx @@ -51,7 +51,7 @@ export const MRT_TableHeadCell = ({ enableColumnOrdering, enableColumnPinning, enableGrouping, - enableHeaderActionsWhenHovered, + enableHeaderActionsHoverReveal, enableMultiSort, layoutMode, mantineTableHeadCellProps, @@ -101,18 +101,16 @@ export const MRT_TableHeadCell = ({ const [isOpenedColumnActions, setIsOpenedColumnActions] = useState(false); - const showColumns = - !enableHeaderActionsWhenHovered || + const columnActionsEnabled = + (enableColumnActions || columnDef.enableColumnActions) && + columnDef.enableColumnActions !== false; + + const showColumnButtons = + !enableHeaderActionsHoverReveal || + isOpenedColumnActions || (isHoveredHeadCell && !table.getVisibleFlatColumns().find((column) => column.getIsResizing())); - const showCellSort = !!column.getIsSorted() || showColumns; - - const showColumnActions = - (enableColumnActions || columnDef.enableColumnActions) && - columnDef.enableColumnActions !== false && - (isOpenedColumnActions || showColumns); - const showDragHandle = enableColumnDragging !== false && columnDef.enableColumnDragging !== false && @@ -121,15 +119,15 @@ export const MRT_TableHeadCell = ({ (enableGrouping && columnDef.enableGrouping !== false && !grouping.includes(column.id))) && - showColumns; + showColumnButtons; const headerPL = useMemo(() => { let pl = 0; if (column.getCanSort()) pl++; - if (showColumnActions) pl += 1.75; + if (showColumnButtons) pl += 1.75; if (showDragHandle) pl += 1.25; return pl; - }, [showColumnActions, showDragHandle]); + }, [showColumnButtons, showDragHandle]); const handleDragEnter: DragEventHandler = (_e) => { if (enableGrouping && hoveredColumn?.id === 'drop-zone') { @@ -259,12 +257,17 @@ export const MRT_TableHeadCell = ({ > {headerElement} - {column.getCanFilter() && ( - - )} - {column.getCanSort() && showCellSort && ( - - )} + {column.getCanFilter() && + (column.getIsFiltered() || showColumnButtons) && ( + + )} + {column.getCanSort() && + (column.getIsSorted() || showColumnButtons) && ( + + )} {columnDefType !== 'group' && ( ({ }} /> )} - {showColumnActions && ( + {columnActionsEnabled && showColumnButtons && ( ( enableGlobalFilter = true, enableGlobalFilterRankedResults = true, enableGrouping = false, - enableHeaderActionsWhenHovered = false, + enableHeaderActionsHoverReveal = false, enableHiding = true, enableMultiRowSelection = true, enableMultiSort = true, @@ -200,7 +200,7 @@ export const useMRT_TableOptions: ( enableGlobalFilter, enableGlobalFilterRankedResults, enableGrouping, - enableHeaderActionsWhenHovered, + enableHeaderActionsHoverReveal, enableHiding, enableMultiRowSelection, enableMultiSort, diff --git a/packages/mantine-react-table/src/types.ts b/packages/mantine-react-table/src/types.ts index 0c091bf3f..8d0c05042 100644 --- a/packages/mantine-react-table/src/types.ts +++ b/packages/mantine-react-table/src/types.ts @@ -839,7 +839,7 @@ export type MRT_TableOptions = Omit< enableFullScreenToggle?: boolean; enableGlobalFilterModes?: boolean; enableGlobalFilterRankedResults?: boolean; - enableHeaderActionsWhenHovered?: boolean; + enableHeaderActionsHoverReveal?: boolean; enablePagination?: boolean; enableRowActions?: boolean; enableRowDragging?: boolean; diff --git a/packages/mantine-react-table/stories/features/HeaderActions.stories.tsx b/packages/mantine-react-table/stories/features/HeaderActions.stories.tsx index b300731c5..9f095271c 100644 --- a/packages/mantine-react-table/stories/features/HeaderActions.stories.tsx +++ b/packages/mantine-react-table/stories/features/HeaderActions.stories.tsx @@ -55,7 +55,33 @@ export const HeaderActionsEnabled = () => ( +); + +export const HeaderActionsEnabledCenterAlign = () => ( + +); + +export const HeaderActionsEnabledRightAlign = () => ( + ); @@ -75,7 +101,43 @@ export const HeaderActionsEnabledWithFeatures = () => ( +); + +export const HeaderActionsEnabledWithFeaturesCenterAlign = () => ( + +); + +export const HeaderActionsEnabledWithFeaturesRightAlign = () => ( +