Skip to content

feat: Update to pin actions in show/hide columns menu #1423

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
jrassa wants to merge 1 commit into
base: v3
Choose a base branch
from
Open

feat: Update to pin actions in show/hide columns menu #1423

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 22 additions & 0 deletions apps/material-react-table-docs/components/prop-tables/tableOptions.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: '',
Expand Down
1 change: 1 addition & 0 deletions apps/material-react-table-docs/examples/enable-column-pinning/sandbox/src/TS.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>],
Expand Down
2 changes: 1 addition & 1 deletion apps/material-react-table-docs/pages/docs/guides/column-pinning.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
4 changes: 3 additions & 1 deletion packages/material-react-table/src/components/body/MRT_TableBody.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
24 changes: 15 additions & 9 deletions packages/material-react-table/src/components/menus/MRT_ShowHideColumnsMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -40,6 +40,8 @@ export const MRT_ShowHideColumnsMenu = <TData extends MRT_RowData>({
options: {
enableColumnOrdering,
enableColumnPinning,
enableColumnResetPins,
enableColumnUnpinAll,
enableHiding,
localization,
mrtTheme: { menuBackgroundColor },
Expand All @@ -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 }));
};
Expand Down Expand Up @@ -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 && (
Copy link

@MichaelDimmitt MichaelDimmitt Dec 27, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Disclaimer, I have no merging power but hopefully this gets the discussion going.

Recently, I had to solve for this myself in a custom override.
renderToolbarInternalActions - there was no renderShowHideColumnMenuHeader tie in so I used renderToolbarInternalActions and copied a lot of the existing functionality and changed what I needed to move forward.

Here are some notes on this pr:

  1. The code looks correct.
  2. The vercel deployment is failing not sure if that is why the pr is sitting. I took a look but was unable to see the deployment logs they might not be public.
  3. Does the additional item in the show hide menu row make it look cramped? Adding a screenshot here could help I might add one of your version in a bit.
  4. This MRT_ShowHideColumns menu does multiple actions therefore does it make sense to have a general reset to default states for all actions? In my implementation I have commented out all of the other sections and just have the following generic reset:
{enableColumnPinning && (
  <Button
    disabled={!getIsSomeColumnsPinned()}
    onClick={() => {
      table.setColumnVisibility(table.initialState.columnVisibility);
      table.resetColumnPinning();
      table.setColumnOrder(getDefaultColumnOrderIds(table.options, true)
    }}
    style={{ marginRight: '1.75rem', float: right }}
  >
    Reset
  </Button>
)}

Copy link

@MichaelDimmitt MichaelDimmitt Dec 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

update: @jrassa, @KevinVandy. the build is failing because all of the locale's have not been updated:

reproduce via pnpm install; pnpm run build
image

Copy link
Contributor Author

@jrassa jrassa Dec 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The "Column Pinning Initial" storybook was updated to enable this option so it is good place to see how it looks. It doesn't look cramped, but the menu is wider with the extra option.

https://material-react-table-storybook-enlqhvzt5-kevinvandy-s-team.vercel.app/?path=/story/features-column-pinning-examples--column-pinning-initial

Copy link

@MichaelDimmitt MichaelDimmitt Dec 29, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

cool, I did not think to look at the storybook preview. thanks

<Button
disabled={getIsAllColumnsVisible()}
Expand Down
4 changes: 4 additions & 0 deletions packages/material-react-table/src/hooks/useMRT_TableOptions.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -192,7 +194,9 @@ export const useMRT_TableOptions: <TData extends MRT_RowData>(
enableColumnFilters,
enableColumnOrdering,
enableColumnPinning,
enableColumnResetPins,
enableColumnResizing,
enableColumnUnpinAll,
enableColumnVirtualization,
enableDensityToggle,
enableExpandAll,
Expand Down
1 change: 1 addition & 0 deletions packages/material-react-table/src/locales/en.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
3 changes: 2 additions & 1 deletion packages/material-react-table/src/locales/mk.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,8 @@ export const MRT_Localization_MK: MRT_Localization = {
rowsPerPage: 'Редови по страница',
save: 'Зачувај',
search: 'Барај',
selectedCountOfRowCountRowsSelected: '{selectedCount} од {rowCount} ред(ови) избрани',
selectedCountOfRowCountRowsSelected:
'{selectedCount} од {rowCount} ред(ови) избрани',
select: 'Избери',
showAll: 'Прикажи сè',
showAllColumns: 'Прикажи ги сите колони',
Expand Down
3 changes: 3 additions & 0 deletions packages/material-react-table/src/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -217,6 +217,7 @@ export interface MRT_Localization {
pinToRight: string;
resetColumnSize: string;
resetOrder: string;
resetPins: string;
rowActions: string;
rowNumber: string;
rowNumbers: string;
Expand Down Expand Up @@ -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;
Expand Down
1 change: 1 addition & 0 deletions packages/material-react-table/stories/features/ColumnPinning.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,7 @@ export const ColumnPinningInitial = () => (
columns={columns}
data={data}
enableColumnPinning
enableColumnResetPins
initialState={{ columnPinning: { left: ['email'], right: ['state'] } }}
/>
);
Expand Down
Loading