Grid -> sortingProerties issue with ComponentRenderer

Flow
1

Hello.

I’m trying to style individual row in a Grid based on a value. According to Vaadin Docs, there are two ways to accomplish that: ComponentRenderer, TemplateRenderer. I’m using ComponentRenederer and its works just fine:

Grid<TabLine> grid = new Grid<>();
grid.setItems(getLines());
grid.addClassName("my");
grid.addColumn(new ComponentRenderer<>(tabline -> {
	    		Label status = new Label(tabline.getStatus());
	    		status.addClassName("style-"+tabline.getStatus()); // styling column based on a status
	    		return status;
	    	}
	    	),"status").setHeader("Status");

But with a ComponentRenderer Sorting by this column is not working.
What should I do to make this column sortable? Should I use TemplateRenderer instead of ComponentRenderer?

I’m using Vaadin 12.

2

Sorting has many special cases, as you can see from the documentation. If you use TemplateRenderer you need to define the properties for the sorting.

https://vaadin.com/docs/v12/flow/components/tutorial-flow-grid.html#sorting

If you use ComponentRenderer, by default toString() representation of the component is used for sorting, which may produce results that look random. So you need to for example add custom comparator as described in above doc.

3

Tatu Lund:
If you use ComponentRenderer, by default toString() representation of the component is used for sorting, which may produce results that look random. So you need to for example add custom comparator as described in above doc.

Thank you so much!
So I tried to use Comparator and it works :

grid.addColumn(new ComponentRenderer<>(tabline -> {
	    		Label status = new Label(tabline.getStatus());
	    		status.addClassName("style-"+tabline.getStatus());
	    		return status;
	    	}
	    	))
	    	.setComparator((tabline1,tabline2) -> tabline1.getName().compareToIgnoreCase(tabline2.getName())) //my custom Comparator
	    	.setHeader("Status");