Table does not default to page 1 after filtering

[Jobbalob]

After filtering a column in the table, page number is not reset to 1. This causes no problem when filtering is applied whilst page 1 is being inspected, but when looking at a higher page, if the filter applied reduces the size of the table to below the current page number, the forward and previous buttons are removed and navigation becomes impossible.

The buttons return upon removal of the filter, but it can be bothersome to have to return to page 1 before applying any filters.

import numpy as np
import pandas as pd
import dash
import dash_core_components as dcc
import dash_html_components as html
import dash_table



data = {'numbers': np.arange(0,100)}
df = pd.DataFrame(data, columns=['numbers'])


app = dash.Dash(__name__)

app.layout = html.Div(
			style = {'width':'48%'},
			className = 'table-container',
			children=dash_table.DataTable(
					columns = [{'name' : i, 'id' : i} for i in df.columns],
					data=df.to_dict('records'),
					editable=False,
					filter_action="native",
					filter_query='',
					sort_action="native",
					row_deletable=False,
					selected_columns=[],
					selected_rows=[],
					page_action="native",
					page_current= 0,
					page_size= 12,
				),
			)



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

[lujangus]

I'm having exactly the same problem. Any workaround so far?

[Jobbalob]

Closest thing I've got is to set a callback on page_current so that it resets to 0 every time a filter is applied.

@app.callback(
    dash.dependencies.Output('DataTable', 'page_current'),
    [dash.dependencies.Input('DataTable','filter_query')])
def reset_to_page_0(filter_query):
    
    return 0 

[lujangus]

Thanks, this works !!!

[slemouzy]

Hi,
I have the same issue but not the same way. In my case I don't filter data with the table itself but with some other inputs using a calback to update the table data property.

Here is a minimun code reporducing the issue (using dash-table 4.5.1):

import dash
import dash_core_components as dcc
import dash_html_components as html
import dash_table
from dash.dependencies import Input, Output


def _data_with_x_rows(nb_rows):
    return [{'value': val} for val in range(0, nb_rows)]


app = dash.Dash()
app.layout = html.Div([
    dcc.Input(
        id="nb-table-entries",
        type="number",
        value=20,
    ),
    dash_table.DataTable(
        id='datatable',
        columns=[{'name': 'value', 'id': 'value'}],
        page_size=5,
        data=_data_with_x_rows(20)
    ),

])

@app.callback(Output('datatable', 'data'),
              [Input('nb-table-entries', 'value')])
def _update_table_data(value):
    return _data_with_x_rows(int(value if value else 0))


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

FYI, I found another workaround by simply updating all the table component instead of only the data property.

[wang-zifu]

Hi slemouzy,

I have same issue. Could you please share how to update the table component? Thanks

[slemouzy]

Sorry @wang-zifu for the time I took for my answer, here is an example of the workaround I used:

import dash
import dash_core_components as dcc
import dash_html_components as html
import dash_table
from dash.dependencies import Input, Output

def _data_with_x_rows(nb_rows):
    return [{'value': val} for val in range(0, nb_rows)]

app = dash.Dash()
app.layout = html.Div([
    dcc.Input(
        id="nb-table-entries",
        type="number",
        value=20,
    ),
   html.Div(id='table-div', children=_table_with_data(value))
])

@app.callback(Output('table-div', 'children'),
              [Input('nb-table-entries', 'value')])
def _table_with_data(value):
  return dash_table.DataTable(
        id='datatable',
        columns=[{'name': 'value', 'id': 'value'}],
        page_size=5,
        data=_data_with_x_rows(int(value if value else 0))
    )

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

I actually don't have the time to test this small peace of code, but I hope you will have the principle of the workaround.