Open a New tab in the browser based on hyperlink inside table

Dash Python
,
1

Hi I’m trying to display some data that is in a local directory when I click the link inside the table. I was trying to do this with this code:

image
image1908×183 3.52 KB

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

# Initialize the Dash app
app = dash.Dash(__name__)

# Example list of directories or csv file paths (assuming the local directory structure)
csv_files = [
    {"name": "File 1", "link": "csv_files/file1.csv"},
    {"name": "File 2", "link": "csv_files/file2.csv"},
]

# Layout with Dash Table containing hyperlinks
app.layout = html.Div([
    dash_table.DataTable(
        id='table',
        columns=[{"name": "File Name", "id": "name"}, {"name": "Link", "id": "link", "presentation": "markdown"}],
        data=[{
            "name": file["name"],
            "link": f"[Click Here](/{file['link']})"
        } for file in csv_files],
        style_table={'height': '400px', 'overflowY': 'auto'},
    ),
    dcc.Location(id='url', refresh=False),
    html.Div(id='csv-content')  # To display csv content
])


@app.callback(
    Output('csv-content', 'children'),
    Input('url', 'pathname')
)
def display_csv_data(pathname):
    # Check if the path exists
    if pathname and pathname.startswith('/csv_files/'):
        # Extract the file name from the path
        file_path = os.getcwd() + pathname  # Assuming the file paths are relative to the working directory
        if os.path.exists(file_path):
            # Load the CSV file
            df = pd.read_csv(file_path)
            return html.Div([
                html.H5(f"Showing Data for {pathname.split('/')[-1]}"),
                html.Pre(df.to_string())
            ])
        else:
            return html.Div([html.H5("File not found.")])
    return html.Div([])


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

The thing is that the table is being displayed in the same window, I will like to see this information in another tab only with the information that I need, Is this possible?

2

Hello @seventy77,

I don’t believe this is possible with DataTable, you’d need to declare the markdown target to be _blank. But you can easily do this is AG grid.

1 Like
3

Jinny I was trying with AG Grid but I was not able to do it :frowning: