From 443bf1b4275fb6b7ca070c5b3471fcedf5c921d3 Mon Sep 17 00:00:00 2001
From: John Rassa <john.rassa@bluehalo.com>
Date: Wed, 1 Oct 2025 07:29:09 -0400
Subject: [PATCH] feat: Update to pin actions in show/hide columns menu

* Add option to enable/disable 'Unpin all'.  Enabled by default.
* Add new 'Reset pins' action that restores pinning to initial state.
* Add option to enable/disable 'Reset pins' action.  Disabled by default.
---
 .../components/prop-tables/tableOptions.ts    | 22 +++++++++++++++++
 .../enable-column-pinning/sandbox/src/TS.tsx  |  1 +
 .../pages/docs/guides/column-pinning.mdx      |  2 +-
 .../src/components/body/MRT_TableBody.tsx     |  4 +++-
 .../menus/MRT_ShowHideColumnsMenu.tsx         | 24 ++++++++++++-------
 .../src/hooks/useMRT_TableOptions.ts          |  4 ++++
 .../material-react-table/src/locales/en.ts    |  1 +
 .../material-react-table/src/locales/mk.ts    |  3 ++-
 packages/material-react-table/src/types.ts    |  3 +++
 .../features/ColumnPinning.stories.tsx        |  1 +
 10 files changed, 53 insertions(+), 12 deletions(-)

diff --git a/apps/material-react-table-docs/components/prop-tables/tableOptions.ts b/apps/material-react-table-docs/components/prop-tables/tableOptions.ts
index aff09eff2..bcb3c1e66 100644
--- a/apps/material-react-table-docs/components/prop-tables/tableOptions.ts
+++ b/apps/material-react-table-docs/components/prop-tables/tableOptions.ts
@@ -522,6 +522,28 @@ export const tableOptions: TableOption[] = [
     source: '',
     type: 'boolean',
   },
+  {
+    tableOption: 'enableColumnResetPins',
+    defaultValue: '',
+    description:
+      "Determines if 'Reset Pins' option is available in the Show/Hide columns menu.",
+    link: '/docs/guides/column-pinning',
+    linkText: 'MRT Column Pinning Docs',
+    required: false,
+    source: 'MRT',
+    type: 'boolean',
+  },
+  {
+    tableOption: 'enableColumnUnpinAll',
+    defaultValue: 'true',
+    description:
+      "Determines if 'Unpin All' option is available in the Show/Hide columns menu.",
+    link: '/docs/guides/column-pinning',
+    linkText: 'MRT Column Pinning Docs',
+    required: false,
+    source: 'MRT',
+    type: 'boolean',
+  },
   {
     tableOption: 'enableCellActions',
     defaultValue: '',
diff --git a/apps/material-react-table-docs/examples/enable-column-pinning/sandbox/src/TS.tsx b/apps/material-react-table-docs/examples/enable-column-pinning/sandbox/src/TS.tsx
index 7f2ef4dc5..29691f79d 100644
--- a/apps/material-react-table-docs/examples/enable-column-pinning/sandbox/src/TS.tsx
+++ b/apps/material-react-table-docs/examples/enable-column-pinning/sandbox/src/TS.tsx
@@ -55,6 +55,7 @@ const Example = () => {
     columns,
     data,
     enableColumnPinning: true,
+    enableColumnResetPins: true,
     enableRowActions: true,
     layoutMode: 'grid-no-grow', //constant column widths
     renderRowActionMenuItems: () => [<MenuItem key="action">Action</MenuItem>],
diff --git a/apps/material-react-table-docs/pages/docs/guides/column-pinning.mdx b/apps/material-react-table-docs/pages/docs/guides/column-pinning.mdx
index f2eb5c045..341bec9a0 100644
--- a/apps/material-react-table-docs/pages/docs/guides/column-pinning.mdx
+++ b/apps/material-react-table-docs/pages/docs/guides/column-pinning.mdx
@@ -19,7 +19,7 @@ Column pinning is a cool feature that lets users pin (freeze) columns to the lef
 ### Relevant Table Options
 
 <TableOptionsTable
-  onlyOptions={new Set(['enableColumnPinning', 'onColumnPinningChange'])}
+  onlyOptions={new Set(['enableColumnPinning', 'enableColumnUnpinAll', 'enableColumnResetPins', 'onColumnPinningChange'])}
 />
 
 ### Relevant Column Options
diff --git a/packages/material-react-table/src/components/body/MRT_TableBody.tsx b/packages/material-react-table/src/components/body/MRT_TableBody.tsx
index 29b29c588..69566f8e0 100644
--- a/packages/material-react-table/src/components/body/MRT_TableBody.tsx
+++ b/packages/material-react-table/src/components/body/MRT_TableBody.tsx
@@ -135,7 +135,9 @@ export const MRT_TableBody = <TData extends MRT_RowData>({
                       color: 'text.secondary',
                       fontStyle: 'italic',
                       maxWidth: `min(100vw, ${
-                        tablePaperRef.current?.clientWidth ? tablePaperRef.current?.clientWidth + "px" : "100%"
+                        tablePaperRef.current?.clientWidth
+                          ? tablePaperRef.current?.clientWidth + 'px'
+                          : '100%'
                       })`,
                       py: '2rem',
                       textAlign: 'center',
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 543da4011..e673687ed 100644
--- a/packages/material-react-table/src/components/menus/MRT_ShowHideColumnsMenu.tsx
+++ b/packages/material-react-table/src/components/menus/MRT_ShowHideColumnsMenu.tsx
@@ -8,7 +8,7 @@ import {
   type MRT_Column,
   type MRT_RowData,
   type MRT_TableInstance,
-  type MRT_VisibilityState
+  type MRT_VisibilityState,
 } from '../../types';
 import { getDefaultColumnOrderIds } from '../../utils/displayColumn.utils';
 
@@ -40,6 +40,8 @@ export const MRT_ShowHideColumnsMenu = <TData extends MRT_RowData>({
     options: {
       enableColumnOrdering,
       enableColumnPinning,
+      enableColumnResetPins,
+      enableColumnUnpinAll,
       enableHiding,
       localization,
       mrtTheme: { menuBackgroundColor },
@@ -48,13 +50,12 @@ export const MRT_ShowHideColumnsMenu = <TData extends MRT_RowData>({
   const { columnOrder, columnPinning, density } = getState();
 
   const handleToggleAllColumns = (value?: boolean) => {
-    const updates =
-      getAllLeafColumns()
-        .filter((column) => column.columnDef.enableHiding !== false)
-        .reduce((acc, column) => {
-          acc[column.id] = value ?? !column.getIsVisible()
-          return acc;
-        }, {} as MRT_VisibilityState);
+    const updates = getAllLeafColumns()
+      .filter((column) => column.columnDef.enableHiding !== false)
+      .reduce((acc, column) => {
+        acc[column.id] = value ?? !column.getIsVisible();
+        return acc;
+      }, {} as MRT_VisibilityState);
 
     table.setColumnVisibility((old) => ({ ...old, ...updates }));
   };
@@ -143,7 +144,7 @@ export const MRT_ShowHideColumnsMenu = <TData extends MRT_RowData>({
             {localization.resetOrder}
           </Button>
         )}
-        {enableColumnPinning && (
+        {enableColumnPinning && enableColumnUnpinAll && (
           <Button
             disabled={!getIsSomeColumnsPinned()}
             onClick={() => table.resetColumnPinning(true)}
@@ -151,6 +152,11 @@ export const MRT_ShowHideColumnsMenu = <TData extends MRT_RowData>({
             {localization.unpinAll}
           </Button>
         )}
+        {enableColumnPinning && enableColumnResetPins && (
+          <Button onClick={() => table.resetColumnPinning()}>
+            {localization.resetPins}
+          </Button>
+        )}
         {enableHiding && (
           <Button
             disabled={getIsAllColumnsVisible()}
diff --git a/packages/material-react-table/src/hooks/useMRT_TableOptions.ts b/packages/material-react-table/src/hooks/useMRT_TableOptions.ts
index 7bee63ec6..5b76af530 100644
--- a/packages/material-react-table/src/hooks/useMRT_TableOptions.ts
+++ b/packages/material-react-table/src/hooks/useMRT_TableOptions.ts
@@ -63,7 +63,9 @@ export const useMRT_TableOptions: <TData extends MRT_RowData>(
   enableColumnFilters = true,
   enableColumnOrdering = false,
   enableColumnPinning = false,
+  enableColumnResetPins = false,
   enableColumnResizing = false,
+  enableColumnUnpinAll = true,
   enableColumnVirtualization,
   enableDensityToggle = true,
   enableExpandAll = true,
@@ -192,7 +194,9 @@ export const useMRT_TableOptions: <TData extends MRT_RowData>(
     enableColumnFilters,
     enableColumnOrdering,
     enableColumnPinning,
+    enableColumnResetPins,
     enableColumnResizing,
+    enableColumnUnpinAll,
     enableColumnVirtualization,
     enableDensityToggle,
     enableExpandAll,
diff --git a/packages/material-react-table/src/locales/en.ts b/packages/material-react-table/src/locales/en.ts
index cb62568bf..afc6915c7 100644
--- a/packages/material-react-table/src/locales/en.ts
+++ b/packages/material-react-table/src/locales/en.ts
@@ -67,6 +67,7 @@ export const MRT_Localization_EN: MRT_Localization = {
   pinToRight: 'Pin to right',
   resetColumnSize: 'Reset column size',
   resetOrder: 'Reset order',
+  resetPins: 'Reset pins',
   rowActions: 'Row Actions',
   rowNumber: '#',
   rowNumbers: 'Row Numbers',
diff --git a/packages/material-react-table/src/locales/mk.ts b/packages/material-react-table/src/locales/mk.ts
index 5850d6272..c10768838 100644
--- a/packages/material-react-table/src/locales/mk.ts
+++ b/packages/material-react-table/src/locales/mk.ts
@@ -73,7 +73,8 @@ export const MRT_Localization_MK: MRT_Localization = {
   rowsPerPage: 'Редови по страница',
   save: 'Зачувај',
   search: 'Барај',
-  selectedCountOfRowCountRowsSelected: '{selectedCount} од {rowCount} ред(ови) избрани',
+  selectedCountOfRowCountRowsSelected:
+    '{selectedCount} од {rowCount} ред(ови) избрани',
   select: 'Избери',
   showAll: 'Прикажи сè',
   showAllColumns: 'Прикажи ги сите колони',
diff --git a/packages/material-react-table/src/types.ts b/packages/material-react-table/src/types.ts
index e10b4a25c..4b49c5e92 100644
--- a/packages/material-react-table/src/types.ts
+++ b/packages/material-react-table/src/types.ts
@@ -217,6 +217,7 @@ export interface MRT_Localization {
   pinToRight: string;
   resetColumnSize: string;
   resetOrder: string;
+  resetPins: string;
   rowActions: string;
   rowNumber: string;
   rowNumbers: string;
@@ -862,6 +863,8 @@ export interface MRT_TableOptions<TData extends MRT_RowData>
   enableColumnDragging?: boolean;
   enableColumnFilterModes?: boolean;
   enableColumnOrdering?: boolean;
+  enableColumnResetPins?: boolean;
+  enableColumnUnpinAll?: boolean;
   enableColumnVirtualization?: boolean;
   enableDensityToggle?: boolean;
   enableEditing?: ((row: MRT_Row<TData>) => boolean) | boolean;
diff --git a/packages/material-react-table/stories/features/ColumnPinning.stories.tsx b/packages/material-react-table/stories/features/ColumnPinning.stories.tsx
index 4206cb139..81cf534d0 100644
--- a/packages/material-react-table/stories/features/ColumnPinning.stories.tsx
+++ b/packages/material-react-table/stories/features/ColumnPinning.stories.tsx
@@ -53,6 +53,7 @@ export const ColumnPinningInitial = () => (
     columns={columns}
     data={data}
     enableColumnPinning
+    enableColumnResetPins
     initialState={{ columnPinning: { left: ['email'], right: ['state'] } }}
   />
 );