dataTree scrolls to top when expanding/collapsing rows

[Nyut0n]

Hi Oli,

Describe the bug If a table has dataTree enabled and no height set, the browser scrolls to the top of the table each time a expand/collapse icon is clicked.

Tabulator Info

• Latest 4.2.1
• For constructor please check jsfiddle

To Reproduce Steps to reproduce the behavior:

1. Go to https://jsfiddle.net/n0hg7f1r/
2. Scroll down to last row
3. Click expand

Expected behavior I would expect Tabulator to maintain the scroll position.

Desktop (please complete the following information):

• OS: Windows 10
• Google Chrome
• Version 72

Additional context

• it does not happen if the table has height set

[olifolkerd]

Hey @Nyut0n

That is because you dont have a height set on your table so the virtual DOM is disabled, so Tabulator has no way to redraw the table in place when the row is expanded.

I will look at adding a less aggressive redraw for the child rows in classic render mode in the 4.3 release, but i would suggest using the virtual DOM when handling child rows as it will make it a much smoother experience.

Cheers

Oli :)

[MatthewAry]

This is a pretty significant usability issue. I look forward to 4.3.

[britvik]

@olifolkerd I guess this did not get into 4.3 since I'm having the same issue :(. Any chance it will be fixed in the next release? Or could you recommend a workaround?

I'm using height: 'auto' because fixed height with scroll is unusable in IE11 (scrolling lags), Therefore I switched to pagination which works well, but it's weird in combination with tree structure, because expanded rows can be on the next page.

[olifolkerd]

Hey @britvik

I had to trim down the 4.3 release but it should be coming soon.

Cheers

Oli :)

[wspek]

@olifolkerd - This same behaviour happens when groups are collapsed and no table height is set. You reckon your fix for the dataTree will cover group collapsing as well?

[britvik]

@olifolkerd Hey Oli :), when could we expect this fix? Was hoping this would be part of 4.5 but the issue still remains.

[olifolkerd]

This got delayed because I'm working on a new way of rendering the table in classic mode that should hopefully iron out a lot of these issues in one go.

I'm hoping to get this in for the 4.6 release in the new year.

Cheers

Oli

[britvik]

I'm very glad to hear that, looking forward to the new classic mode. Love the tabulator btw, good job :).

[olifolkerd]

I have pushed an update to the 4.6 branch that keeps the virtual DOM operational even when there is no height set, so this shouldnt be an issue in future.

Version 4.6 will be released in a few weeks.

Cheers

Oli :)

[britvik]

@olifolkerd Hey Oli, sorry to bother you, but when could we expect version 4.6? Really need this fix. It's annoying when page gets scrolled to top on every group expand or even when adding a row :(.

[olifolkerd]

Hey.

Sorry for the delay on the 4.6 release. I've had a full on couple of weeks at work.

I will definitely have it out by the end of this month at the latest.

Cheers

Oli

[clalil]

Hi Oli,

thank you for your amazing Tabulator. I am currently having a similar (?) issue where we have a lot of data inside of a table with nested data _children. The issues can be described as:

• Parent is opened (no issues)
  • Nested child #1 is opened (no issue) ...several children later:
  • 6th child closed
  • 7th child is opened (no issue)

All of the children contains rows and rows of data. If I click on the 6th child, which is closed, the view will scroll by itself to the nearest parent of both of these children when using virtualDOM enabled with height "100%" - leaving the user to believe that the child was never loaded/opened at all (which it is, if you scroll down and find the data again).

Not sure if I explained myself enough, but the code is:

    var table = new Tabulator("#example-table", {
      virtualDom: true,
      virtualDomBuffer:250,
      height:"100%",
      resizableColumns: false,
      dataTree:true,
      dataTreeStartExpanded:[false, false],

My question is: is there a way to prevent the virtualDOM from scolling to the parent of both children when loading the data - and just stay where it is? The only solution I've found is to restrict the height of the tabulator to a specific amount of pixels, however, that is not desirable in this case as the view becomes quite small for all of the amount of data to scroll through.

---

While I am at it... Another issue we have is when we use replaceData() to update the Tabulator where the user can pick different dates i.e. the incoming data is new each time a user picks a new date. This makes the Tabulator re-render with all children closed up again, only parents visible. Is there a way to make it re-instate/stay on the current visible row rather than following the original [false, false] start-up setup on re-renders? I.e. first time, use [false, false], second time use X row which is visible? I found a solution I tried with calling a function on the dataTreeStart, but it just ends with it rendering all of the rows open and not selecting a specific one - as well as always rendering all rows, even on initial start...

I found a similar entry: https://github.com/olifolkerd/tabulator/issues/161 However, it did not work out and the selectedRows become "undefined" when used before the re-initiation of the tabulator.

Is there something I'm missing that I could use to solve both of these issues? :) If needed, I can provide more details of the code.

Wish you all the best!

[MentalGear]

The scroll position jump on expand still persists on v. 5. I'm wondering if we couldn't just save the scroll position on expand click, and after a short timeout, set back the scroll position to where it was before the expand. Maybe that would be an idea?

[lekoala]

I also get the scroll to top issue due to all rows being redrawn. a quick fix if you can't wait for a proper solution is to set a min height in expand/collapse . not great, but does the job :)

see example

expandRow(row, silent) {
        var config = row.modules.dataTree;

        if (config.children !== false) {
            config.open = true;

            // prevent redraw due to size change
            row.table.element.style.minHeight =
                row.table.element.offsetHeight + "px";

            row.reinitialize();

            this.refreshData(true);

            this.dispatchExternal(
                "dataTreeRowExpanded",
                row.getComponent(),
                row.modules.dataTree.index
            );
        }
    }

    collapseRow(row) {
        var config = row.modules.dataTree;

        if (config.children !== false) {
            config.open = false;

            // prevent redraw due to size change
            row.table.element.style.minHeight =
                row.table.element.offsetHeight + "px";

            row.reinitialize();

            this.refreshData(true);

            this.dispatchExternal(
                "dataTreeRowCollapsed",
                row.getComponent(),
                row.modules.dataTree.index
            );

            // adjust to collapsed size
            row.table.element.style.minHeight =
                row.table.element.querySelector(".tabulator-tableholder")
                    .offsetHeight + "px";
        }
    }