GWT filler rows in a CellTable

Question

I currently have a CellTable which I expanded with a filter/paging/sorting. I am working on adding more features too.

One things that bugs me though, is when you set the limit for a page to be for example 10. If an object doesn't have 10 rows and only has 5 and you switch between them then the table will jump up and down if positioned in the center.

Is there an elegant way, that when the pageSize is set to 10, then if there are less than 10 rows in a table, empty rows will be added?

The ways I have tried so far effect my filtering/sorting/paging, which I do not want.

EDIT 1:

final AsyncDataProvider<Row> provider = new AsyncDataProvider<Row>() {

      @Override
      protected void onRangeChanged(HasData<Row> display) {

        int start = display.getVisibleRange().getStart();
        int end = start + display.getVisibleRange().getLength();
        end = end >= rows.getFilterList().size() ? rows.getFilterList().size() : end;
        List<Row> sub = rows.getFilterList().subList(start, end);
        System.out.println("Checking if extra rows needed: " +
                                           table.getVisibleItems().size());

               for(int i = table.getVisibleItems().size(); i<10; i++){
                     System.out.println("ADDED EMPTY ROW");
                     sub.add(new Row());
               }

         updateRowData(start, sub);
     }
};

Answer 1

I had the same problem. I solved it by adding null rows. Basically, you need to override onRangeChange(HasData<T> display) in your DataProvider to add null to the list representing the range asked for. You add enough null to fill the range you want.

@Override
protected void onRangeChanged(HasData<T> display){

    Range range = display.getVisibleRange();

    List<T> listOfObjects = getRange(range);

    for(int i=listOfObject.size(); i<range.getLength(); i++){
        listOfObjects.add(null);
    }

    updateRowData(range.getStart(), listofObjects);

}

In the above code getRange() returns a list containing the objects that are requested (within the range)

You'll also have to add some CSS to give a height to rows. If you don't specify the height then the rows will be very small so they won't pad the whole table.

It's disappointing that GWT doesn't have support for this type of padding. This way was the best one that I found but unfortunately when your row heights differ within a table it makes everything harder.

Paging

With the solution above you'll need to have a custom Pager if you want paging. You can extend your AsyncDataProvider with method like getVisibleRowCount() this will return how many objects in the current sublist are actually real data (not null). Then you can give a reference of the AsyncDataProvider to the Pager and override the createText() method:

@Override
protected String createText(){

    return getPageStart() + " - " + dataProvider.getVisibileRowCount() + " of "
                 + dataProvider.getTotalRowCount(); 

}