Hi javafx folks,

Today I will show how to make your multi table view bind with a single ScrollBar. JavaFX is becoming more and more powerful and nowadays people are using this javafx for comaparing the data between tables and it’s pretty much helpful for scrolling the tables with a single Scrollbar.

To make this things happen ; Firstly I have dived to check if there is any api for making scroll binding in both tables but I didn’t find them. I then went to see if there is any manual scroll of the tableview finally i found them scrollTo(int) which is really helpful for the programmer to scroll the tableview manually.

Lets first see how we are going to make this happen.

Table Vertical Scrolling Binding

 

As you can see in the above picture I’ve stated how to make two tableview vertical Scroll bind with a single External ScrollBar.

Firstly You need to hide your vertical scrollbar.  Please add styleclass “mytableview” for both of the table view to make this css to take effect.

 

Hiding Vertical Scrollbar of TableView from CSS

/* The main scrollbar **track** CSS class  */

.mytableview .scroll-bar:vertical .track{
        -fx-padding:0px;
	-fx-background-color:transparent;
	-fx-border-color:transparent;
	-fx-background-radius: 0em;
	-fx-border-radius:2em;

}

/* The increment and decrement button CSS class of scrollbar */

.mytableview .scroll-bar:vertical .increment-button ,
.mytableview .scroll-bar:vertical .decrement-button {

    -fx-background-color:transparent;
	-fx-background-radius: 0em;
	-fx-padding:0 0 0 0;
}

.mytableview  .scroll-bar:vertical .increment-arrow,
.mytableview  .scroll-bar:vertical  .decrement-arrow
{
	-fx-shape: " ";	
	-fx-padding:0;        
}

/* The main scrollbar **thumb** CSS class which we drag every time (movable) */
.mytableview .scroll-bar:vertical .thumb {
    -fx-background-color:transparent;
	-fx-background-insets: 0, 0, 0;
	-fx-background-radius: 2em;
    -fx-padding:0px;

}

As I’ve already stated here i’ve used “mytableview” class which is the TableView class.

Now Just create Two TableView and one ScrollBar Let’s suppose “table1″, “table2″ and “scroller”.
Let’s see how it works

Scroll TableView with ScrollBar value

scroll.setMax(100); //make sure the max is equal to the size of the table row data.
scroll.setMin(0); 
scroll.valueProperty().addListener(new ChangeListener(){

	@Override
	public void changed(ObservableValue ov, Number t, Number t1) {
		//Scroll your tableview according to the table row index
		table1.scrollTo(t1.intValue()); 
		table2.scrollTo(t1.intValue());
	}

});

Now you have sucessfully made multi-tableview scroll from a single ScrollBar.

Only this much for today.
Have a :) good day. Keep on coding with technique.

 
 

Demo