# Dash DataTable: highlight row when cell is selected; callback issues

**URL:** <https://community.plotly.com/t/dash-datatable-highlight-row-when-cell-is-selected-callback-issues/71673>\
**Category:** Dash Python\
**Created:** [January 16, 2023, 5:00pm UTC](https://community.plotly.com/t/dash-datatable-highlight-row-when-cell-is-selected-callback-issues/71673 "2023-01-16T17:00:39Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![the.oldest.house](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/the.oldest.house/32/26148_2.png) [@the.oldest.house](https://community.plotly.com/u/the.oldest.house)\
**Post date:** [January 16, 2023, 5:00pm UTC](https://community.plotly.com/t/dash-datatable-highlight-row-when-cell-is-selected-callback-issues/71673/1 "2023-01-16T17:00:39Z")

</div>

Hi everyone,

I found a few examples in this forum on how to make the whole DataTable row highlighted when a cell is selected. But I am struggling to integrate that with an already-existing callback.

Here’s my code that works (no row selection function): [xenosaga/app.py at master · perfectly-preserved-pie/xenosaga · GitHub](https://github.com/perfectly-preserved-pie/xenosaga/blob/master/app.py)

It just renders the tab with the Dash DataTable only.

And then here is the code that should highlight the selected row, but doesn’t work. It gives me

“A nonexistent object was used in an `Input` of a Dash callback. The id of this object is `datatable-interactivity` and the property is `active_cell`. The string ids in the current layout are: [tabs, tab-content]”

and

"ID not found in layout  
Attempting to connect a callback Input item to component:  
“datatable-interactivity”  
but no components with that id exist in the layout.

If you are assigning callbacks to components that are  
generated by other callbacks (and therefore not in the  
initial layout), you can suppress this exception by setting  
`suppress_callback_exceptions=True`.  
This ID was used in the callback(s) for Output(s):  
tab-content.children, datatable-interactivity.selected\_row\_indices"

The code that spawns this error is as follows:

```auto

...

style_data_conditional = [
    {
        "if": {"state": "active"},
        "backgroundColor": "rgba(150, 180, 225, 0.2)",
        "border": "1px solid blue",
    },
    {
        "if": {"state": "selected"},
        "backgroundColor": "rgba(0, 116, 217, .03)",
        "border": "1px solid blue",
    },
]

# Create the Dash DataTable for episode 3
ep3_table = dash_table.DataTable(
    columns=[
        {"name": i, "id": i} for i in ep3_df.columns
    ],
    data=ep3_df.to_dict("records"),
    tooltip_delay=0,
    tooltip_duration=None,
    id='datatable-interactivity',
    filter_action="native",
    filter_options={
        'case': 'insensitive',
        'placeholder_text': 'Type a string to search...'
    },
    sort_action="native",
    style_data_conditional=style_data_conditional,
)

# Create the tab content
tab_1 = html.Div(children=[ep1_table])
tab_3 = html.Div(children=[ep3_table])

# Create the home page layout
app.layout = dbc.Container([
  dbc.Row( # First row: title card
    [
      dbc.Col([title_card]),
    ]
  ),
  dbc.Row( # Second row: tabs/tables
    html.Div(
      [
        dbc.Col(
          [
            tabs,
            html.Div(id="tab-content")
          ]
        )
      ]
    ),
  ),
],
className = "dbc"
)

# Create the callback to update the tab content
@app.callback(
  [Output("tab-content", "children"),
  Output("datatable-interactivity", "selected_row_indices")],
  [Input("tabs", "value"),
  Input("datatable-interactivity", "active_cell")]
)
def render_content(tab, active_cell):
    if tab == "ep1":
        return tab_1, []
    elif tab == "ep3":
        if active_cell is not None:
            return tab_3, [active_cell["row"]]
        return tab_3, []

# Run the app
app.run_server(debug=True)

```

I know my callback is wrong, but I don’t understand how to include both tab rendering and row highlighting together…

---

<div class="post-metadata">

**Author:** ![AnnMarieW](https://avatars.discourse-cdn.com/v4/letter/a/ec9cab/32.png) [@AnnMarieW](https://community.plotly.com/u/AnnMarieW)\
**Post date:** [January 16, 2023, 6:52pm UTC](https://community.plotly.com/t/dash-datatable-highlight-row-when-cell-is-selected-callback-issues/71673/2 "2023-01-16T18:52:42Z")

</div>

Hi @the.oldest.house

You might find this example helpful: [Dash DataTable: press on cell should highlight row - #2 by AnnMarieW](https://community.plotly.com/t/dash-datatable-press-on-cell-should-highlight-row/44076/2)

---

<div class="post-metadata">

**Author:** ![the.oldest.house](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/the.oldest.house/32/26148_2.png) [@the.oldest.house](https://community.plotly.com/u/the.oldest.house)\
**Post date:** [January 17, 2023, 4:33am UTC](https://community.plotly.com/t/dash-datatable-highlight-row-when-cell-is-selected-callback-issues/71673/3 "2023-01-17T04:33:17Z")

</div>

Thanks! I was able to get that working in my app, but I had to sacrifice the tab selection callback. I’m having trouble getting both to work at the same time.

I think the reason why Dash is saying it can’t find my DataTable’s ID `datatable-interactivity` is because I’m dynamically rendering the DataTable based on the selection of a tab:

```auto

# Create the home page layout
app.layout = dbc.Container([
  dbc.Row( # First row: title card
    [
      dbc.Col([title_card]),
    ]
  ),
  dbc.Row( # Second row: tabs/tables
    html.Div(
      [
        dbc.Col(
          [
            tabs,
            html.Div(id="tab-content") # this is how I'm showing a DataTable based on a callback/user input
          ]
        )
      ]
    ),
  ),
],
className = "dbc"
)

```

As you can see, `datatable-interactivity` isn’t explicitly defined anywhere in the layout. Rather, the Div’s id `tab-content` is what contains the DataTable but that’s dynamically generated based on user input (the tab selection).

Do you know how I can make my DataTables’ IDs visible, even if it’s not explicitly defined in the app layout? Or is there another way of resolving this?  
Once I do that, I think I can get it to work with this callback (correct me if I’m wrong):

```auto
# Create the callback to update the tab content
@app.callback(
    [ 
      Output("tabs-content", "children"),
      Output("datatable-interactivity", "style_data_conditional"),
    ],
    [
      Input("tabs", "value"),
      Input("datatable-interactivity", "active_cell"),
    ]
)
def render_content(tab, active_cell):
    style = style_data_conditional.copy()
    if active_cell and tab == "ep1":
      style.append(
        {
          "if": {"row_index": active_cell["row"]},
          "backgroundColor": "rgba(150, 180, 225, 0.2)",
          "border": "1px solid blue",
        },
      )
      return tab_1, style
    elif active_cell and tab == "ep3":
      style.append(
        {
          "if": {"row_index": active_cell["row"]},
          "backgroundColor": "rgba(150, 180, 225, 0.2)",
          "border": "1px solid blue",
        },
      )
      return tab_3, style

```

---

<div class="post-metadata">

**Author:** ![AnnMarieW](https://avatars.discourse-cdn.com/v4/letter/a/ec9cab/32.png) [@AnnMarieW](https://community.plotly.com/u/AnnMarieW)\
**Post date:** [January 17, 2023, 2:33pm UTC](https://community.plotly.com/t/dash-datatable-highlight-row-when-cell-is-selected-callback-issues/71673/4 "2023-01-17T14:33:37Z")

</div>

Hi @the.oldest.house

Try putting the style update in it’s own callback:

```auto

@app.callback(    
      Output("datatable-interactivity", "style_data_conditional"),
      Input("datatable-interactivity", "active_cell"),    
)
def render_content(active_cell):
    style = style_data_conditional.copy()
    if active_cell:
      style.append(
        {
          "if": {"row_index": active_cell["row"]},
          "backgroundColor": "rgba(150, 180, 225, 0.2)",
          "border": "1px solid blue",
        },
      )
    return style
    

```

---

<div class="post-metadata">

**Author:** ![the.oldest.house](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/the.oldest.house/32/26148_2.png) [@the.oldest.house](https://community.plotly.com/u/the.oldest.house)\
**Post date:** [January 17, 2023, 6:15pm UTC](https://community.plotly.com/t/dash-datatable-highlight-row-when-cell-is-selected-callback-issues/71673/5 "2023-01-17T18:15:17Z")

</div>

Yeah! That worked! Thanks so much; I didn’t even think to split the callbacks into two… I thought we could only use one callback.

I still see an error in the F12 dev tools console (although nothing seems to actually be broken)

````auto

html
: 
"Attempting to connect a callback Input item to component:\n \"datatable-interactivity\"\nbut no components with that id exist in the layout.\n\nIf you are assigning callbacks to components that are\ngenerated by other callbacks (and therefore not in the\ninitial layout), you can suppress this exception by setting\n`suppress_callback_exceptions=True`.\nThis ID was used in the callback(s) for Output(s):\n datatable-interactivity.style_data_conditional"
message
: 
"ID not found in layout"```

Is this something I can fix or should I suppress the exception as it says?
````

---

<div class="post-metadata">

**Author:** ![AnnMarieW](https://avatars.discourse-cdn.com/v4/letter/a/ec9cab/32.png) [@AnnMarieW](https://community.plotly.com/u/AnnMarieW)\
**Post date:** [January 17, 2023, 6:19pm UTC](https://community.plotly.com/t/dash-datatable-highlight-row-when-cell-is-selected-callback-issues/71673/6 "2023-01-17T18:19:13Z")

</div>

Glad it worked!

Do you include `suppress_callback_exceptions=True` ?

```auto
app= Dash( __name__ , suppress_callback_exceptions=True)

```

---

<div class="post-metadata">

**Author:** ![the.oldest.house](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/the.oldest.house/32/26148_2.png) [@the.oldest.house](https://community.plotly.com/u/the.oldest.house)\
**Post date:** [January 17, 2023, 6:21pm UTC](https://community.plotly.com/t/dash-datatable-highlight-row-when-cell-is-selected-callback-issues/71673/7 "2023-01-17T18:21:07Z")

</div>

No, not at the moment. It seems easy to enough to fix but my worry is that I’m merely hiding a symptom of an error rather than solving it, although in this case I guess it doesn’t make much of a difference?

---

<div class="post-metadata">

**Author:** ![jinnyzor](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jinnyzor/32/21194_2.png) [@jinnyzor](https://community.plotly.com/u/jinnyzor)\
**Post date:** [January 17, 2023, 6:24pm UTC](https://community.plotly.com/t/dash-datatable-highlight-row-when-cell-is-selected-callback-issues/71673/8 "2023-01-17T18:24:58Z")

</div>

If the ID is added via a callback, this is expected behavior. 🙂

Demonstrated by this line:

`If you are assigning callbacks to components that are\ngenerated by other callbacks (and therefore not in the\ninitial layout), you can suppress this exception by setting\n'suppress_callback_exceptions=True'`

---

<div class="post-metadata">

**Author:** ![AnnMarieW](https://avatars.discourse-cdn.com/v4/letter/a/ec9cab/32.png) [@AnnMarieW](https://community.plotly.com/u/AnnMarieW)\
**Post date:** [January 17, 2023, 6:34pm UTC](https://community.plotly.com/t/dash-datatable-highlight-row-when-cell-is-selected-callback-issues/71673/9 "2023-01-17T18:34:18Z")

</div>

Just to tag on to @jinnyzor correct answer, here is some more info from the dash docs: [Callback Gotchas | Dash for Python Documentation | Plotly](https://dash.plotly.com/callback-gotchas#callbacks-require-all-inputs-and-states-to-be-rendered-on-the-page)

---

<div class="post-metadata">

**Author:** ![the.oldest.house](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/the.oldest.house/32/26148_2.png) [@the.oldest.house](https://community.plotly.com/u/the.oldest.house)\
**Post date:** [January 17, 2023, 7:04pm UTC](https://community.plotly.com/t/dash-datatable-highlight-row-when-cell-is-selected-callback-issues/71673/10 "2023-01-17T19:04:23Z")

</div>

Thank you both, that explains it then.  
I’m all set and I’ve learned something new today. I appreciate the help!