row/column selectable single applies to all tables on the page

[alexcjohnson]

Make 2 tables with row or column selectable=single - you can only select one row and one column on the page, should be one per table.

reported in https://community.plot.ly/t/multiple-dash-tables-selection-error/28802

import dash
import dash_html_components as html
import dash_table

keys = ['a', 'b', 'c']
data = [{'a': 'a', 'b': 'b', 'c': 'c'}, {'a': 'aa', 'b': 'bb', 'c': 'cc'}]

app = dash.Dash(__name__)
app.layout = html.Div([
    dash_table.DataTable(
        id='a',
        columns=[{"name": i, "id": i, "selectable": True} for i in keys],
        data=data,
        column_selectable='single',
        row_selectable='single'
    ),
    dash_table.DataTable(
        id='b',
        columns=[{"name": i, "id": i, "selectable": True} for i in keys],
        data=data,
        column_selectable='single',
        row_selectable='single'
    )
])

if __name__ == '__main__':
    app.run_server(debug=True)

[alexcjohnson]

update: the selection props are still correct, it just doesn't display them both as selected on the page.

[alexcjohnson]

looks like we just need name attributes more unique than row-select and column-header--select - add in the table ID? Should suffice, assuming no-one would ever make selectable tables without callbacks to force them to make unique IDs.

[Marc-Andre-Rivet]

Callback or not, the table already generates an id for itself for self-generated styles isolation in a DOM's stylesheet.
https://github.com/plotly/dash-table/blob/dev/src/dash-table/dash/DataTable.js#L26

So we can safely use id in addition to the base name.