rename new option and tweak showing icons

KevinVandy · Jun 13, 2024 · af201ce · af201ce
1 parent 2f0cc47
commit af201ce
Show file tree

Hide file tree

Showing 4 changed files with 90 additions and 25 deletions.
diff --git 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 = <TData extends MRT_RowData>({
       enableColumnOrdering,
       enableColumnPinning,
       enableGrouping,
-      enableHeaderActionsWhenHovered,
+      enableHeaderActionsHoverReveal,
       enableMultiSort,
       layoutMode,
       mantineTableHeadCellProps,
@@ -101,18 +101,16 @@ export const MRT_TableHeadCell = <TData extends MRT_RowData>({
 
   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 = <TData extends MRT_RowData>({
       (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<HTMLTableCellElement> = (_e) => {
     if (enableGrouping && hoveredColumn?.id === 'drop-zone') {
@@ -259,12 +257,17 @@ export const MRT_TableHeadCell = <TData extends MRT_RowData>({
                 >
                   {headerElement}
                 </Flex>
-                {column.getCanFilter() && (
-                  <MRT_TableHeadCellFilterLabel header={header} table={table} />
-                )}
-                {column.getCanSort() && showCellSort && (
-                  <MRT_TableHeadCellSortLabel header={header} table={table} />
-                )}
+                {column.getCanFilter() &&
+                  (column.getIsFiltered() || showColumnButtons) && (
+                    <MRT_TableHeadCellFilterLabel
+                      header={header}
+                      table={table}
+                    />
+                  )}
+                {column.getCanSort() &&
+                  (column.getIsSorted() || showColumnButtons) && (
+                    <MRT_TableHeadCellSortLabel header={header} table={table} />
+                  )}
               </Flex>
               {columnDefType !== 'group' && (
                 <Flex
@@ -282,7 +285,7 @@ export const MRT_TableHeadCell = <TData extends MRT_RowData>({
                       }}
                     />
                   )}
-                  {showColumnActions && (
+                  {columnActionsEnabled && showColumnButtons && (
                     <MRT_ColumnActionMenu
                       header={header}
                       table={table}

diff --git a/packages/mantine-react-table/src/hooks/useMRT_TableOptions.ts b/packages/mantine-react-table/src/hooks/useMRT_TableOptions.ts
@@ -74,7 +74,7 @@ export const useMRT_TableOptions: <TData extends MRT_RowData>(
   enableGlobalFilter = true,
   enableGlobalFilterRankedResults = true,
   enableGrouping = false,
-  enableHeaderActionsWhenHovered = false,
+  enableHeaderActionsHoverReveal = false,
   enableHiding = true,
   enableMultiRowSelection = true,
   enableMultiSort = true,
@@ -200,7 +200,7 @@ export const useMRT_TableOptions: <TData extends MRT_RowData>(
     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
@@ -839,7 +839,7 @@ export type MRT_TableOptions<TData extends MRT_RowData> = 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
@@ -55,7 +55,33 @@ export const HeaderActionsEnabled = () => (
   <MantineReactTable
     columns={columns}
     data={data}
-    enableHeaderActionsWhenHovered
+    enableHeaderActionsHoverReveal
+  />
+);
+
+export const HeaderActionsEnabledCenterAlign = () => (
+  <MantineReactTable
+    columns={columns}
+    data={data}
+    defaultColumn={{
+      mantineTableHeadCellProps: {
+        align: 'center',
+      },
+    }}
+    enableHeaderActionsHoverReveal
+  />
+);
+
+export const HeaderActionsEnabledRightAlign = () => (
+  <MantineReactTable
+    columns={columns}
+    data={data}
+    defaultColumn={{
+      mantineTableHeadCellProps: {
+        align: 'right',
+      },
+    }}
+    enableHeaderActionsHoverReveal
   />
 );
 
@@ -75,7 +101,43 @@ export const HeaderActionsEnabledWithFeatures = () => (
   <MantineReactTable
     columns={columns}
     data={data}
-    enableHeaderActionsWhenHovered
+    enableHeaderActionsHoverReveal
+    enableColumnOrdering
+    enableColumnPinning
+    enableColumnResizing
+    enableRowNumbers
+    enableRowSelection
+  />
+);
+
+export const HeaderActionsEnabledWithFeaturesCenterAlign = () => (
+  <MantineReactTable
+    columns={columns}
+    data={data}
+    defaultColumn={{
+      mantineTableHeadCellProps: {
+        align: 'center',
+      },
+    }}
+    enableHeaderActionsHoverReveal
+    enableColumnOrdering
+    enableColumnPinning
+    enableColumnResizing
+    enableRowNumbers
+    enableRowSelection
+  />
+);
+
+export const HeaderActionsEnabledWithFeaturesRightAlign = () => (
+  <MantineReactTable
+    columns={columns}
+    data={data}
+    defaultColumn={{
+      mantineTableHeadCellProps: {
+        align: 'right',
+      },
+    }}
+    enableHeaderActionsHoverReveal
     enableColumnOrdering
     enableColumnPinning
     enableColumnResizing