Datatabe: Move paging controls to different place in the DOM

Dash Python
1

By default the datatable paging is located below the table on the right. I would like to move the paging div (class previous-next-container) to another place on my page.

In particular, I have a table footer (which carries summary statistics for the table) which is located right underneath the table and I would like to integrate the paging into this table footer. I tried moving the div in the DOM but that trigged JS exceptions.

Do you have an idea how to resolve this issue?

2

This is the workaround I am using.

.previous-next-container {
position: absolute;
right: 0px;
padding: 0px !important;
color: white;
}
.previous-next-container button {
line-height: normal;
height: 0px;
padding: 0px !important;
}

1 Like
3

Thanks. I was able to left align my control with as simple as:

.previous-next-container {
    position: absolute;
}
1 Like
4

Just in case people are looking for info on how to style the paging controls in Dash AG Grid, you can find more info and examples here: