Black Lives Matter. Please consider donating to Black Girls Code today.

How can a dash_table be updated the mouse over the table?

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)

See Dash Datatable mouse over on each row