cannot use "show/hide columns"-menu with `state.columnVisibility`

[nimo23]

material-react-table version

3.2.1

react & react-dom versions

7.3.1

Describe the bug and the steps to reproduce it

Adding columnVisibility to state prevents the ability to use the "show/hide columns"-menu activated by enableHiding: true.

Minimal, Reproducible Example - (Optional, but Recommended)

import {
	createMRTColumnHelper,
	MaterialReactTable,
	MRT_ShowHideColumnsButton,
	MRT_ToggleFiltersButton,
	MRT_ToggleFullScreenButton,
	useMaterialReactTable,
} from 'material-react-table';
import { useRef, useState, type RefObject } from 'react';


export type UserProps = {
	users: UserWithTask[];
	divRef: RefObject<HTMLDivElement | null>,
};

type User = {
	id: string,
	name: string;
	age: number;
}

type Task = {
	id: number;
	name: string;
}

type UserWithTask = User & {
	task: Task;
}

const allUsers: UserWithTask[] = [
	{
		id: "1",
		name: 'John',
		age: 30,
		task: {
			id: 1,
			name: "task-1"
		}
	},
	{
		id: "2",
		name: 'Sara',
		age: 25,
		task: {
			id: 2,
			name: "task-2"
		}
	},
	{
		id: "3",
		name: 'Sara',
		age: 20,
		task: {
			id: 3,
			name: "task-3"
		}
	},
	{
		id: "4",
		name: 'Sara',
		age: 20,
		task: {
			id: 3,
			name: "task-3"
		}
	},
	{
		id: "5",
		name: 'Sara',
		age: 25,
		task: {
			id: 2,
			name: "task-2"
		}
	},


];

const columnHelper = createMRTColumnHelper<UserWithTask>();

// To make a variable stable, we define it outside of a component 
// so it does not get recreated on every render and cause an infinite re-render loop.
const columns = [
	columnHelper.accessor("name", {
		header: 'Name',
		enableGrouping: true,
	}),
	columnHelper.accessor("age", {
		header: 'Age',
		enableGrouping: true,
	}),
];

export default function UserTableWithState() {

	const wrapperRef = useRef<HTMLDivElement | null>(null);

	return (
		<div ref={wrapperRef}>
			<UserTable users={allUsers} divRef={wrapperRef} />
		</div>
	);

}

export function UserTable({ users: data, divRef }: Readonly<UserProps>) {

	const [isFullScreen, setIsFullScreen] = useState<boolean>(false);

	function handleFullScreen() {
		const wrapperDif = divRef?.current as HTMLElement | null;
		wrapperDif?.classList.toggle('fullscreen');
		setIsFullScreen(!isFullScreen);
	}

	const table = useMaterialReactTable({
		id: 'table-user',
		columns,
		data, //is stable (because we defined it outside of this component)
		enableGlobalFilter: true,
		enablePagination: false,
		enableStickyHeader: true,
		enableTableFooter: true,
		enableStickyFooter: true,
		enableBottomToolbar: false,
		positionGlobalFilter: 'left',
		enableGrouping: true,
		enableHiding: true,
		groupedColumnMode: 'remove',

		getRowId: (row) => row.id,

		muiTablePaperProps: ({ table }) => ({
			style: {
				width: table.getState().isFullScreen ? '100%' : '300px',
				position: table.getState().isFullScreen ? 'relative' : undefined,
			}
		}),

		renderToolbarInternalActions: ({ table }) => (
			<>
				{isFullScreen &&
					<MRT_ToggleFiltersButton table={table} />
				}
				<MRT_ShowHideColumnsButton table={table} />
				<MRT_ToggleFullScreenButton table={table} />
			</>
		),

		onIsFullScreenChange: handleFullScreen,

		initialState: {
			showGlobalFilter: true
		},
		renderDetailPanel: ({ row }) => <div>Name: {row.original.name}</div>,
		state: {
			isFullScreen,
			// TODO: Adding columnVisibility prevents the ability to use the "show/hide columns"-menu activated by "enableHiding: true".
			// TODO: Adding columnVisibility prevents the ability to group columns activated by "enableGrouping: true" if "isFullscreen = false"
			columnVisibility: {
				'mrt-row-expand': isFullScreen,
				age: isFullScreen,
			}
		}
	});


	return <MaterialReactTable table={table} />;
}

Screenshots or Videos (Optional)

No response

Do you intend to try to help solve this bug with your own PR?

None

Terms

• I understand that if my bug cannot be reliably reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.