Filterable Grid

Flow
1

How can I have each column in a grid with its own filter depending with the data type contained? I haven’t found an addon compatible with Vaadin 10 onwards.

Feeling stuck

2

Hi Allan.

There is no API for this to be done in one line of code.

However, you can still do this with a little more effort. See my previous posts on this topic [here]
(https://vaadin.com/forum/thread/17591983/17592893) and [here]
(https://vaadin.com/forum/thread/17689013/17691170)

Basically, you will create Input components (depending on type - TextField for strings, ComboBox for enums…) and define a ValueChangeListener for them where the filter is reset on the DataProvider. The new filter will have to take all current filter-input values into account.

3

Thanks Kaspar. I have read your articles. I have figured out how to filter simple string columns. How can I implement a range filter? E.g entries between two dates(between 1st January to 15th January ) or entries between two numbers (between 1 and 10)

4

As I don’t believe there is a range slider component for Vaadin Flow, a solution to this will probably require two input components for a range filter - one for min value and one for max value. put them in a HorizontalLayout because column.setHeader() only accepts a single component.
Then in the part where you define the filter logic (within dataProvider.setFilter() in my code examples (linked in last comment)) you take both input values into account for that column.

5

How do I filter the two dates if you don’t mind me asking?

I only know of the after() and before() methods but both are not working for me.

How do I filter the two numbers if you don’t mind me asking? Number filter of between 1 and 10 as an example

I only know of the > or >= and < or <= comparisons that we normaly use in if statements

This element is crucial in the reporting aspect of my systems.

Earlier on, I was using an addon (GridUtil) that was working perfecly. It is currently not compatible with vaadin 14 and no other addon component is able to do it either.

6

I only know of the after() and before() methods

Please do not use java.util.Date!. Use LocalDate instead. You can see why when reading [Jon Skeets Blog entry]
(https://codeblog.jonskeet.uk/2017/04/23/all-about-java-util-date/). If you somehow will keep using Date, then yes before() and after() should work.

I’m taking both your examples into account in the following code block. Let’s assume we have a column for birthday (LocalDate) and one column for age (int, long, whatever Number type). for each column, you create an Input (DatePicker for LocalDate, NumberField for Number) for the min value and one for the max value and put them in a HorizontalLayout, which you will set as header of the respective column. All of those inputs will have a ValueChangeListener set to this::onFilterChange. I’m omitting the creation and placement of those inputs in my code and focus instead on the onFilterChange method.

private void onFilterChange(HasValue.ValueChangeEvent event){
	ListDataProvider<Person> dataProvider = (ListDataProvider<Person>) grid.getDataProvider();			
	dataProvider.setFilter((person) -> {
		boolean minAgeMatch = person.getAge() >= minAgeFilter.getValue();
		boolean maxAgeMatch = person.getAge() <= maxAgeFilter.getValue();
		
		boolean minDateMatch = person.getBirthday().isAfter(minDateFilter.getValue());
		boolean maxDateMatch = person.getBirthday().isBefore(maxDateFilter.getValue());
		
		// only show the Persons that match every filter.
		return minAgeMatch && maxAgeMatch && minDateMatch && maxDateMatch;
	});
}