Responsive column hiding

[PeterSchulzNL]

Some people have been asking for responsive column hiding like datatables. Here is some code to add this feature to MRT.

const table = useMaterialReactTable({
	your options...
})

const responsizeColumnHiding = (minColumns: number = 1) => {
	const containerWidth = table.refs.tableContainerRef.current.offsetWidth
	const cellPadding =
		table.getState().density === "spacious" ? 40 : (
			table.getState().density === "comfortable" ? 32 : 16
		)
	const extraMargin = 20
	let totalColumnWidth = 0

	const columns = table.getAllColumns()
	for (let i = 0; i < columns.length; i++ ) {
		totalColumnWidth += columns[i].getSize() + cellPadding
		if (totalColumnWidth + extraMargin > containerWidth) {
			if (i > minColumns) {
				columns[i].toggleVisibility(false)
			}
		} else {
			columns[i].toggleVisibility(true)
		}
	}
}

useEffect(() => {

	responsizeColumnHiding(3)

	function handleResize() {
		responsizeColumnHiding(3)
	}
	window.addEventListener("resize", handleResize)

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

Column visibility is recalculated on windows resizing and density changes. Suggestions for improvement are welcome.

The extra margin is required as columns can take up a little more space than defined in column size. The minColumns parameter helps to prevent hiding all or essential columns e.g. in case of row action and row selection columns. When the minColumns requires more space than available the horizontal scrollbar appears.

Hope this helps other as well!

[KevinVandy]

If we get a full sandbox created, we could add it to the column hiding docs

[PeterSchulzNL]

I'll see what I can do Kevin! 👍