I do not know, if there is a similar question right now (I assume), but I will ask none the less.
For example: When I use the dash_table for creating a Table I really would like to update the content on my page (or the table itself too) when I hover or click or etc. on/over the table.
I have an example code where I show the matrix A with the chosen cell (chosen row and column).
Here is the code for it (btw this is only the layout for it):
import dash_html_components as html
import dash_table
import numpy as np
import pandas as pd
from app import app
colors = {
'bg_main': '#292929',
'fg_txt1': '#7FFF80',
'fg_row_h3': '#FF6E80',
'fg_col_h3': '#6E80FF',
'fg_cell_1': '#789ABC',
'bg_cell_1': "#123456",
'fg_cell_2': '#44FF99',
'bg_cell_2': "#113388",
'fg_cell_3': '#EE88FF',
'bg_cell_3': "#443311",
}
n_rows = 8
n_cols = 5
A1 = np.random.randint(0, 10, (n_rows, n_cols))
df_A1 = pd.DataFrame(A1)
choosen_row = 3
choosen_col = 2
df_A1_row = pd.DataFrame(A1[choosen_row], columns=[choosen_row])
df_A1_col = pd.DataFrame(A1[:, choosen_col], columns=[choosen_col])
data_table_style = {
"width": "100%",
'margin-left': "auto",
'margin-right': "auto",
}
rows_A1 = df_A1.to_dict("rows")
for i, row in enumerate(rows_A1, 0):
row["col_index"] = i
rows_A1_row = df_A1_row.to_dict("rows")
for i, row in enumerate(rows_A1_row, 0):
row["col_index"] = i
rows_A1_col = df_A1_col.to_dict("rows")
for i, row in enumerate(rows_A1_col, 0):
row["col_index"] = i
table_1 = dash_table.DataTable(
id="table_A1_matrix",
editable=True,
columns=[{"name": "", "id": "col_index"}]+[{"name": i, 'id': i} for i in df_A1.columns],
data=rows_A1,
style_table=data_table_style,
style_cell={
"text-align": "center",
"font-size": "20px",
},
style_cell_conditional=[
{
"if": {"row_index": choosen_row},
"color": colors["fg_cell_1"],
"backgroundColor": colors["bg_cell_1"],
}, {
"if": {"column_id": choosen_col},
"color": colors["fg_cell_2"],
"backgroundColor": colors["bg_cell_2"],
}, {
"if": {
"row_index": choosen_row,
"column_id": choosen_col
},
"color": colors["fg_cell_3"],
"backgroundColor": colors["bg_cell_3"],
},
])
table_1_row = dash_table.DataTable(
id="table_A1_row",
editable=True,
columns=[{"name": "", "id": "col_index"}]+[{"name": i, 'id': i} for i in df_A1_row.columns],
data=rows_A1_row,
style_table=data_table_style,
style_cell={
"text-align": "center",
"font-size": "20px",
},
style_cell_conditional=[
{
"if": {"row_index": choosen_col},
"color": colors["fg_cell_1"],
"backgroundColor": colors["bg_cell_1"],
}, {
"if": {
"row_index": choosen_col,
"column_id": choosen_row,
},
"color": colors["fg_cell_3"],
"backgroundColor": colors["bg_cell_3"],
},
])
table_1_col = dash_table.DataTable(
id="table_A1_col",
editable=True,
columns=[{"name": "", "id": "col_index"}]+[{"name": i, 'id': i} for i in df_A1_col.columns],
data=rows_A1_col,
style_table=data_table_style,
style_cell={
"text-align": "center",
"font-size": "20px",
},
style_cell_conditional=[
{
"if": {"row_index": choosen_row},
"color": colors["fg_cell_2"],
"backgroundColor": colors["bg_cell_2"],
}, {
"if": {
"row_index": choosen_row,
"column_id": choosen_col,
},
"color": colors["fg_cell_3"],
"backgroundColor": colors["bg_cell_3"],
},
])
style_matrix = {
"width": "70%",
"margin-left": "auto",
"margin-right": "auto",
"margin-bottom": "0px",
"margin-top": "0px",
}
style_matrix_row = {
"width": "33.3333%",
"margin-left": "auto",
"margin-right": "auto",
"margin-bottom": "40px",
"margin-top": "40px",
}
layout = [
html.Div(
style={
'backgroundColor': colors['bg_main'],
},
children=[
html.Div(
className="row",
children=[
html.Div(
className="columns",
style=style_matrix_row,
children=[
html.Div(
style=style_matrix,
children=[
html.H2(
style={
"color": colors["fg_txt1"],
"text-align": "center",
"margin-top": "0px",
},
children="Matrix A",
),
table_1,
]),
]),
html.Div(
className="columns",
style=style_matrix_row,
children=[
html.Div(
style=style_matrix,
children=[
html.H3(
style={
"color": colors["fg_txt1"],
"text-align": "center",
"margin-top": "0px",
"margin-bottom": "0px",
},
children="Matrix A",
),
html.H3(
style={
"color": colors["fg_row_h3"],
"text-align": "center",
"margin-top": "0px",
},
children="\nRow {}".format(choosen_row),
),
table_1_row,
]),
]),
html.Div(
className="columns",
style=style_matrix_row,
children=[
html.Div(
style=style_matrix,
children=[
html.H3(
style={
"color": colors["fg_txt1"],
"text-align": "center",
"margin-top": "0px",
"margin-bottom": "0px",
},
children="Matrix A",
),
html.H3(
style={
"color": colors["fg_col_h3"],
"text-align": "center",
"margin-top": "0px",
},
children="\nColumn {}".format(choosen_row),
),
table_1_col,
]),
]),
]),
]),
]
# TODO: need something like this:
'''
@app.callback(Output("tab_content", "children"), [Input("tabs", "value")])
def hover_mouse(tab): # hovering with the mouse on the main table (Matrix A)
# update view
'''
What I really want to do with this is to be able to update the row and column tables too when the mouse hover over the matrix A table (and vice versa). But the important question is: How can I achieve this right now?
If there already exist a answer to this, please share it with me too. (also dash is a really tool)