Enable/Disable navigation to first & last page in Table component

[ShehanIshanka]

Currently Table component has the functionality for navigating to

• First page
• Previous page
• Next page
• Last page

As per the requirement, it is needed to enable/disable navigation buttons for the First page and Last Page.

cc: @shereezhang @shihan007 @dulajra

[mturoci]

As per the requirement, it is needed to enable/disable navigation buttons for the First page and Last Page.

Can you elaborate on why this would be useful / needed?

[ShehanIshanka]

For our requirement, we only need to navigate to the previous page and the next page, and we want to disable fisrt page and last page navigation as our APIs are implemented in such a way. cc: @aravind-viswanathan

@shereezhang and @shihan007 will provide more clarification if needed.

[mturoci]

and we want to disable fisrt page and last page navigation as our APIs are implemented in such a way

How is that possible? Wave makes no implementation difference when it comes to next/prev vs last/first page. All it returns is offset - same for all options.

My question still stands, why would disabling first/last page be useful / needed?

[shereezhang]

Disabling the first/last page navigation is not our ideal solution, but due to BE limitations (which would take a good deal of time to fix) with calculating some data that would need to be known to skip to specifically the last page, we were wondering if this could be possible for now to help us proceed.

the intention in the future is to fix the BE API and enable the first/last page nav again.

[mturoci]

I see. Unfortunately, we can't add features that are only meant for tmp fixes and do not provide meaningful value because our dev resources are limited. More importantly, we would need to live with that feature forever.

I suggest temporarily hiding the first/last buttons via custom JS/CSS, and removing the hack once your BE is ready.

[shereezhang]

got it, thank you for the consideration!

[VijithaEkanayake]

@mturoci We implemented the suggested solution to hide the first/last buttons using Javascript. However, We see a minor glitch as we need to wait until the table is rendered to capture the First page and Last page buttons. Do you see any way that we can hide those buttons when rendering table?

https://github.com/h2oai/wave/assets/112595851/a59bb357-7333-4ece-b503-4618f0739db5

Script we use to hide the buttons

q.page["meta"] = ui.meta_card(
        box="",
        script=ui.inline_script(
            """
        // Find the button elements with the titles First page and Last page
        var firstPageButton = document.querySelector('button[title="First page"]');
        var lastPageButton = document.querySelector('button[title="Last page"]');

        // Hide the first and last elements
        firstPageButton.style.display = 'none';
        lastPageButton.style.display = 'none';
        """
        ),
    )

[mturoci]

You can try using CSS that is applied before the table is rendered (unlike JS which needs the element to exist first).

[VijithaEkanayake]

Thanks @mturoci, I was able to implement it only using CSS. Do you see any improvements to the below code?

async def hide_projects_table_first_and_last_navigation(q: Q, table_name: str) -> None:
    q.page["meta"] = ui.meta_card(
        box="",
        stylesheet=ui.inline_stylesheet(
            f"""
                div[data-test="{table_name}"] button[title="First page"],
                div[data-test="{table_name}"] button[title="Last page"] {{display: none;}}
            """
        ),
    )

https://github.com/h2oai/wave/assets/112595851/1557b9b8-1839-4f78-8581-1de9fa955eb2

[mturoci]

LGTM. Good job @VijithaEkanayake

[VijithaEkanayake]

LGTM. Good job @VijithaEkanayake

Thanks @mturoci for checking it ✌️