Horizontal Scroll Position Lost on Header Filter, Header Sort or Pagination Changes (only with Remote Pagination, Filter & Sort)

[Anton-Plagemann]

Describe the bug
Reopening #3450 as a new issue because the old one has been closed with a partial fix only.
The issue: The horizontal scrolling position gets lost when using header filters, header sorting, changing page size or changing page AND remote pagination/filtering/sorting is enabled. Additional details can be found in #3450.

Tabulator Info

• v6.2.1

Working Example
Could not provide a working example with jsfiddle because a server is needed for remote pagination/sorting/filtering.

To Reproduce

1. Create a table with remote pagination, filtering & sorting, e.g.

new Tabulator(tableHTMLElement, {
  pagination: true,
  paginationMode: "remote",
  filterMode: "remote",
  sortMode: "remote",
  ajaxURL: `https://example.com/getTableData`,
  columns: [
    {
      title: "Some column (repeat until a horizontal scrollbar appears)",
      field: "someRemoteField",
      headerFilter: "input",
    },
  ],
});

3. Scroll to the right of the table.
4. Click on a column header (sorting), enter a value into the header filter input, or switch to page 2.
5. See the horizontal scrolling position reset to the most left position.

Expected behavior
The scroll position should not reset.

Desktop:

• OS: Windows 11
• Browser: Microsoft Edge (Chromium)
• Version: 124.0.2478.80

Additional Info
I want to express my appreciation for the Tabulator package and the continuous efforts to improve it. The functionality it provides has been instrumental in developing complex but intuitive interfaces. Thank you for your dedication and hard work on maintaining such a valuable tool ❤️

[Anton-Plagemann]

I noticed, that this behaviour (horizontal scroll bar reset) seems to be fixed with the following four small modifications:

Original:

tabulator/src/js/core/CoreFeature.js

Lines 11 to 13 in 7333c33

	reloadData(data, silent, columnsChanged){
	return this.table.dataLoader.load(data, undefined, undefined, undefined, silent, columnsChanged);
	}

Changed:

// Added replace argument
reloadData(data, silent, columnsChanged, replace = false) {
	return this.table.dataLoader.load(data, undefined, undefined, replace, silent, columnsChanged);
}

Original:

tabulator/src/js/modules/Sort/Sort.js

Lines 234 to 244 in 7333c33

	refreshSort(){
	if(this.table.options.sortMode === "remote"){
	this.reloadData(null, false, false);
	}else{
	this.refreshData(true);
	}
	//TODO - Persist left position of row manager
	// left = this.scrollLeft;
	// this.scrollHorizontal(left);
	}

Changed

refreshSort(){
	if(this.table.options.sortMode === "remote"){
		this.reloadData(null, false, false, true);  // Added last argument
	}else{
		this.refreshData(true);
	}
	
	//TODO - Persist left position of row manager
	// left = this.scrollLeft;
	// this.scrollHorizontal(left);
}

Original:

tabulator/src/js/modules/Filter/Filter.js

Lines 571 to 583 in 7333c33

	refreshFilter(){
	if(this.tableInitialized){
	if(this.table.options.filterMode === "remote"){
	this.reloadData(null, false, false);
	}else{
	this.refreshData(true);
	}
	}
	//TODO - Persist left position of row manager
	// left = this.scrollLeft;
	// this.scrollHorizontal(left);
	}

Changed:

refreshFilter(){
	if(this.tableInitialized){
		if(this.table.options.filterMode === "remote"){
			this.reloadData(null, false, false, true); // Added last argument
		}else{
			this.refreshData(true);
		}
	}

	//TODO - Persist left position of row manager
	// left = this.scrollLeft;
	// this.scrollHorizontal(left);
}

Original:

tabulator/src/js/modules/Page/Page.js

Lines 773 to 802 in 7333c33

	trigger(){
	var left;
	switch(this.mode){
	case "local":
	left = this.table.rowManager.scrollLeft;
	this.refreshData();
	this.table.rowManager.scrollHorizontal(left);
	this.dispatchExternal("pageLoaded", this.getPage());
	return Promise.resolve();
	case "remote":
	this.dataChanging = true;
	return this.reloadData(null)
	.finally(() => {
	this.dataChanging = false;
	});
	case "progressive_load":
	case "progressive_scroll":
	return this.reloadData(null, true);
	default:
	console.warn("Pagination Error - no such pagination mode:", this.mode);
	return Promise.reject();
	}
	}

Changed:

case "remote":
	this.dataChanging = true;
	return this.reloadData(null, undefined, undefined, true)  // Added the last three arguments
		.finally(() => {
			this.dataChanging = false;
		});

I do however not know if these changes would break something else.
@olifolkerd: If you think those changes would be ok, I would be happy to submit a PR 😊