Multiple dash tables selection error

Hi,

I have two dash tables in the same layout. Based on the rows selected in each of the rows in dash table, the data is collected and used as user input. However, with the two dash tables in the same layout, it is allowing only a single selection from both the tables.
For ex, Instead of selecting row 1 from Table A & row 2 from Table B, I am able to select row 1 from Table A & Table B or row 2 from Table A & Table B.

Here is the sample code of layout-

html.Div(id="Planned_file", className="planned_file",
                                       children=[html.H4("Planned File(s) ",style={'display':'inline'}),
                                                 html.A("Planned Quantity Sample",
                                                 href="/download/{}".format(urlquote(pq_path))),
                                                 html.Div(id="file-list",
                                                          children=[dash_table.DataTable(
                                                              id="files-table",
                                                              columns=[
                                                                {"name": i, "id": i} for i in dp.files_df.columns
                                                              ],
                                                              fixed_rows={'headers': True, 'data': 0},
                                                              data=dp.files_df.to_dict("records"),
                                                              hidden_columns=['Link'],
                                                              row_selectable="single",
                                                              sort_action="native",
                                                              page_action="native",
                                                              page_current=0,
                                                              page_size=10,
                                                              css=[{"selector": ".show-hide",
                                                                    "rule": "display: none"}],
                                                              style_cell={'width': '150px', 'font-size': '120%',
                                                                          'font-family': 'Times'},
                                                              style_header={'font-weight': 'bold',
                                                                            'text-align': 'center'},

                                                          ),
                                                              dcc.Upload(
                                                                  id='upload-data',
                                                                  children=html.Div([
                                                                      html.Button(['Upload Planned Quantity'],
                                                                                  className="button-primary")
                                                                  ]),
                                                                  # Allow multiple files to be uploaded
                                                                  multiple=True
                                                              )]
                                                          )
                                                 ]),

                              html.Div(["Area File"], className="form_label"),
                              html.H3("Area File History"),
                              html.Div(id="area-files-div",
                               children=[dash_table.DataTable(
                                   id="area-table",
                                   columns=
                                   [{"name": i, "id": "area_{}".format(i)} for i in dp.area_files.columns],
                                   fixed_rows={'headers': True, 'data': 0},
                                   data=dp.area_files.to_dict("records"),
                                   hidden_columns=['Link'],
                                   row_selectable="single",
                                   sort_action="native",
                                   page_action="native",
                                   page_current=0,
                                   page_size=10,
                                   css=[{"selector": ".show-hide",
                                         "rule": "display: none"}]
                               ),
                              dcc.Upload(
                                  id='upload-data-area',
                                  children=html.Div([
                                      html.Button(["Upload Area"],
                                                  className="button-primary")
                                  ]),
                                  # Allow multiple files to be uploaded
                                  multiple=True
                              )
                              ])

Can you please check and let me know the solution for this problem?

Confirmed, that’s a bug. Thanks for the report!

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

Thanks for the update.

Fixed in https://github.com/plotly/dash-table/pull/594 - will be included in the next release. Thanks again for the report!