Hello, I have been trying to use scrollContainer to attach the scroll event listener to a scrollable material ui table component, but I am a little confused about what the correct way to do this is with functional components (I have been reading that using a query selector string in a functional component like this isn't ideal, although I haven't gotten that to work either). I have done quite a bit of asking around and searching for solutions to this and still have not come up with anything. I will attach some simplified code to hopefully help understand what I am trying to achieve.
export default function StickyHeadTable() {/some vars hereconst tableContainerRef = useRef();return (<Paper><TableContainer ref={tableContainerRef}> /this is the scrollable container I need to reference in the scrollContainer on LazyLoad/pseudocode table row and table cell<LazyLoad scrollContainer={tableContainerRef.current} height={200} offset={200}>/data here</LazyLoad></TableContainer></Paper>);
In this code example the scrollable container I need to reference inside my LazyLoad component is the TableContainer element, how would I go about adding that ref to scrollContainer?
EDIT: I tried creating a ref like in the code above but the reference to the TableContainer is null, because TableContainer is not yet rendered when the ref gets passed to the scrollContainer prop on LazyLoad. Is there some kind of solution to this with useEffect?
Thanks, I appreciate any help I can get with this.
Hello, I have been trying to use scrollContainer to attach the scroll event listener to a scrollable material ui table component, but I am a little confused about what the correct way to do this is with functional components (I have been reading that using a query selector string in a functional component like this isn't ideal, although I haven't gotten that to work either). I have done quite a bit of asking around and searching for solutions to this and still have not come up with anything. I will attach some simplified code to hopefully help understand what I am trying to achieve.
export default function StickyHeadTable() {/some vars hereconst tableContainerRef = useRef();return (<Paper><TableContainer ref={tableContainerRef}> /this is the scrollable container I need to reference in the scrollContainer on LazyLoad/pseudocode table row and table cell<LazyLoad scrollContainer={tableContainerRef.current} height={200} offset={200}>/data here</LazyLoad></TableContainer></Paper>);In this code example the scrollable container I need to reference inside my LazyLoad component is the TableContainer element, how would I go about adding that ref to scrollContainer?
EDIT: I tried creating a ref like in the code above but the reference to the TableContainer is null, because TableContainer is not yet rendered when the ref gets passed to the scrollContainer prop on LazyLoad. Is there some kind of solution to this with useEffect?
Thanks, I appreciate any help I can get with this.