Skip to content
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.

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

possible to disable this with a prop? #42

Open
mdodge-ecgrow opened this issue Oct 2, 2024 · 2 comments
Open

possible to disable this with a prop? #42

mdodge-ecgrow opened this issue Oct 2, 2024 · 2 comments

Comments

@mdodge-ecgrow
Copy link

mdodge-ecgrow commented Oct 2, 2024

I know this sounds like a weird request, but I'd like the option to disable this with a prop. I have a Table component with the Scrollbars tag at the very top so the table correctly scrolls. I am using this Table component in several components. One of my components I am working on actually has the Scrollbars in a component above the table so I don't want the table to have the scroll, so I would just like to disable the scroll for that particular circumstance. My other option is to make an identical component to Table and call it NonScrollingTable or something. But I know that is not ideal to copy so much code. DRY concept etc.

If it is any help, here is how I am using it in Table:

<Scrollbars
	autoHeight
	autoHeightMin={100}
	autoHeightMax={'calc(100vh - 160px)'}
>
@mdodge-ecgrow
Copy link
Author

Found another circumstance where I would like to disable scrolling via prop. If the user is editing a table row, I don't want them to be able to scroll the row being edited out of view. I would like to disable scrolling all together when they are editing a row.

@mdodge-ecgrow
Copy link
Author

mdodge-ecgrow commented Jan 3, 2025

For anyone else trying to figure this out, here is my hack that works for me:

...
const renderView = ({style, ...props}) => {
		const customStyle = {
			overflow: `${adding ? 'hidden' : 'auto'}`,
		};
		return <div {...props} style={{...style, ...customStyle}}/>;
	}

	return (
		<Scrollbars
			autoHeight
			autoHide
			autoHeightMin={100}
			autoHeightMax={`calc(100vh - ${editSortingGroupObj?.id || adding ? '200px' : '160px'})`}
			renderView={renderView}
		>
...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant