Pagination doesn't work when more than one table is on the page

[chriddyp]

import dash
import dash_table
import dash_html_components as html
import pandas as pd

df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/solar.csv')

app = dash.Dash(__name__)

table1 = dash_table.DataTable(
    id='table1',
    columns=[{"name": i, "id": i} for i in df.columns],
    data=df.to_dict('records'),
    page_action="native",
    page_size=5,
)

table2 = dash_table.DataTable(
    id='table2',
    columns=[{"name": i, "id": i} for i in df.columns],
    data=df.to_dict('records'),
    page_action="native",
    page_size=7,
)

app.layout = html.Div([
    table1,
    table2
])

if __name__ == '__main__':
    app.run_server(debug=True)

As reported in https://community.plotly.com/t/potential-bug-dash-datatable-paging-for-multiple-datatables-on-the-same-page/45431

[abondrn]

I am encountering this as well. As in the original post, the first table has page numbers but is unresponsive when you click or try to type in a page number, however this works fine on the second table.

Interestingly, other native interactivity such as sorting and filtering work just fine, so my guess is the culprit lies in how the pager is linked to the table, rather than the other way around. I'd love to take a crack at this, but I'm not at all familiar with the codebase, would greatly appreciate pointers.

[mrspieb]

I just had the same issue. It seems to be an error with the spacing underneath the table. The following workaround works for me:

import dash
import dash_table
import dash_html_components as html
import pandas as pd

df = pd.read_csv("https://raw.githubusercontent.com/plotly/datasets/master/solar.csv")

app = dash.Dash(__name__)

table1 = dash_table.DataTable(
    id="table1",
    columns=[{"name": i, "id": i} for i in df.columns],
    data=df.to_dict("records"),
    page_action="native",
    page_size=5,
)

table2 = dash_table.DataTable(
    id="table2",
    columns=[{"name": i, "id": i} for i in df.columns],
    data=df.to_dict("records"),
    page_action="native",
    page_size=7,
)

app.layout = html.Div(
    [
        html.Div(table1, style={"padding-bottom": "50px"}),
        table2
    ]
)

if __name__ == "__main__":
    app.run_server(debug=True)