Bring Drag & Drop to Dash with Dashboard Engine. 💫 Learn how at our next webinar!

DataTable active cell row information in multiple page tables

I have a DataTable that must have a page size of 5 records maximum because of design restrictions. I’m using a callback to return additional data based on the DataTable clicked cell.

However, when the table has multiple pages the ‘row’ information starts from 0 to each page.

Looking at the example below, is there a trivial way to obtain ‘row’: 5 for the first row in the second page?

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

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

app.layout = html.Div([

    html.H4('Multiple page datatables - active cell information'),

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

    dcc.Markdown(id= 'test_cell'),
    ])

@app.callback(
    Output('test_cell', 'children'),
    Input('table', 'active_cell'))

def return_cell_info(active_cell):
    return str(active_cell)

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

Thank you in advance!

Hi @bohnpessatti, and welcome to the Dash community :slight_smile:

Yes, there is a way to get the row number you are looking for! See the Row IDs section here for more information: https://dash.plotly.com/datatable/interactivity

Here is your example with the row id added.

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

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

df = df.reset_index().rename(columns={"index": "id"})


app = dash.Dash(__name__)

app.layout = html.Div([

    html.H4('Multiple page datatables - active cell information'),

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

    dcc.Markdown(id= 'test_cell'),
    ])

@app.callback(
    Output('test_cell', 'children'),
    Input('table', 'active_cell'))

def return_cell_info(active_cell):
    return str(active_cell)

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

1 Like

Thank you very much! Very simple and elegant solution.

1 Like