release v2.3.0 - visibleInShowHideMenu

Author: KevinVandy

apps/material-react-table-docs/components/prop-tables/columnOptions.ts

@@ -599,4 +599,14 @@ export const columnOptions: ColumnOption[] = [
     required: false,
     type: '',
   },
+  {
+    columnOption: 'visibleInShowHideMenu',
+    defaultValue: 'true',
+    description: 'Set to false if you want to hide a column from the show/hide menu.',
+    link: '/docs/guides/column-hiding#hide-column-from-show-hide-menu',
+    linkText: 'MRT Column Hiding Docs',
+    source: 'MRT',
+    required: false,
+    type: 'boolean',
+  },
 ];

apps/material-react-table-docs/pages/changelog.mdx

@@ -12,6 +12,12 @@ import Head from 'next/head';
 
 ### Version 2
 
+#### Version 2.3.0 - 2024-01-02
+
+- Added new `visibleInShowHideMenu` column option to allow for columns to be hidden from the show/hide columns menu, regardless of column visibility state.
+- Fixed bug where the Show All button in the show/hide columns menu did not properly skip columns with `enableHiding: false` set.
+- Fixed bug where creatingRow did not work with virtualization enabled.
+
 #### Version 2.2.0 - 2024-01-01
 
 - Added new `useMRT_Rows`, `useMRT_ColumnVirtualizer`, and `useMRT_RowVirtualizer` hooks to allow for more advanced use cases for headless mode.

apps/material-react-table-docs/pages/docs/guides/column-hiding.mdx

@@ -14,7 +14,7 @@ import Example from '../../../examples/disable-column-hiding';
 
 ## Column Hiding Feature Guide
 
-The column hiding feature is enabled by default and allows the user to hide data columns from either the column actions menu or the columns menu.
+The column hiding feature is enabled by default and allows the user to hide data columns from either the column actions menu or the show/hide columns menu.
 
 ### Relevant Table Options
 
@@ -24,7 +24,9 @@ The column hiding feature is enabled by default and allows the user to hide data
 
 ### Relevant Column Options
 
-<ColumnOptionsTable onlyOptions={new Set(['enableHiding'])} />
+<ColumnOptionsTable
+  onlyOptions={new Set(['enableHiding', 'visibleInShowHideMenu'])}
+/>
 
 ### Relevant State
 
@@ -82,7 +84,7 @@ const table = useMaterialReactTable({
 
 Alternatively, you can disable hiding specific columns by setting the `enableHiding` column option to `false` per column.
 
-If you want to hide certain columns by default, you can specify an column visibility in the `initialState.columnVisibility` table option. This can also be useful for making the column hiding state persistent.
+If you want to hide certain columns by default, you can specify column visibility in the `initialState.columnVisibility` table option.
 
 <Example />
 
@@ -104,4 +106,38 @@ const table = useMaterialReactTable({
 
 See the [Display Columns Feature Guide](/docs/guides/display-columns#display-column-definition-options-prop) for a more in depth explanation of the `displayColumnsOptions` table option.
 
+### Hide Column From Show Hide Menu
+
+> New in v2.3.0
+
+By default, all columns are visible in the column show hide menu that is opened from the columns button in the toolbar internal actions button. You can hide a column from this menu by setting the `visibleInShowHideMenu` column option to `false`.
+
+```jsx
+const columns = [
+  {
+    accessorKey: 'uuid',
+    header: 'UUID',
+    visibleInShowHideMenu: false, //hide this column from the show hide menu, but still show the column in the table
+  },
+];
+
+const table = useMaterialReactTable({
+  columns,
+  data,
+  displayColumnDefOptions: {
+    'mrt-row-actions': {
+      visibleInShowHideMenu: false, //hide the built-in row actions column from the show hide menu
+    },
+  },
+});
+```
+
+### Custom Columns Menu
+
+The `MRT_ShowHideColumnsMenu` component is one of the few MRT components that is pretty opinionated and not easily customizable. Instead of trying to customize the menu with overrides, it might be easier for you to just build your own new button and menu from scratch using the Table and Column Instance APIs.
+
+Adding your own Toolbar Buttons is covered in the [Toolbar Guide](/docs/guides/toolbar-customization#customize-built-in-internal-toolbar-button-area)
+
+If all you want to do is customize the buttons above the columns menu, you can import and use the `MRT_ShowHideColumnsMenuItems` component from material react table, which is a component that renders the columns in the list with the toggle switches, but then render your own buttons in the top or bottom of the menu itself.
+
 View Extra Storybook **[Examples](https://www.material-react-table.dev/?path=/story/features-column-hiding-examples)**

packages/material-react-table/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.2.0",
+  "version": "2.3.0",
   "license": "MIT",
   "name": "material-react-table",
   "description": "A fully featured Material UI V5 implementation of TanStack React Table V8, written from the ground up in TypeScript.",

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

@@ -40,14 +40,13 @@ export const MRT_ShowHideColumnsMenu = <TData extends MRT_RowData>({
       enableHiding,
       localization,
     },
-    toggleAllColumnsVisible,
   } = table;
   const { columnOrder, columnPinning, density } = getState();
 
-  const hideAllColumns = () => {
+  const handleToggleAllColumns = (value?: boolean) => {
     getAllLeafColumns()
       .filter((col) => col.columnDef.enableHiding !== false)
-      .forEach((col) => col.toggleVisibility(false));
+      .forEach((col) => col.toggleVisibility(value));
   };
 
   const allColumns = useMemo(() => {
@@ -99,7 +98,7 @@ export const MRT_ShowHideColumnsMenu = <TData extends MRT_RowData>({
         {enableHiding && (
           <Button
             disabled={!getIsSomeColumnsVisible()}
-            onClick={hideAllColumns}
+            onClick={() => handleToggleAllColumns(false)}
           >
             {localization.hideAll}
           </Button>
@@ -126,7 +125,7 @@ export const MRT_ShowHideColumnsMenu = <TData extends MRT_RowData>({
         {enableHiding && (
           <Button
             disabled={getIsAllColumnsVisible()}
-            onClick={() => toggleAllColumnsVisible(true)}
+            onClick={() => handleToggleAllColumns(true)}
           >
             {localization.showAll}
           </Button>

packages/material-react-table/src/menus/MRT_ShowHideColumnsMenuItems.tsx

@@ -89,7 +89,8 @@ export const MRT_ShowHideColumnsMenuItems = <TData extends MRT_RowData>({
     }
   };
 
-  if (!columnDef.header) return null;
+  if (!columnDef.header || columnDef.visibleInShowHideMenu === false)
+    return null;
 
   return (
     <>

packages/material-react-table/src/types.ts

@@ -579,6 +579,7 @@ export type MRT_ColumnDef<TData extends MRT_RowData, TValue = unknown> = Omit<
     table: MRT_TableInstance<TData>;
   }) => ReactNode[];
   sortingFn?: MRT_SortingFn<TData>;
+  visibleInShowHideMenu?: boolean;
 };
 
 export type MRT_DisplayColumnDef<

packages/material-react-table/stories/features/ColumnHiding.stories.tsx

@@ -166,3 +166,40 @@ export const ColumnHidingWithHeaderGroups = () => (
     data={data}
   />
 );
+export const ColumnHidingColumnsNotVisibleInShowHide = () => (
+  <MaterialReactTable
+    columns={[
+      {
+        accessorKey: 'firstName',
+        header: 'First Name',
+        visibleInShowHideMenu: false,
+      },
+      {
+        accessorKey: 'lastName',
+        header: 'Last Name',
+        visibleInShowHideMenu: false,
+      },
+      {
+        accessorKey: 'address',
+        header: 'Address',
+      },
+      {
+        accessorKey: 'state',
+        header: 'State',
+      },
+      {
+        accessorKey: 'zip',
+        header: 'Zip',
+      },
+      {
+        accessorKey: 'email',
+        header: 'Email Address',
+      },
+      {
+        accessorKey: 'phoneNumber',
+        header: 'Phone Number',
+      },
+    ]}
+    data={data}
+  />
+);