From 03988f66267936eeebd9d842d5d5dc672cd4219f Mon Sep 17 00:00:00 2001
From: Frederic Bahr <43925257+fredericbahr@users.noreply.github.com>
Date: Sat, 21 Dec 2024 17:44:41 +0100
Subject: [PATCH] fix: simplify logic for hiding/showing all columns within
 show/hide menu

The functionality to show/hide all columns within the ShowHideColumnsMenu was implemented with a custom function which filters all columns and toggles the visibility of each column. This calls the `onColumnVisibilityChange` callback multiple times.

In my opinion this can be refactored to use the tables `toggleAllColumnsVisible` API, which results in only one call of `onColumnVisibilityChange` and makes the code easier to understand.

Fixes: https://github.com/KevinVandy/material-react-table/issues/1277
---
 .../src/components/menus/MRT_ShowHideColumnsMenu.tsx  | 11 ++---------
 1 file changed, 2 insertions(+), 9 deletions(-)

diff --git a/packages/material-react-table/src/components/menus/MRT_ShowHideColumnsMenu.tsx b/packages/material-react-table/src/components/menus/MRT_ShowHideColumnsMenu.tsx
index c839a5111..fca58fc86 100644
--- a/packages/material-react-table/src/components/menus/MRT_ShowHideColumnsMenu.tsx
+++ b/packages/material-react-table/src/components/menus/MRT_ShowHideColumnsMenu.tsx
@@ -27,7 +27,6 @@ export const MRT_ShowHideColumnsMenu = <TData extends MRT_RowData>({
 }: MRT_ShowHideColumnsMenuProps<TData>) => {
   const {
     getAllColumns,
-    getAllLeafColumns,
     getCenterLeafColumns,
     getIsAllColumnsVisible,
     getIsSomeColumnsPinned,
@@ -45,12 +44,6 @@ export const MRT_ShowHideColumnsMenu = <TData extends MRT_RowData>({
   } = table;
   const { columnOrder, columnPinning, density } = getState();
 
-  const handleToggleAllColumns = (value?: boolean) => {
-    getAllLeafColumns()
-      .filter((col) => col.columnDef.enableHiding !== false)
-      .forEach((col) => col.toggleVisibility(value));
-  };
-
   const allColumns = useMemo(() => {
     const columns = getAllColumns();
     if (
@@ -108,7 +101,7 @@ export const MRT_ShowHideColumnsMenu = <TData extends MRT_RowData>({
         {enableHiding && (
           <Button
             disabled={!getIsSomeColumnsVisible()}
-            onClick={() => handleToggleAllColumns(false)}
+            onClick={() => table.toggleAllColumnsVisible(false)}
           >
             {localization.hideAll}
           </Button>
@@ -135,7 +128,7 @@ export const MRT_ShowHideColumnsMenu = <TData extends MRT_RowData>({
         {enableHiding && (
           <Button
             disabled={getIsAllColumnsVisible()}
-            onClick={() => handleToggleAllColumns(true)}
+            onClick={() => table.toggleAllColumnsVisible(true)}
           >
             {localization.showAll}
           </Button>