How can I add a search bar that searches the results of a grid?

Grid is of an api response. Only example I found was with interfaces and CRUD… Not sure how I can search against the api response and find result in the grid

I’ve figured this out by using vaadin application creator at

What I am running into an issue now is after implementing my own data, I am getting a IllegalStateException error.
java.lang.IllegalStateException: The number of items returned by the data provider exceeds the limit specified by the query (50).

I can’t find where that limit is set.

grid.setItems(query -> serialService.getSerial(
                PageRequest.of(query.getPage(), query.getLimit(), VaadinSpringDataHelpers.toSpringDataSort(query)),

Sounds like a limit to how much data can be returned by the api?

In postman I can get a response with all data created. About 80k lines in response

The grid pages data transparently as users scroll down. The grid contains the limit the grid needs for its next page. Does your API support paging the results?

No, it doesnt.

Currently, this is the way I am searching against everything:

        search.addValueChangeListener(event -> {
                    String searchTerm = event.getValue();
                    List<SerialNumbers> filteredItems = serialService.getSerial().getSerial_numbers().stream()
                            .filter((serialNumbers -> serialNumbers.getSerial_number().contains(searchTerm))).collect(Collectors.toList());

If you need to have the entire data set in memory anyway, it’s probably ok. But if each user has their own copy of that base data set that could end up using more memory than necessary. If the base data is same for all users, you could probably cache one version of that in your app and then each user can filter it

The base data changes daily, more and more gets added constantly and consistently.

If I had to guess, roughly 50-100 serial number lists with their respective fields get added a day

Can pagination be done by date? They offer a limit parameter but not on the endpoint im calling

The pagination API (nor UI) by Grid itself don’t support dates directly, but if you can limit results by dates you can build UI for it.

So instead of having just one text field, add also a date(time)picker or two, add value change listener to all three fields that call “filterResults” method or similar and then do the service call there and pass the result set as list to your grid.

Then if you want to limit the amount of time range to allow, limit that in the same method and if you want, you can also code “next results”/“previous results” that modify the date pickers.

Based on your question and one other, I wrote an example application today that has time based filtering for grid items. Check the UsageLogView in this example: GitHub - mstahv/usage-logging-example: Example Vaadin app with built-in usage logging to the database and a view for it.

You are awesome! I appreciate you

I’ll take a look at this today when I get a chance

Taking a look at this project, how can I take a look at the UsageLogView? I havent worked with multiple views yet

Ah, yeah, that has @RolesAllowed(“ADMIN”) annotation. So you need to login to the app first.

Or, then you can simply remove that annotation from the class.

So when you login, it will appear in the menu.