Unexpected behavior on table horizontal scrolling

[moreei]

Hi @shadcn! Many thanks for this repo, amazing work 👏

Just noticed a strange behavior on the table component. When the content of the table is larger than the screen, a white space the size of the overflow is created. I have tried several things to fix this but nothing that works properly so far.

Tasks.-.22.May.2023.mp4

[PixeledCode]

opened up a PR that solves this overflow issue #428

[moreei]

Hey! Implemented in my code, it works fine 👌 Thanks for your contribution ❤️

[Cesar90]

Hey folks, perhaps this could work for someone

First watch of change of size of parent div using useLayoutEffect and ResizeObserver to observe changes to the div's size and save state in useState

const [elementWidth, setElementWidth] = React.useState(0);
React.useLayoutEffect(() => {
        // Function to update the width of the div using getElementById
        const updateWidth = () => {
            const element = document.getElementById('main-content');
            if (element) {
                setElementWidth(element.clientWidth - 70);
            }
        };

        // Create a ResizeObserver instance to observe changes to the div's size
        const resizeObserver = new ResizeObserver(() => {
            updateWidth(); // Call updateWidth when the div is resized
        });

        const element = document.getElementById('main-content');
        if (element) {
            resizeObserver.observe(element); // Start observing the div
        }

        // Initial width calculation
        updateWidth();

        // Cleanup function to disconnect the observer
        return () => {
            if (element) {
                resizeObserver.unobserve(element);
            }
        };
}, []);

Second I use elementWidth on the parent div of <Table /> like this

With this the size of table can change when screen change.

[brandontle]

Thanks @Cesar90! This was the only solution that worked for me