JavaFX sort TableView column by date (dd/mm/yyyy format)

Question

I have a TableView with many columns. The first one contains dates (in dd/mm/yyyy format), but the date doesn't sort "properly".

Here is a small example I've been preparing:

And here is the code:

Test.java

package test;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Scene;
import javafx.scene.layout.AnchorPane;
import javafx.stage.Stage;

public class Test extends Application {
    private AnchorPane rootLayout;

    @Override
    public void start(Stage primaryStage) throws Exception{

        FXMLLoader loader = new FXMLLoader();
        loader.setLocation(Test.class.getResource("FXMLDocument.fxml"));
        FXMLDocumentController controller = new FXMLDocumentController();
        loader.setController(controller);

        rootLayout = (AnchorPane) loader.load();
        Scene scene = new Scene(rootLayout);

        primaryStage.setScene(scene);
        primaryStage.setTitle("Test");

        primaryStage.centerOnScreen();
        primaryStage.show();

    }

}

FXMLDocumentController.java

package test;

import java.util.List;
import java.util.Map;
import javafx.fxml.FXML;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.scene.control.TableColumn;
import javafx.scene.control.TableView;
import javafx.scene.control.cell.PropertyValueFactory;

public class FXMLDocumentController {
    private ObservableList<ExampleTable> datos;
    @FXML public TableView<ExampleTable> tv_example;
    @FXML public TableColumn<ExampleTable, String> col_date, col_name;

    public void initialize(){
        datos = FXCollections.observableArrayList();
        col_date.setCellValueFactory(new PropertyValueFactory<>("date"));
        col_name.setCellValueFactory(new PropertyValueFactory<>("name"));

        setTable();
    }

    public void setTable(){
        List<Map<String, String>> lmap = ExampleTable.lmap();
        for(Map<String, String> element : lmap){
            ExampleTable objEt = new ExampleTable(element.get("date"), element.get("name"));
            datos.add(objEt);
        }

        tv_example.setItems(datos);
        tv_example.getSortOrder().setAll(col_date);
    }
}

ExampleTable.java

package test;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import javafx.beans.property.SimpleStringProperty;
import javafx.beans.property.StringProperty;

public class ExampleTable {
    public StringProperty date;
    public StringProperty name;

    public ExampleTable(String date, String name){
        this.date = new SimpleStringProperty(date);
        this.name = new SimpleStringProperty(name);
    }

    public String getDate(){
        return date.get();
    }

    public void setDate(String date){
        this.date.set(date);
    }

    public String getName(){
        return name.get();
    }

    public void setName(String name){
        this.name.set(name);
    }

    public static List<Map<String, String>> lmap(){
        List<Map<String, String>> list = new ArrayList<>();

        Map<String, String> row = new HashMap<>();
        row.put("date", "14/01/1988");
        row.put("name", "Hagen");
        list.add(row);

        row = new HashMap<>();
        row.put("date", "27/02/1988");
        row.put("name", "Herrman");
        list.add(row);

        row = new HashMap<>();
        row.put("date", "16/03/1988");
        row.put("name", "Hank");
        list.add(row);

        row = new HashMap<>();
        row.put("date", "19/05/1994");
        row.put("name", "Jack");
        list.add(row);

        return list;
    }
}

And the FXML file:

FXMLDocument.fxml

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.TableColumn?>
<?import javafx.scene.control.TableView?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.VBox?>

<AnchorPane id="AnchorPane" prefHeight="400.0" prefWidth="500.0" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/8.0.111">
   <children>
      <VBox layoutX="32.0" layoutY="40.0" prefHeight="200.0" prefWidth="100.0" AnchorPane.bottomAnchor="4.0" AnchorPane.leftAnchor="4.0" AnchorPane.rightAnchor="4.0" AnchorPane.topAnchor="4.0">
         <children>
            <TableView fx:id="tv_example" maxHeight="1.7976931348623157E308" prefWidth="200.0" VBox.vgrow="ALWAYS">
              <columns>
                <TableColumn fx:id="col_date" minWidth="120.0" prefWidth="120.0" text="Date" />
                <TableColumn fx:id="col_name" minWidth="100.0" prefWidth="300.0" text="Name" />
              </columns>
            </TableView>
         </children>
      </VBox>
   </children>
</AnchorPane>

EDIT:

I've just made these changes using LocalDate instead of String as date:

ExampleTable.java

public ObjectProperty<LocalDate> date;
    public StringProperty name;

    public ExampleTable(LocalDate date, String name){
        this.date = new SimpleObjectProperty(date);
        this.name = new SimpleStringProperty(name);
    }

    public LocalDate getDate(){
        return date.get();
    }

    public void setDate(LocalDate date){
        this.date.set(date);
    }

FXMLDocumentController.java

public class FXMLDocumentController {
    private ObservableList<ExampleTable> datos;
    @FXML public TableView<ExampleTable> tv_example;
    @FXML public TableColumn<ExampleTable, LocalDate> col_date;
    @FXML public TableColumn<ExampleTable, String> col_name;

    public void initialize(){
        datos = FXCollections.observableArrayList();
        col_date.setCellValueFactory(new PropertyValueFactory<>("date"));
        col_name.setCellValueFactory(new PropertyValueFactory<>("name"));

        setTable();
    }

    public void setTable(){
        List<Map<String, String>> lmap = ExampleTable.lmap();

        for(Map<String, String> element : lmap){
            LocalDate dt = ExampleTable.toLocalDate(element.get("date"));
            ExampleTable objEt = new ExampleTable(dt, element.get("name"));
            datos.add(objEt);
        }

        tv_example.setItems(datos);
        tv_example.getSortOrder().setAll(col_date);
    }
}

Here is the toLocalDate method in ExampleTable:

public static LocalDate toLocalDate(String date){
        final DateTimeFormatter formatter = DateTimeFormatter.ofPattern("dd/MM/yyyy");
        LocalDate dt = LocalDate.parse(date, formatter);
        return dt;
    }

And I'm getting this:

Answer 1

You can change the way the LocalDate is displayed in the table cells by using a cellFactory (in addition to the cellValueFactory you already have):

DateTimeFormatter formatter = DateTimeFormatter.ofPattern("dd/MM/yyyy");
col_date.setCellFactory(tc -> new TableCell<ExampleTable, LocalDate>() {
    @Override
    protected void updateItem(LocalDate date, boolean empty) {
        super.updateItem(date, empty);
        if (empty) {
            setText(null);
        } else {
            setText(formatter.format(date));
        }
    }
});