DataTable - how to keep page selector always visible?

Dash Python
1

I have a Dash DataTable in my app, where depending on filtering we can have data for just one or many pages
I would like to keep the page selector always visible - even if only one page is available, is there a way to achieve this? I couldn’t find anything in the reference.

2

Hi @kiteme

Can you make an example to show what you mean?

This seems to work - here is the example in the docs with all the data filtered out

image
image1924×530 23.9 KB

1 Like
3

thanks for your reply @AnnMarieW
My apologies, I think my description saying “filtering” was misleading - we filter data in the callback, not in the table

Here is an example of when data is not filtered:

image
image803×220 4.25 KB

as you can see, we have an “Export” button styled to be displayed below the table
when we filter the data and have a one-page worth of rows:

image
image799×169 3.07 KB

Now the export button is pushed underneath the actual DataTable component, as there are no pagination buttons.

The CSS to have the Export button at the bottom of the DataTable:

.export {
position: absolute;
right:30%;
bottom:5px;
border-radius: 3px;
border: 1px var(–bs-primary);
background-color: var(–bs-primary);
color: white;
font-size:8;
}

So my thinking was that the most simple solution for this, would be to enforce the pagination buttons to be visible (and it would also mean to the user “yes, there is only one page, we aren’t missing anything here” :wink: )

4

Hi @kiteme

I see the issue now. That doesn’t seem to be an option with DataTable.

You could switch to Dash AG Grid though. When you set the pagination, it remains in place even if there is one page.

2 Likes
5

Thank you for confirming. I will certainly try AG Grid