Trouble formatting date column in a grid (using Vaadin 14)

New to Vaadin. Only been playing around with it for a week or so.

I’m trying to reformat a date field in a grid to show in a specific format. I tried converting the date into a formatted string, but then sorting didn’t work correctly because it’s sorting the Strings, not the Dates. I’d like to preserve the data type of the field in the grid so that the formatted dates still sort properly.

I found this example on one of the Vaadin tutorial pages (https://vaadin.com/docs/flow/components/tutorial-flow-grid.html)

grid.addColumn(new LocalDateTimeRenderer<>(
Item::getPurchaseDate,
“dd/MM HH:mm:ss”)
).setHeader(“Purchase date and time”);

however when I try to implement it I get “Cannot infer type arguments for LocalDateTimeRenderer<>”

here’s my code snippet.

private void configureGrid() {
	grid.addClassName("systemName-grid");
	grid.setSizeFull();
	grid.removeAllColumns();
	grid.addComponentColumn(this::buildEditButton).setKey("edit").setFlexGrow(0).setWidth("4px").setId("edit");
	grid.addColumn(SystemName::getSystemName).setHeader("System Name");
	grid.addColumn(SystemName::getLastSyncDatetime).setHeader("Last Sync Datetime");		
	grid.addColumn(new LocalDateTimeRenderer<>(
			SystemName::getLastSyncDatetime
			,"dd/MM HH:mm:ss")
			).setHeader("Last Sync Datetime");
	grid.addColumn(SystemName::getActive).setHeader("Active");
	grid.getColumns().forEach(col -> col.setAutoWidth(true));
	grid.setSelectionMode(SelectionMode.MULTI);
}

Any thoughts on what I’m doing wrong here?

I’m also going to want to do something similar for a boolean field (show yes/no instead of true/false) but I’ll tackle that one after I figure this out.

Thanks in advance!

The

grid.addColumn(new LocalDateTimeRenderer<>(
			SystemName::getLastSyncDatetime
			,"dd/MM HH:mm:ss")
			).setHeader("Last Sync Datetime");

will work only if SystemName::getLastSyncDatetime returns a java.time.LocalDateTime object. If it’s e.g. java.util.Date, long or java.sql.Date, you’ll need to use something else. Probably the easiest way would be to convert it to a String, and it seems you already know how to do that. To make the column sortable, you just need to implement a Comparator. It could look like this, for example (assuming java.util.Date):

        SimpleDateFormat formatter = new SimpleDateFormat("dd/MM HH:mm:ss");
        grid.addColumn(bean -> formatter.format(bean.getLastSyncDatetime()))
		    .setComparator(
                (o1, o2) -> o1.getLastSyncDatetime().compareTo(o2.getLastSyncDatetime()))
            .setHeader("Last Sync Datetime");