How to enable a feature where upon clicking on any row displays a modal with more information about the row.?

Dash Python
1

I have a dashboard which displays 0-30,000 rows of data based on input filters. I want to enable a feature where upon clicking on any row displays a modal with more information about the row. How do I achieve this?

2

Hi @ssingh80 and welcome to the Dash community :slightly_smiling_face:

You can use dash-ag-grid to display a model when you click on the row:

1 Like
3

Thank you. I only want some of the data to be visible in rows. Rest should be only visible in the pop-up/ modal when that row is clicked.

4

Hello @ssingh80,

To do that, you can omit the columns you dont want to show from the columnDefs in the grid initially, then pull the data from the cellClicked data and display the additional columns. :slight_smile:

1 Like
5

Thank you. I am not able to put divs and buttons inside rows of the grid? I get [object] [Object] in row fields.

6

What are you trying to place in there?

Can you provide a MRE:

7

This function generates one row of data

> def card_generator(cardheader, h1, h2,link,row_id):
>     body = html.Div(
>         [ 
>             html.Span(
>                 cardheader,
>                 className='hierarchy'
>             ),
>             html.Div(
>                 [
>                     html.Span(h1,style={'color': 'rgb(12, 115, 185)', 'border-color': 'rgb(12, 115, 185)'},className='name'),
>                     html.A(html.Button(h2, id=h2, n_clicks=0,style={'color': 'rgb(12, 115, 185)', 'border-color': 'rgb(12, 115, 185)'},className='button'),href=link, target="_blank")
>                 ],
>                 className='info'
>             ),
>             
>         ],
>         style ={'border-color': 'rgb(12, 115, 185)'},
>         className ='document'
>     )
>     return {'cdocs':body}
8

To use AG Grid with this info, yes, you would need to switch to more of a grid format, displaying only the data. Adjusting styling of the columns and cells.

Do you have something you are trying to emulate?

9

I need a button at least which takes me to a link for each row. IS there a way I can add it in a column for every row in the grid.

10

Yes, you can use cellRenderer in the columnDefs and create links that open up in new windows, or even use markdown to do the same.

Check out here: