Clicking on Any other tab causes a jump - dash table

Dash Python
1

As soon as I click on Any other tab it leads to a jump to one specific tab/page.

I have checked the ids they are all unique, what else can it possibly be ?

  1. It is the only page with a datatable.
  2. The same error occurs on different browsers.
  3. There is no error message

Some further analysis shows it is the datatable:
As soon as I click the checkbox on the top left corner then the jump stops. No other table interaction allows the jump to stop apart from that selection.

38%20AM
Screen Shot 2018-01-26 at 7.04.38 AM.png1620×1018 79 KB

I have also tried removing all extra options with simply:
dt.DataTable(
rows=[{}],
# optional - sets the order of columns
id=‘datatable’
),

It produces the same error as:

dt.DataTable(
    rows=[{}],
    row_selectable=True,
    filterable=True,
    sortable=True,
    # optional - sets the order of columns
    selected_row_indices=[],
    id='datatable'
),

I guess a solution can be to select that checkbox on load ?

Jan-26-2018%2006-36-57

2

Yeah, I’ve noticed this before when adding multiple tables in the same app. Definitely a bug, I’m not sure what the workaround is at this point or how hard a fix would be. I would definitely accept a pull request that fixes this. The issue is likely in underlying component here: GitHub - adazzle/react-data-grid: Feature-rich and customizable data grid React component

That’s a good idea - you should be able to highlight the rows at start by setting selected_row_indices=[0].

3

Yea, I don’t think it would be too hard to solve. Hopefully someone can have a look at it, I still have to become acquainted with react :roll_eyes:. Thanks for the quick response.

1 Like
4

Actually, it’s a issue on dash table. Checkout https://github.com/plotly/dash-table-experiments/issues/8