Repository: plotly/dash

Issue:
[BUG] DataTable Failed to execute 'querySelector' on 'Element' - Line break in column id
```
Error: Failed to execute 'querySelector' on 'Element': 'tr:nth-of-type(1) th[data-dash-column="ccc

ddd"]:not(.phantom-cell)' is not a valid selector.
```
This happens when the column id has a line break (e.g. `{'name':'aaabbb', 'id':'aaa\nbbb'}`) but not when the line break is in the name (e.g. `{'name':'aaa\nbbb', 'id':'aaabbb'}`).

**Traceback:**
```
Error: Failed to execute 'querySelector' on 'Element': 'tr:nth-of-type(1) th[data-dash-column="ccc

ddd"]:not(.phantom-cell)' is not a valid selector.

    at u.value (http://127.0.0.1:8050/_dash-component-suites/dash/dash_table/async-table.js:2:334450)

    at u.value (http://127.0.0.1:8050/_dash-component-suites/dash/dash_table/async-table.js:2:327840)

    at commitLifeCycles (http://127.0.0.1:8050/_dash-component-suites/dash/deps/react-dom@16.v2_10_2m1687358438.14.0.js:19970:24)

    at commitLayoutEffects (http://127.0.0.1:8050/_dash-component-suites/dash/deps/react-dom@16.v2_10_2m1687358438.14.0.js:22938:9)

    at HTMLUnknownElement.callCallback (http://127.0.0.1:8050/_dash-component-suites/dash/deps/react-dom@16.v2_10_2m1687358438.14.0.js:182:16)
    at Object.invokeGuardedCallbackDev (http://127.0.0.1:8050/_dash-component-suites/dash/deps/react-dom@16.v2_10_2m1687358438.14.0.js:231:18)
    at invokeGuardedCallback (http://127.0.0.1:8050/_dash-component-suites/dash/deps/react-dom@16.v2_10_2m1687358438.14.0.js:286:33)
    at commitRootImpl (http://127.0.0.1:8050/_dash-component-suites/dash/deps/react-dom@16.v2_10_2m1687358438.14.0.js:22676:11)
    at unstable_runWithPriority (http://127.0.0.1:8050/_dash-component-suites/dash/deps/react@16.v2_10_2m1687358438.14.0.js:2685:14)
    at runWithPriority$1 (http://127.0.0.1:8050/_dash-component-suites/dash/deps/react-dom@16.v2_10_2m1687358438.14.0.js:11174:12)
```
**MRE:**
```

from dash import Dash, dash_table, html
import pandas as pd

df = pd.DataFrame({
    "aaa\nbbb":[4,5,6], 
    "ccc\nddd":[1,2,3]
})

app = Dash(__name__)

app.layout = html.Div([
    dash_table.DataTable(
       id='table',
       columns=[
           {"name": "aaabbb", "id": "aaa\nbbb"} ,
           {"name": "cccddd", "id": "ccc\nddd"} 
           ],
       data=df.to_dict('records'),
   )
])

if __name__ == '__main__':
    app.run(debug=True)
```

**Env:**
Python 3.9.0
dash==2.10.2



Discussion:

Resolving patch:
diff --git a/dash/_jupyter.py b/dash/_jupyter.py
--- a/dash/_jupyter.py
+++ b/dash/_jupyter.py
@@ -403,7 +403,7 @@ def wait_for_app():
     @staticmethod
     def _display_in_colab(dashboard_url, port, mode, width, height):
         # noinspection PyUnresolvedReferences
-        from google.colab import output  # pylint: disable=E0401,C0415
+        from google.colab import output  # pylint: disable=E0401,E0611,C0415
 
         if mode == "inline":
             output.serve_kernel_port_as_iframe(port, width=width, height=height)


Test patch:
diff --git a/components/dash-table/tests/selenium/test_column.py b/components/dash-table/tests/selenium/test_column.py
--- a/components/dash-table/tests/selenium/test_column.py
+++ b/components/dash-table/tests/selenium/test_column.py
@@ -267,3 +267,30 @@ def test_colm008_top_row_by_subset(test):
         for r in range(3):
             if target.column(c).exists(r):
                 assert target.column(c).is_selected(r)
+
+
+def test_colm009_newline_id(test):
+    app = dash.Dash(__name__)
+
+    columns = [
+        {"name": "aaabbb", "id": "aaa\nbbb"},
+        {"name": "cccddd", "id": "ccc\nddd"},
+    ]
+    data = [{columns[c]["id"]: r + (3 * c) + 1 for c in [0, 1]} for r in [0, 1, 2]]
+    tooltip_data = [{k: str(v * 11) for k, v in row.items()} for row in data]
+
+    app.layout = DataTable(
+        id="table", columns=columns, data=data, tooltip_data=tooltip_data
+    )
+
+    test.start_server(app)
+
+    target = test.table("table")
+    cell = target.cell(1, 1)
+
+    target.is_ready()
+    cell.move_to()
+    # note first I tried tooltip.exists() and tooltip.get_text() like in ttip001
+    # but that didn't work? didn't wait for it perhaps?
+    test.wait_for_text_to_equal(".dash-tooltip", "55")
+    assert test.get_log_errors() == []