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.

Author: jrassa

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: '',

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>],

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

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',

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,14 +144,19 @@ export const MRT_ShowHideColumnsMenu = <TData extends MRT_RowData>({
             {localization.resetOrder}
           </Button>
         )}
-        {enableColumnPinning && (
+        {enableColumnPinning && enableColumnUnpinAll && (
           <Button
             disabled={!getIsSomeColumnsPinned()}
             onClick={() => table.resetColumnPinning(true)}
           >
             {localization.unpinAll}
           </Button>
         )}
+        {enableColumnPinning && enableColumnResetPins && (
+          <Button onClick={() => table.resetColumnPinning()}>
+            {localization.resetPins}
+          </Button>
+        )}
         {enableHiding && (
           <Button
             disabled={getIsAllColumnsVisible()}

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,

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',

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: 'Прикажи ги сите колони',

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;

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'] } }}
   />
 );