Hide vertical scrollbar in full screen mode

[PeterSchulzNL]

When a MRT table goes into full screen mode the body height is set to 100vh to remove the vertical scrollbar. Unfortunately this does not always hide the scrollbar. I fixed this by adding a temporary stylesheet on full screen mode and remove it when the users exits full screen mode. Below is the code. Feel free to use it.

useEffect(() => {

	const cssElementId: string = "mrt-remove-body-vertical-scrollbar"
	if (table.getState().isFullScreen) {
		// Remove vertical scrollbar from body
		const cssTemplate: string = `
			body {
				overflow-x: hidden;
				overflow-y: hidden;
				overflow: hidden;
				scrollbar-width: none;
				-ms-overflow-style: none;
			}
			body::-webkit-scrollbar {
				display: none;
			}
		`
		const cssElement: HTMLStyleElement = document.createElement("style")
		cssElement.id = cssElementId
		cssElement.innerHTML = cssTemplate
		document.head.appendChild(cssElement)
	} else {
		// Restore vertical scrollbar body
		document.getElementById(cssElementId)?.remove()
	}

	// eslint-disable-next-line react-hooks/exhaustive-deps
}, [table.getState().isFullScreen])