Tabulator scrolling to top all the time

Wijnko · May 23, 2023, 3:28pm

I have a question on the Tabulator model in panel. I have created a Bug issue some time ago (Tabulator scrolls to top when other element on the page changes · Issue #4451 · holoviz/panel · GitHub), about the Table scrolling to the top all the time when something on the page is updated. I think this is solved in Panel 1.0, I assume by the DOM Shadow roots isolation somehow.

I do however still have the issue of scrolling to Row 0 after setting or patching the data. Looking into the source code, I found that on every patch, the element.scrollTop is set to this._lastVerticalScrollbarTopPosition. However, as far as I can see, this variable is initialised to 0, but never set to any other value. As such the scroll position is manually set to 0 on every patch.

github.com

holoviz/panel/blob/main/panel/models/tabulator.ts#L352

      
        
                  this.setPage()
              })
              this.connect(p.max_page.change, () => this.setMaxPage())
              this.connect(p.frozen_rows.change, () => this.setFrozen())
              this.connect(p.sorters.change, () => this.setSorters())
              this.connect(this.model.source.properties.data.change, () => this.setData())
              this.connect(this.model.source.streaming, () => this.addData())
              this.connect(this.model.source.patching, () => {
                const inds = this.model.source.selected.indices
                this.updateOrAddData();
                this.tabulator.rowManager.element.scrollTop = this._lastVerticalScrollbarTopPosition;
                // Restore indices since updating data may have reset checkbox column
                this.model.source.selected.indices = inds;
              })
              this.connect(this.model.source.selected.change, () => this.setSelection())
              this.connect(this.model.source.selected.properties.indices.change, () => this.setSelection())
            }
            
            
get groupBy(): boolean | ((data: any) => string) {
              const groupby = (data: any) => {
                const groups = []

Did I perhaps miss the point where the _lastVerticalScrollbarTopPosition is set, or is there a valid reason to always have the scroll position set it to 0?

I am not sure if the javascript tabulator object can patch without scroll position effects. In my usecase I patch a cell onclick, and ideally the cell would not move on patch. Could removing this scrollpos line perhaps achieve that?

Thanks and regards,
Wijnko

Wijnko · May 24, 2023, 8:45am

I have found a commit where the last line setting the _lastVerticalScrollbarTopPosition variable was deleted. Was the code still using this variable perhaps forgotten here? (@maximlt )

rsdenijs · August 24, 2023, 10:38am

Im experiencing the same issue, did you ever find a fix @Wijnko ?

rsdenijs · October 10, 2023, 4:50pm

Does anyone know a fix to this? Maybe @maximlt ?

rsdenijs · October 12, 2023, 7:23am

github.com/holoviz/panel

Tabulator with remote pagination scrolls page to the top on patching

opened 07:21AM - 11 Oct 23 UTC

rsdenijs

#### ALL software version info panel==1.2.3 #### Description of expected beh…avior and the observed behavior When a Tabulator object is patched, it will scroll the page, presumably here https://github.com/holoviz/panel/blob/main/panel/models/tabulator.ts#L360 This is disruptive when the table is not at the top of the page, since e.g. sorting interactions will cause a jump in the page position. #### Complete, minimal, self-contained example code that reproduces the issue Run this app, scroll down to center on the table, then sort any column. ``` import panel as pn import pandas as pd import numpy as np frame = pd.DataFrame(np.random.randn(100,10)) table = pn.widgets.Tabulator(value=frame, pagination='remote', page_size=10) filler = pn.Column("filler", height=800) pn.Column(filler, table).servable() ``` #### Stack traceback and/or browser JavaScript console output #### Screenshots or screencasts of the bug in action ![bug](https://github.com/holoviz/panel/assets/3237939/78bdd470-c6ec-4755-bd16-8659d76a50de)

Wijnko · November 8, 2023, 1:04pm

Hi @rsdenijs , I did find a fix in changing the two lines in the code as described here:
Tabulator Patch always resets scroll position · Issue #5000 · holoviz/panel · GitHub (unfortunately the lines referenced don’t match to the current source code anymore)

But this fix has not been implemented yet, although it is planned in the milestone for the next release for a long time. For my project I currently use a custom local version of the panel package, with these two lines changed such that I can use it with this bug removed.

BR

rsdenijs · November 8, 2023, 1:24pm

Thanks @Wijnko . I tried going the same route but then it turned out it gets fixed if you set the height of the table, directly or indirectly, the problem is fixed. I commented on the ticket.

Wijnko · November 8, 2023, 2:52pm

Ok, then your issue was really something else. My issue is without pagination.