OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Call back with tables from multiple tab layout interacting with each other

  • Thread starter Thread starter Drew
  • Start date Start date
D

Drew

Guest
I am trying to build an dash app that has two tabs and each of them have the table. I want to be able to add the rows from one tab to another tab table. For example, if I click add from recommended candidates table it should add that candidate to the candidate tab table and vice versa. I have tried the following but I am having issue with the call back as it is not triggering it when I select a row and click "Add" from the action column.

Code:
import dash
from dash import dcc, html, Input, Output, State
import dash_bootstrap_components as dbc
import dash_table
import pandas as pd

# Sample data for demonstration
candidates_df = pd.DataFrame({
    'Name': ['Candidate 1', 'Candidate 2', 'Candidate 3'],
    'Age': [30, 25, 28]
})

recommended_df = pd.DataFrame({
    'Name': ['Recommended 1', 'Recommended 2'],
    'Age': [32, 27],
    'Action': ['Add', 'Add']
})

# Initialize the Dash app
app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
app.config.suppress_callback_exceptions = True

# Define app layout
app.layout = html.Div([
    dcc.Tabs(id='tabs-example', value='tab-1', children=[
        dcc.Tab(label='Candidates', value='tab-1'),
        dcc.Tab(label='Recommended Candidates', value='tab-2'),
    ]),
    html.Div(id='tabs-content')
])

# Callback to render the content of the tabs
@app.callback(
    Output('tabs-content', 'children'),
    Input('tabs-example', 'value')
)
def render_content(tab):
    if tab == 'tab-1':
        return html.Div([
            html.H3('Candidates'),
            generate_table(candidates_df, 'candidates-table'),
        ])
    elif tab == 'tab-2':
        return html.Div([
            html.H3('Recommended Candidates'),
            generate_table(recommended_df, 'recommended-table'),
        ])
    else:
        return html.Div("404 Error: Page not found")

# Callback to handle adding a candidate
@app.callback(
    Output('candidates-table', 'data'),
    Input('recommended-table', 'active_cell'),
    State('recommended-table', 'data'),
    State('candidates-table', 'data'),
    prevent_initial_call=True
)
def add_candidate(active_cell, recommended_data, candidates_data):
    if active_cell and active_cell['column_id'] == 'Action':
        row_index = active_cell['row']
        candidate_to_add = {k: recommended_data[row_index][k] for k in ['Name', 'Age']}
        candidates_data.append(candidate_to_add)
        print(f"Added candidate: {candidate_to_add}")  # Debugging statement
        return candidates_data
    print("Callback triggered but no action taken")
    return candidates_data

# Function to generate a Dash DataTable
def generate_table(dataframe, table_id, editable=True):
    columns = [{'name': col, 'id': col} for col in dataframe.columns]
    return dash_table.DataTable(
        id=table_id,
        columns=columns,
        data=dataframe.to_dict('records'),
        editable=editable
    )

if __name__ == '__main__':
    app.run_server(debug=True)
<p>I am trying to build an dash app that has two tabs and each of them have the table. I want to be able to add the rows from one tab to another tab table. For example, if I click add from recommended candidates table it should add that candidate to the candidate tab table and vice versa.
I have tried the following but I am having issue with the call back as it is not triggering it when I select a row and click "Add" from the action column.</p>
<pre><code>
import dash
from dash import dcc, html, Input, Output, State
import dash_bootstrap_components as dbc
import dash_table
import pandas as pd

# Sample data for demonstration
candidates_df = pd.DataFrame({
'Name': ['Candidate 1', 'Candidate 2', 'Candidate 3'],
'Age': [30, 25, 28]
})

recommended_df = pd.DataFrame({
'Name': ['Recommended 1', 'Recommended 2'],
'Age': [32, 27],
'Action': ['Add', 'Add']
})

# Initialize the Dash app
app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
app.config.suppress_callback_exceptions = True

# Define app layout
app.layout = html.Div([
dcc.Tabs(id='tabs-example', value='tab-1', children=[
dcc.Tab(label='Candidates', value='tab-1'),
dcc.Tab(label='Recommended Candidates', value='tab-2'),
]),
html.Div(id='tabs-content')
])

# Callback to render the content of the tabs
@app.callback(
Output('tabs-content', 'children'),
Input('tabs-example', 'value')
)
def render_content(tab):
if tab == 'tab-1':
return html.Div([
html.H3('Candidates'),
generate_table(candidates_df, 'candidates-table'),
])
elif tab == 'tab-2':
return html.Div([
html.H3('Recommended Candidates'),
generate_table(recommended_df, 'recommended-table'),
])
else:
return html.Div("404 Error: Page not found")

# Callback to handle adding a candidate
@app.callback(
Output('candidates-table', 'data'),
Input('recommended-table', 'active_cell'),
State('recommended-table', 'data'),
State('candidates-table', 'data'),
prevent_initial_call=True
)
def add_candidate(active_cell, recommended_data, candidates_data):
if active_cell and active_cell['column_id'] == 'Action':
row_index = active_cell['row']
candidate_to_add = {k: recommended_data[row_index][k] for k in ['Name', 'Age']}
candidates_data.append(candidate_to_add)
print(f"Added candidate: {candidate_to_add}") # Debugging statement
return candidates_data
print("Callback triggered but no action taken")
return candidates_data

# Function to generate a Dash DataTable
def generate_table(dataframe, table_id, editable=True):
columns = [{'name': col, 'id': col} for col in dataframe.columns]
return dash_table.DataTable(
id=table_id,
columns=columns,
data=dataframe.to_dict('records'),
editable=editable
)

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

</code></pre>
 

Latest posts

ن
Replies
0
Views
1
نعمان منذر محمود الجميلي
ن
Top