Datatable front-end pagination showing 0 lines

Dash Python
1

Hey guys,

I’m having a new issue with the dash_table.DataTable() component. This time I checked, I didn’t find any ongoing issues on github! I’m trying to enable front-end pagination for a DataTable I dynamically create and it’s not working.

Context:

  • user load some CSV files
  • I compute a bunch of stuff and return it as JSON in hidden div
  • Which triggers my callback that creates a datatable + 3 graphs
  • Now at this point, the user can filter the database through Dropdown and DateRangePicker, which will re-create the datatable/graphs

What happens:
I tried adding the following code in the callback where I create the DataTable:

pagination_settings={
            'current_page': 0,
            'page_size': 5,
        },
        pagination_mode='fe',

However, the layout displays an empty table (ie 0 rows are shown)
For the record, I checked with the help of a temporary callback if the DataTable ‘data’ was not empty. It’s not. All my lines are there. But they are not displayed.

1 Like
2

I’ve added below an example to show my problem. It’s weirder than I thought. I added a callback that prints then returns the data in another div, to check if there is data. The data is printed but not returned.

’Normal example’:

# ----- IMPORTS
import dash
import dash_html_components as html
from dash.dependencies import Output, Input
import pandas as pd
import dash_table

# ----- DATA
data = {
    'col 1': [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
    'col 2': [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
}
datatable = pd.DataFrame(data)

# ----- APP
app = dash.Dash(__name__)
app.layout = html.Div([
    html.Button('click me', id='btn'),
    html.Div(id='results'),
    html.Div(id='mydata')
])

# ----- CALLBACK
@app.callback(
    Output('results', 'children'),
    [Input('btn', 'n_clicks')]
)
def create_datatable(n):
    return html.Div([
        dash_table.DataTable(
            id='global-datatable',
            columns=[{"name": i, "id": i} for i in datatable.columns],
            data=datatable.to_dict("rows"),
            pagination_mode='fe',
            pagination_settings={
                'current_page': 0,
                'page_size': 5,
            },
        )
    ])


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

Example with weird callback:

import dash
import dash_html_components as html
from dash.dependencies import Output, Input
import pandas as pd
import dash_table

# ----- DATA
data = {
    'col 1': [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
    'col 2': [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
}
datatable = pd.DataFrame(data)

# ----- APP
app = dash.Dash(__name__)
app.config['suppress_callback_exceptions'] = True
app.layout = html.Div([
    html.Button('click me', id='btn'),
    html.Div(id='results'),
    html.Div(id='mydata')
])

# ----- CALLBACK
@app.callback(
    Output('results', 'children'),
    [Input('btn', 'n_clicks')]
)
def create_datatable(n):
    return html.Div([
        dash_table.DataTable(
            id='global-datatable',
            columns=[{"name": i, "id": i} for i in datatable.columns],
            data=datatable.to_dict("rows"),
            pagination_mode='fe',
            pagination_settings={
                'current_page': 0,
                'page_size': 5,
            },
        )
    ])


@app.callback(
    Output('mydata', 'children'),
    [Input('global-datatable', 'data')]
)
def show_that_data_exists(data):
    print(data)
    return html.Div(data)


# ----- RUN
if __name__ == '__main__':
    app.run_server(debug=True)
1 Like
3

I am struggling with the exactly the same issue

4

I ended up doing back-end paging for now

5

Try changing

pagination_settings={
    'current_page': 0,
    'page_size': 5,
}

for

pagination_settings={
    'displayed_pages': 1,
    'current_page': 0,
    'page_size': 5,
}

The documentation states correctly that the nested prop ‘displayed_pages’ is deprecated but after checking one usage still remains in the code. I’ve created this issue to follow it up: https://github.com/plotly/dash-table/issues/275.

Thanks!

1 Like
6

Thanks for the info, I’ll check it out.

I think I’ll keep it in backend-mode for now as I’ve added some tweaks. For example, you can hit ‘next-page’ indefinitely which will eventually display an empty table (but you’ll have to hit ‘previous’ as many times). So I made a small function to re-calculate the page number if it goes beyond the last page. So the table will basically loop