SAPUI5 filter table performance

1
votes

I have a table with 3 columns holding at most 6000 elements. Above that table I have a SearchField. When something is typed into the SearchField, the table is filtered by 2 of the 3 columns (using liveChange) like this:

var oTable = this.getView().byId("idMyTable");
var oBinding = oTable.getBinding("items");
oBinding.filter(new sap.ui.model.Filter([
                    new sap.ui.model.Filter("col1", sap.ui.model.FilterOperator.Contains, sInput),
                    new sap.ui.model.Filter("col2", sap.ui.model.FilterOperator.Contains, sInput),

                ], false), "Application");

While this solutions works, it needs almost 5 seconds to complete (for only 6000 elements in the table) and another bit of time until the data in the table is displayed again.

When the table is being filled, its size limit is set to the length of data which is in the model:

// rs0 is the result set of the db query which contains the data
tableModel.setSizeLimit(tableModel.getData().rs0.length);

When I omit the call for setSizeLimit the search is quiet fast but I can't scroll through all items in the table (not everything is displayed).

My questions is: How can I display all values in the table and keep a good search performance at the same time?

Thanks in advance!

2
sapui5

2 Answers

1
votes

By default, I think that the sizeLimit is set to 100 and the default growing of a table/list is 20 (it means that it will only display 20 elements until the user scroll down and it will load another chunk of 20 elements).

This is the default behavior because otherwise, you get that kind of lag issue.

I don't know if there's a way to improve this behavior but at the moment this is the best solution possible.

What you can do is to open a specific issue on OpenUI5 GitHub project and ask for advice.

0
votes

I finally found a solution for my problem. Instead of using setSizeLimit on the model, I'm now using the grow property on the table itself. This allows my table to load data time by time when the user scrolls down. Thus my table declaration now looks like this:

<Table [...] visibleRowCountMode="Fixed" visibleRowCount="8" growing="true" 
    growingScrollToLoad="true" growingThreshold="100" threshold="100" >

The grow property is described here:

https://sapui5.netweaver.ondemand.com/1.30.7/docs/guide/9164ba7047b74a25a19baf9c5bb986ae.html

An excerpt (if the link dies):

growing: Boolean to set the growing feature to on or off
growingScrollToLoad: If you want to allow more data to be fetched when the user scrolls down to the end of the current items, set this boolean property to true; otherwise a trigger button must be used
growingThreshold: The number of items that are requested each time from the model
growingTriggerText: The text on a trigger button used to cause a request for more data