Dash Datatable next button not functional

Dash Python
1

I am reading data from a sql lite database and using dash datatable. The dash Next datatable does not work. please see code below:

import math

import sqlite3

import dash_bootstrap_components as dbc

import pandas as pd

from dash import Dash, Input, Output, State, dash_table, html

db_conn = sqlite3.connect("./data/excel_file.db")

data = pd.read_sql("SELECT * FROM data", db_conn)

app = Dash(
    __name__,
    external_stylesheets=[dbc.themes.BOOTSTRAP],
    title="ExcelApp",
    update_title=None,
)

table = html.Div(

    [
        dash_table.DataTable(
            data=data.to_dict("records"),
            columns=[{"id": c, "name": c} for c in data.columns],
            style_table={"overflowX": "auto"},
            page_size=20,
            editable=True,
            page_count=math.ceil(len(data) / 20),
            page_action='native'
        )

    ],

    style={"padding": "1%"},

)

app.layout = html.Div([html.Br(), table, html.Br()])

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

Hi @John-A,
what do you mean by “the dash Next datatable does not work?”
I replaced your code with fake data and the next > works. It takes me to the next page of the datatable.
Is that what you’re referring to?

import math
import dash_bootstrap_components as dbc

import pandas as pd

from dash import Dash, Input, Output, State, dash_table, html

data = pd.read_csv("https://raw.githubusercontent.com/Coding-with-Adam/Dash-by-Plotly/master/Other/Monterrey/airbnb.csv")


app = Dash(
    __name__,
    external_stylesheets=[dbc.themes.BOOTSTRAP],
    title="ExcelApp",
    update_title=None,
)

table = html.Div(

    [
        dash_table.DataTable(
            data=data.to_dict("records"),
            columns=[{"id": c, "name": c} for c in data.columns],
            style_table={"overflowX": "auto"},
            page_size=20,
            editable=True,
            page_count=math.ceil(len(data) / 20),
            page_action='native'
        )

    ],

    style={"padding": "1%"},

)

app.layout = html.Div([html.Br(), table, html.Br()])

if __name__ == "__main__":
    app.run_server(debug=False)
1 Like
3

Thanks @adamschroeder for your help! Did you change anything apart from the data? Could it be because I am using the data from the database?

4

I just changed the data, nothing else. I’m not sure why the data you’re using from the database would do that. Are you able to share your data with us on a csv sheet or is it confiential?

1 Like
5

I tried again with debug True and it works