Responsive table that follows as you scroll

[Parker_Jacobs]

Hi everyone, back for a quick and hopefully easy solution to this functionality I’d like.

In the screenshot above, on the left-hand side I’m planning on having a long list of companies. This list will eventually reach around 500 companies so it will be a very lengthy page. When you select a company the table on the right pops up displaying a more in-depth view of that companies’ details.

Unfortunately, right now when you select a company far down on the list you need to scroll all the way back up to view the details. Is there a way to make it so the responsive table pops up where the user currently is on the list, or better yet the table on the right remains static on the screen while you can scroll the list on the left.

Any responses or articles to help would be appreciated. Thanks again everyone.

[guptast]

Hi Parker, have you considered using modals to display the company details when clicked on a company name?

[Parker_Jacobs]

I’d prefer aesthetically to not use modals. Thank you for the recommendation though and that would most definitely work.

[guptast]

In that case, another option can be to display the list of companies in a container in the top half of the page with pagination and a search box and then display the company details at the bottom when clicked on a company name.

[Cheese]

You could use Offcanvas to display your data.

Creating Offcanvas Sidebar with Bootstrap 5

Intro You can add hidden sidebars for your web sites and apps for navigation, shopping carts, and more which appear from the left, right, or bottom edge of the viewport. You can show and hide them using buttons, links or other elements on your page. You can also control the Offcanvas Sidebars using App Connect dynamic events. This is possible thanks to the Offcanvas component in Bootstrap 5. Creating Offcanvas Sidebar We created a simple Bootstrap 5 page, where we want to add the Offcanvas c…

[Parker_Jacobs]

Hi Cheese,

again, that works, but is the functionality that I’m talking about nonexistent? It would just be so nice if the right side of the screen was static while the left wasn’t.

[brad]

@guptast has the right idea. A paged query with pagination and a search field is the way to go if you don’t want to use a modal or offCanvas. Actually, even with a modal or offanvas I would still used a paged query with pagination at very minimum.

[Parker_Jacobs]

ok, if this is the route, I should be following I’ll look into it more. Any helpful resources to look more into paged query with pagination?

[guptast]

Link to the How-To docs on the dynamic pagination:

Wappler Documentation - Applying Dynamic Paging

The existing APIs can be converted to Paged Records under the Query Type options. So, you can skip the initial part of the How-To docs and begin from the Server Connect section.

[Parker_Jacobs]

how do I do a search field?

[brad]

First things first

Get your paged query and pagination working and the search is easy to add after that. You got this!

[ben]

In CSS set the table’s container height and the table to fit snug within the container as in"

  .table-responsive {
    height: 300px;
    overflow: auto;
  }

  .table {
    position: sticky;
    top: 0;
    width: 100%;
  }

The HTML will look like

        <div class="col">
          <div class="table-responsive">
            <table class="table">

As a side note: I would set the height of the table to the height of the page minus the height of the header and footer similar to

height: calc(100vh - 250px);

[pixlapps]

In the past I have used affix plugin which was baked into previous versions of bootstrap to achive fixing the right hand column to the top of the page while you keep scrolling the left hand column:

Bootstrap Affix

Not sure if it is included in recent versions of Bootstrap.

I can send you more information should this be a solution for you. Problem is a work around for mobile should you need to have the site responsive for smaller devices and not only desktop.