How do i download the dataframe live fromm this dash plotly with a loader

Dash Python
1

So, I am running a query in SQL to extract to the data from the database and putting it inside a card the number of rows it has.(count of it)

I want to make a download button as the card footer and download the Dataframe with the required details.
But the thing is , I want to load the data inside the card first (the count of rows) and then show the download button in the card footer so the user can download the necessary details. ( Also need a loader until the SQL query runs in the background)
How do I do that ? Please help me with this .
The source code is :

def ticket():
    issues = pd.read_sql(f"""
    
        SELECT * FROM issues.ticket;
        
    """, engine)
    return ticket


card = dbc.Card(
    [
        dbc.CardHeader(
            [
                html.H6("This Week's Tickets", className="mb-0",
                        style={'font-size': '12px', 'text-align': 'center'})
            ],
            className="border-0 center",
            style={"background-color": "#A6E3E9"}
        ),
        dbc.CardBody(
            [
                html.Img(src='assets/tickets.png',
                         style={'height': '24px', 'width': '24px', 'margin-right': '10px'},
                         alt='icon', className='img-fluid'),
                # html.H3("25", className="card-title"),
            ],
            className="border-0 d-flex align-items-center"
        ),
        dbc.CardFooter(
            dbc.Row(
                [
                ],
                align="center"
            )
        )
    ],
    style={"height": "330px", "border-radius": "10px", "background-color": "#E3FDFD",
           "box-shadow": "1px 2px 7px 0px grey"},
    className="border-0"
)
2

Hi @Lucifer do I understand you correctly?

  • you want to load data from the database
  • after this is finished, you want to show a button
  • after the button click, something should get downloaded

Concerning the button: You could have it in your layout and set hidden=True initially. Once the data is loaded, you could chnage te visibility of the button. An example:

You could also create the button dynamically, some examples for this can be found here:

Concerning the “loader” you can find a generic example here: