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#column-resize-mode',
+    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#column-resize-mode',
+    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>],

packages/material-react-table/src/components/menus/MRT_ShowHideColumnsMenu.tsx

@@ -39,6 +39,8 @@ export const MRT_ShowHideColumnsMenu = <TData extends MRT_RowData>({
     options: {
       enableColumnOrdering,
       enableColumnPinning,
+      enableColumnResetPins,
+      enableColumnUnpinAll,
       enableHiding,
       localization,
       mrtTheme: { menuBackgroundColor },
@@ -136,14 +138,21 @@ 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/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'] } }}
   />
 );