✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
🐇 Announcing Dash VTK for 3d simulation graphics. Check out the March webinar.

Geting data from dashtable data in a callback when paginated

Im trying to get data from a my table in the callback. the table itself is pretty long so Ive paginated it. But the side effect appears to be that the callback can only retrive data from the first page. How can I query the full table with row and column? My code is below.

Currently I have it set to grab data from derived_virtual_data
But Ive also tried data and grabbing it from the original dataframe

page_current looks like it might be useful but Im not sure how to use it.

app.layout = html.Div([
        html.Div(
            dash_table.DataTable(
                id='editable-table',
                columns=[{"name": i.title(), "id": i} for i in df.columns],
                data=df.to_dict('records'),
                editable=True,
                filter_action="native",
                sort_action="native",
                sort_mode='multi',
                row_selectable='multi',
                row_deletable=True,
                selected_rows=[],
                page_action='native',
                page_current= 0,
                page_size= 10,
                style_cell={'textAlign': 'left'},
                ),
        ),
        html.H2("Output Here: "),
        html.Div(id='output',
                 style={'textAlign': 'left',
                         'width': '100%',
                         'display': 'inline-block',
                         'float': 'left'},
        ),
])

# Callbacks

@app.callback(
    Output('output', 'children'),
    [Input('editable-table', 'data_timestamp'),
    Input('editable-table', 'active_cell'),
    Input('editable-table', 'derived_virtual_data')])
def display_output(data_timestamp, active_cell, derived_virtual_data):
    if data_timestamp is None:
        return 'nothing yet'
    else:
        str_return = str(data_timestamp)
        return html.Div(className='output', children=[
            html.Div([
                html.Code('Timestamp: '),
                html.Code(str_return)
            ]),
            html.Div([
                html.Code('Active Cell: '),
                html.Pre(derived_virtual_data[active_cell['row']][active_cell['column_id']])
            ]),
        ])

I was able to get around this issue for now by just displaying the entire table with a vertical scroll bar.

app.layout = html.Div([
        html.Div(
            dash_table.DataTable(
                id='editable-table',
                columns=[{"name": i.title(), "id": i} for i in df.columns],
                data=df.to_dict('records'),
                # fixed_rows={ 'headers': True, 'data': 0 },
                editable=True,
                # filter_action="native",
                sort_action="native",
                sort_mode='multi',
                row_selectable='multi',
                row_deletable=True,
                selected_rows=[],
                # page_action='native',
                # page_current= 0,
                # page_size= 10,
                style_cell={'textAlign': 'left'},
                style_data={'whiteSpace': 'normal','height': 'auto'},
                style_table={'maxHeight': '300px','overflowY': 'scroll'},
                ),

            ),
        html.H2("Output Here: "),
        html.Div(id='output',
                 style={'textAlign': 'left',
                         'width': '100%',
                         'display': 'inline-block',
                         'float': 'left'},
        ),
])