Stick the table headings to the top while scrolling down

[Sayan-Nandy]

I can't remember which column stands for what when I scroll down, so it might be helpful to stick the table headers to the top when scrolling down. This is especially helpful in mobiles.

[KANE-99]

/claim

[shuklaayush]

/available

[github-actions[bot]]

This issue is available for contribution.

Please reply "/claim" (without quotes) if you wish to work on this issue.

[singharyan1007]

/claim

[github-actions[bot]]

Thank you @singharyan1007 for claiming this issue! 🎉

Please reference this issue when you submit your Pull Request and make sure you follow the contributing guidelines.

[nandirishav]

/claim

[n5r]

Because of left-column being sticky we have to use JS magic for this. I don't have time to integrate in project at moment, but here's some example working code (not fully optimised, mind you):

(function(){
    // Get table and header refs
    // TODO: Make headers dynamic as table changes
    let table = document.querySelector('.table-container>.table');
    let headers = document.querySelectorAll('.table-container>.table>.row.heading:first-child>.cell');
    
    // Set config values, set the special z indices for the header divs
    const stickBottomLimit = 150;
    const firstHeaderZ = 140;
    const otherHeaderZ = 120;
    headers.forEach((el, index)=>{
        el.style.zIndex = index==0 ? firstHeaderZ : otherHeaderZ;
    });

    // Build the handler that makes headers stick
    const handleScroll = ()=>{
        const rect = table.getBoundingClientRect();
        let offset = 0;
        if (rect.top < 0) {
            offset = Math.min(-rect.top, rect.height-stickBottomLimit);
        }
        headers.forEach((el)=>{
            el.style.transform = 'translateY('+offset+'px)';
        });
    };

    // Build debounced scroll listener
    let ticking = false;
    document.addEventListener('scroll', (e)=>{
        if (!ticking) {
            window.requestAnimationFrame(()=>{
                handleScroll();
                ticking = false;
            });
            ticking = true;
        }
    });
})();

Hopefully one of the claimants can integrate in React and add a pull request :D

[sayna3311]

What is the status to this? Is this done? I would like to contribute to it.

[n5r]

@sayna3311 None of the original claimants has responded, so if you can integrate the code into React it would be great!

[sayna3311]

Sure thing, you can assign it to me. Thank you.

[sayna3311]

@n5r @shuklaayush I have implemented your method in react using useEffect. Here is the demo

https://user-images.githubusercontent.com/67572440/131243014-5016847c-9ddd-4e6c-8ca3-6cccae71218b.mp4

I'm sending the PR, please review.