[BUG] DataTable Failed to execute 'querySelector' on 'Element' - Line break in column id

[celia-lm]

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