Binding two tableviews together such that they scroll in sync

Question

I want to bind two tableviews together such that they scroll in sync. How do I do that? I am unable to find out how to access the scrollbar of a tableview.

Answer 1

I've made a CSS hack to bind a Tableview with an external scrollbar. One scrollbar controls both tableviews.

An overview of my idea:

• Create two tableviews
• Make one Vertical scrollbar. Let's call it myScrollbar in this example
• Set the min and max of myScrollbar to size of min=0, max=TableView.Items.size()
• When the value of myScrollbar changes then call both tableview's scrollTo(int) function
• Disable the native vertical scrollbar of the tableview implemented with CSS.

This will give you two tables, both controlled by one external scrollbar (myScrollbar).

Here is the code to hide the scrollbar of a tableview using 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;

}

Then we need to set how to scroll the tableview by using the scrollbar.

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());
    }

});

http://blog.ngopal.com.np/2012/09/25/how-to-bind-vertical-scroll-in-multi-tableview/