How To Implement Scroll Listener In Vaadin 7 Tables

In Vaadin, when you scroll down or up in tables (com.vaadin.ui.Table) there is no event that will be fired to tell you that user is now scrolling.

Why would we need scroll event in table?

Let’s first take a look at this example of Vaadin (Dashboard Demo) after you open the link just click sign in, and you’ll be automatically redirected to the transactions page, this page shows a table of financial transactions, these transactions will show a batch after another while you are scrolling, what actually happened is that the data was loaded on UI initiation (all the transactions).

Now, let’s assume that we have thousands or say millions of transactions. Is it logic to load them all together when the UI is initiated? isn’t it of wisdom to load them bit by bit to prevent slowing down the UI while it waits for all transactions to load?.

The best solution to this problem is to get the first (say 100 transactions) then get more transactions while scrolling down, but this solution have only one problem, that is Vaadin does not support Scroll Event Handling in com.vaadin.ui.Table !! Yes, but that’s only the bad news, the good news is that we have a solution to work this out.

Vaadin Table’s Scrolling Event

The Dashboard Demo (GitHub repo) project actually depends on Vaadin tables as you see in the code in this file in line 53, what we are going to do is to extend com.vaadin.ui.Table and implement our own behavior that will support scrolling Vaadin tables from now on.

First of all, let’s create new simple interface ScrollingTableScrollListener this interface will be responsible for implementing scroll events and its code will look like this:

package com.vaadin.demo.dashboard.scrolling;

public interface ScrollingTableScrollListener {
     public void doTableScroll();

This interface should be implemented whenever you have a table in your view and you want to add a scroll event handler for it. But wait a minute this is not applicable to any kind of tables, this is only applicable to our own table.

Now, let’s create our table, our table’s name is  (ScrollingTable) and it extends (com.vaadin.ui.Table) this class code is:

package com.vaadin.demo.dashboard.scrolling;

import java.util.ArrayList;
import java.util.List;
import java.util.Map;

import com.vaadin.ui.Table;

public class ScrollingTable extends Table {

	private static final long serialVersionUID = 5007124121625961567L;
	List listeners = new ArrayList();

	private void fireSrollEvent() {
		for (ScrollingTableScrollListener listener : listeners) {

	public void addScrollListener(ScrollingTableScrollListener listener) {

	public void changeVariables(Object source, Map variables) {
		super.changeVariables(source, variables);

Actually, this table is the same as Vaadin’s one, but it has the following differences:

  1. It overrides the method changeVariables() of the super class (Vaadin Table : com.vaadin.ui.Table), actually here lays our core business that will initiate the Scrolling Behavior. What we did here is that we invoked the changeVariables() of the super class and then we invoked the fireSrollEvent() method.
  2. Another difference is that it has two more members:
    1. public void addScrollListener(ScrollingTableScrollListener listener) this method will take care of adding new listeners to table’s scrolling event.
    2. private void fireSrollEvent() this method is the one that will be invoked by changeVariables() method and will invoke the method doTableScroll() on every registered listener that this table has added by invoking the method addScrollListener().

Now to make use of the new stuff that we have added, we will change the original code of the aforementioned Dashboard demo (specifically the file In this file there are only few lines to add and modify.

First, we will modify the line 49 by adding new interface that this class will implement, which is our new interface (ScrollingTableScrollListener) and implement its single method by adding the following lines in the end of this class:

public void doTableScroll() {
	// TODO Auto-generated method stub"You are scrolling!\nYou can add your own behavior here!");

Then, we will change both lines 53 and 66 to use the new inherited class (ScrollingTable) rather than the super class (Table):

//Line 53 in the original class
Table t;
//Line 55 in our class
ScrollingTable t;
//line 66 in the original class
t = new Table() {
//line 68 in our class
t = new ScrollingTable() {

Finally, we should add the listener to our ScrollingTable’s scrolls 🙂 , this is done by invoking the method addScrollListener on the table (t) after defining the table (line 89 of our new class):


this line means that this class (TransactionView) is listening on the ScrollingTable (t) scroll event, and it will invoke the method doTableScroll whenever the user scrolls down/up the ScrollingTable (t).

Here you go, you have now a table that will tell you whenever the user is scrolling, your task now is to do what you want when the table fires scrolling event and put your stuff between the curly brackets {} of the method that we defined in the first step:

public void doTableScroll() {
      // Put your own code here ...

Here is the link of the new Dashboard on GitHub.

Thanks for reading 🙂

7 Replies to “How To Implement Scroll Listener In Vaadin 7 Tables”

  1. Vaadin Table has already lazy loading built in and is enabled in the demo, so there is no need to reimplement this feature. As a second point, that scroll event will be fired on any event that is communicated back from Table’s client side.

    1. Hi Johan,

      Thanks for the comment, I am glad that you Vaadin guys are reading this 😀

      Maybe you are talking about a newer demo, but when I wrote the post this was not implemented. However, the idea is not lazy loading (I mean I put the wrong example), it is more about implementing scroll listener, which is still not implemented in Vaadin up to this moment I think 🙂

      Still you are right ! This listener is catching any event that changes variables (i.e. changes on Client side: Clicks, and Scrolls). Actually I was writing something new to catch only scroll event, but I started long tie ago and never finished, because recently I was working very long hours.

      1. Ahmed
        I want to use your code to load only about 20 rows from a resultset and load next 20 on a scroll event because I do not want to provide the table a container data source and my table may be very large. However as Johan says the event fired and trapped is any event, not scroll event, and in fact excludes a scroll click. Can you please advise a modification to your code.
        Clarence Smithson

      2. Hi Ahmad, thanks for your post. I am involved in a similar development and I wonder if you finished it.

        Thanks in advance for your response!!
        Carmen Calle

        1. Hi Carmen,

          Thank you for getting in touch,

          This is actually too old now, but if you want we can discuss further via email to see if I can help you in what you are doing

          Have a great day 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *