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

date, format, javafx, sorting, tableview

Solution

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));
        }
    }
});

Problem

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:

Original source