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: () => [Action], 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 && (