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: () => [],
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
### 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 = ({
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 = ({
options: {
enableColumnOrdering,
enableColumnPinning,
+ enableColumnResetPins,
+ enableColumnUnpinAll,
enableHiding,
localization,
mrtTheme: { menuBackgroundColor },
@@ -48,13 +50,12 @@ export const MRT_ShowHideColumnsMenu = ({
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 = ({
{localization.resetOrder}
)}
- {enableColumnPinning && (
+ {enableColumnPinning && enableColumnUnpinAll && (
)}
+ {enableColumnPinning && enableColumnResetPins && (
+
+ )}
{enableHiding && (