No DataGrid component?

Question

I believe JavaFX seriously needs a DataGrid component to render tabular data as a GRID, where data can be paged, sorted, filtered like other data grid solutions (Adobe Flex, jQGrid, DataTables etc).
This is one of the basic controls, any serious application would definitely need. TableView is the only closest thing I found, but that doesn't fit the bill at all.
The DataFx project looks promising, but is very primitive.
I hope Oracle will come up with a pretty GRID control soon, to beat the competition. We were planning to go with JavaFX and the only thing that is stopping us is the lack of a GRID component, we have to look for other web-based alternatives now.

Answer 1

I think there's more to the TableView API than you're seeing, as it's supported by the JavaFX Properties and Collections APIs. The columns are exposed as a mutable, observable List, as is the data. So the columns are dynamic and can be readily changed as necessary, the table will update automatically.
I used you example as a way to test this out; I've made no effort whatsoever to make this look good, the css is relatively straightforward. Also, I have no knowledge whatsoever of your business domain, so this will likely look somewhat naive. I think the code structure might be helpful though. There are some things I wish were a bit different but I'll come to that after the code.
I'm going to assume you have some kind of data model and some way of knowing when the data's changed. I've mocked this up with a DataModel class with listener notification, but there are other ways this could happen (could be an EJB, for example). I've made this completely agnostic with respect to JavaFX.
DataModel.java (a mockup of something I assume you already have existing):
import java.util.ArrayList;
import java.util.List;
public class DataModel {
     private double minDeviation ;
     private double maxDeviation ;
     private int numDeviationCategories ;
     private int numRows ;
     private List<DataListener> listeners ;
     public DataModel(double minDeviation, double maxDeviation,
               int numDeviationCategories, int numRows) {
          this.minDeviation = minDeviation;
          this.maxDeviation = maxDeviation;
          this.numDeviationCategories = numDeviationCategories;
          this.numRows = numRows;
          this.listeners = new ArrayList<DataListener>();
     public String getValue(int row, double deviation) {
          int category = (int) ((numDeviationCategories - 1)*(deviation - minDeviation) / (maxDeviation - minDeviation)) ;
          return String.format("f(%d, %d)", category+1, row+1);
     public double getMinDeviation() {
          return minDeviation;
     public void setMinDeviation(double minDeviation) {
          if (minDeviation != this.minDeviation) {
               this.minDeviation = minDeviation;
               fireDeviationRangeChanged();
     public double getMaxDeviation() {
          return maxDeviation;
     public void setMaxDeviation(double maxDeviation) {
          if (maxDeviation != this.maxDeviation) {
               this.maxDeviation = maxDeviation;
               fireDeviationRangeChanged();
     public int getNumDeviationCategories() {
          return numDeviationCategories;
     public void setNumDeviationCategories(int numDeviationCategories) {
          if (numDeviationCategories != this.numDeviationCategories) {
               this.numDeviationCategories = numDeviationCategories;
               fireNumDeviationCategoriesChanged();
     public int getNumRows() {
          return numRows;
     public void setNumRows(int numRows) {
          if (this.numRows != numRows) {
               this.numRows = numRows;
               fireNumRowsChanged();
     public void addDataListener(DataListener l) {
          listeners.add(l);
     public void removeDataListener(DataListener l) {
          listeners.remove(l);
     private void fireDeviationRangeChanged() {
          DataEvent event = new DataEvent(this);
          for (DataListener l : listeners) {
               l.deviationRangeChanged(event);
     private void fireNumDeviationCategoriesChanged() {
          DataEvent event = new DataEvent(this);
          for (DataListener l : listeners) {
               l.numDeviationCategoriesChanged(event);
     private void fireNumRowsChanged() {
          DataEvent event = new DataEvent(this);
          for (DataListener l : listeners) {
               l.numRowsChanged(event);
}And there are two almost trivial supporting classes to support the listener notification:
public interface DataListener {
     public void deviationRangeChanged(DataEvent event);
     public void numDeviationCategoriesChanged(DataEvent event);
     public void numRowsChanged(DataEvent event);
public class DataEvent {
     private final DataModel source ;
     public DataEvent(DataModel source) {
          this.source = source;
     public DataModel getSource() {
          return source;
}The TableView exposes ObservableLists for the columns and the data. We need to update those lists when the data or column structure changes. So we need an adapter to sit in front of our generic DataModel and manipulate those lists when the data changes. This class will take a reference to a DataModel in addition to references to the column list and data list; it will listen for notifications from the DataModel and update the lists as necessary. (I'm implementing each row in the table simply as a List<String>, and we retrieve each element from the row using a custom CellValueFactory.)
TableDataModel.java:
public class TableDataModel {
     private DataModel model ;
     private final ObservableList<TableColumn<List<String>, ?>> columns ;
     private final ObservableList<List<String>> items ;
     public TableDataModel(DataModel model, ObservableList<TableColumn<List<String>, ?>> columns, ObservableList<List<String>> items) {
          this.model = model ;
          this.columns = columns;
          this.items = items ;
          buildColumns();
          buildItems();
          model.addDataListener(new ModelListener());
     private void buildColumns() {
          int numCols = model.getNumDeviationCategories();
          List<TableColumn<List<String>, String>> colList = new ArrayList<TableColumn<List<String>, String>>();
          double minDeviation = model.getMinDeviation() ;
          double maxDeviation = model.getMaxDeviation() ;
          double colDeviationIncrement = (maxDeviation - minDeviation) / (numCols-1) ;
          Format percentFormat = DecimalFormat.getPercentInstance();
          for (int col=0; col<numCols; col++) {
               String colTitle = percentFormat.format(minDeviation + col*colDeviationIncrement);
               TableColumn<List<String>, String> column = new TableColumn<List<String>, String>(colTitle);
               final int colIndex = col ;
               column.setCellValueFactory(new Callback<TableColumn.CellDataFeatures<List<String>,String>,ObservableValue<String>>() {
                    @Override
                    public ObservableValue<String> call(
                              CellDataFeatures<List<String>, String> cellDataFeatures) {
                         List<String> data = cellDataFeatures.getValue();
                         return new SimpleStringProperty(data.get(colIndex));
               colList.add(column);
          columns.clear();
          columns.addAll(colList);
     private void buildItems() {
          List<List<String>> itemList = new ArrayList<List<String>>();
          int numCols = model.getNumDeviationCategories() ;
          for (int row = 0; row<model.getNumRows(); row++) {
               List<String> data = new ArrayList<String>();
               double minDeviation = model.getMinDeviation() ;
               double colDeviationIncrement = (model.getMaxDeviation() - minDeviation) / (numCols-1) ;
               for (int col = 0 ; col < numCols; col++) {
                    double deviation = minDeviation + col * colDeviationIncrement ;
                    data.add(model.getValue(row, deviation));
               itemList.add(data);
          items.clear();
          items.addAll(itemList);
     private class ModelListener implements DataListener {
          @Override
          public void deviationRangeChanged(DataEvent event) {
               double minDeviation = model.getMinDeviation();
               double maxDeviation = model.getMaxDeviation();
               int numCols = model.getNumDeviationCategories();
               double colDeviationIncrement = (maxDeviation - minDeviation) / (numCols-1);
               Format percentFormat = DecimalFormat.getPercentInstance();
               for (int col=0; col<numCols; col++) {
                    String colTitle = percentFormat.format(minDeviation + col*colDeviationIncrement);
                    columns.get(col).setText(colTitle);
          @Override
          public void numDeviationCategoriesChanged(DataEvent event) {
               buildItems();
               buildColumns();
          @Override
          public void numRowsChanged(DataEvent event) {
               buildItems();
}To test this out, I have a simple UI for changing the range of "deviations" displayed, the number of columns, and the number of rows. The controller for the UI simply instantiates a DataModel and passes calls to it when the user changes these values. In real life, of course, the changes to the data model could come from anywhere - likely from polling a server or server push. The UI also contains the TableView, retrieves the columns and items from it, and passes those, along with the data model to a TableDataModel which ties it all together. This isn't really part of the infrastructure, but for completeness here's the controller:
Controller.java
public class Controller {
     @FXML private TableView<List<String>> tableView ;
     @FXML private TextField minDevTF ;
     @FXML private TextField maxDevTF ;
     @FXML private TextField numColsTF ;
     @FXML private TextField numRowsTF ;
     @FXML private Button minDevIncButton ;
     @FXML private Button minDevDecButton ;
     @FXML private Button maxDevIncButton ;
     @FXML private Button maxDevDecButton ;
     @FXML private Button numColsIncButton ;
     @FXML private Button numColsDecButton ;
     @FXML private Button numRowsIncButton ;
     @FXML private Button numRowsDecButton ;
     private DataModel model ;
     public void initialize() {
          model = new DataModel(0.8, 1.2, 5, 6);
          final TableDataModel tableModel = new TableDataModel(model, tableView.getColumns(), tableView.getItems());
          model.addDataListener(new DataListener() {
               @Override
               public void deviationRangeChanged(DataEvent event) {
                    if (model.getMaxDeviation() - model.getMinDeviation() <= 0.01) {
                         minDevIncButton.setDisable(true);
                         maxDevDecButton.setDisable(true);
                    } else {
                         minDevIncButton.setDisable(false);
                         maxDevDecButton.setDisable(false);
                    Format percentFormat = DecimalFormat.getPercentInstance();
                    minDevTF.setText(percentFormat.format(model.getMinDeviation()));
                    maxDevTF.setText(percentFormat.format(model.getMaxDeviation()));
               @Override
               public void numDeviationCategoriesChanged(DataEvent event) {
                    numColsDecButton.setDisable(model.getNumDeviationCategories() <= 2);
                    numColsTF.setText(Integer.toString(model.getNumDeviationCategories()));
               @Override
               public void numRowsChanged(DataEvent event) {
                    numRowsDecButton.setDisable(model.getNumRows() <= 2);
                    numRowsTF.setText(Integer.toString(model.getNumRows()));
          Format percentFormat = DecimalFormat.getPercentInstance();
          minDevTF.setText(percentFormat.format(model.getMinDeviation()));
          maxDevTF.setText(percentFormat.format(model.getMaxDeviation()));
          numColsTF.setText(Integer.toString(model.getNumDeviationCategories()));
          numRowsTF.setText(Integer.toString(model.getNumRows()));
     public void decrementMinDeviation() {
          model.setMinDeviation(model.getMinDeviation() - 0.01);
     public void incrementMinDeviation() {
          model.setMinDeviation(model.getMinDeviation() + 0.01);
     public void decrementMaxDeviation() {
          model.setMaxDeviation(model.getMaxDeviation() - 0.01);
     public void incrementMaxDeviation() {
          model.setMaxDeviation(model.getMaxDeviation() + 0.01);
     public void decrementNumColumns() {
          model.setNumDeviationCategories(model.getNumDeviationCategories() - 1);
     public void incrementNumColumns() {
          model.setNumDeviationCategories(model.getNumDeviationCategories() + 1);
     public void decrementNumRows() {
          model.setNumRows(model.getNumRows() - 1);
     public void incrementNumRows() {
          model.setNumRows(model.getNumRows() + 1);
}Here's the FXML for the UI:
root.fxml:
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.control.ScrollPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.VBox?>
<?import javafx.scene.layout.FlowPane?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.TableView?>
<?import javafx.scene.shape.Path?>
<?import javafx.scene.shape.MoveTo?>
<?import javafx.scene.shape.LineTo?>
<?import javafx.scene.shape.ClosePath?>
<?import javafx.scene.paint.Color?>
<?import javafx.scene.control.ProgressIndicator?>
<BorderPane xmlns:fx="http://javafx.com/fxml"
     fx:controller="edu.marshall.denvir.tests.gridlike.Controller">
     <top>
          <FlowPane>
               <HBox>
                    <Label text="Min Deviation:"/>
                    <TextField fx:id="minDevTF" editable="false" />
                    <VBox>
                         <Button fx:id="minDevIncButton" prefWidth="20" prefHeight="10" minWidth="20" minHeight="10" onAction="#incrementMinDeviation">
                              <graphic>
                              <Path fill="BLACK">
                                   <elements>
                                        <MoveTo x="0" y="4"/>
                                        <LineTo x="2" y="0"/>
                                        <LineTo x="4" y="4"/>
                                        <ClosePath/>
                                   </elements>
                              </Path>
                              </graphic>                              
                         </Button>
                         <Button fx:id="minDevDecButton" prefWidth="20" prefHeight="10" minWidth="20" minHeight="10" onAction="#decrementMinDeviation">
                              <graphic>
                              <Path fill="BLACK">
                                   <elements>
                                        <MoveTo x="0" y="4"/>
                                        <LineTo x="2" y="0"/>
                                        <LineTo x="4" y="4"/>
                                        <ClosePath/>
                                   </elements>
                              </Path>
                              </graphic>                              
                         </Button>
                    </VBox>
               </HBox>
               <HBox>
                    <Label text="Max Deviation:" />
                    <TextField fx:id="maxDevTF" editable="false" />
                    <VBox>
                         <Button fx:id="maxDevIncButton" prefWidth="20" prefHeight="10" minWidth="20" minHeight="10"  onAction="#incrementMaxDeviation" styleClass="increment-button">
                              <graphic>
                              <Path fill="BLACK">
                                   <elements>
                                        <MoveTo x="0" y="4"/>
                                        <LineTo x="2" y="0"/>
                                        <LineTo x="4" y="4"/>
                                        <ClosePath/>
                                   </elements>
                              </Path>
                              </graphic>
                         </Button>
                         <Button fx:id="maxDevDecButton" prefWidth="20" prefHeight="10" minWidth="20" minHeight="10"  onAction="#decrementMaxDeviation">
                              <graphic>
                              <Path fill="BLACK">
                                   <elements>
                                        <MoveTo x="0" y="4"/>
                                        <LineTo x="2" y="0"/>
                                        <LineTo x="4" y="4"/>
                                        <ClosePath/>
                                   </elements>
                              </Path>
                              </graphic>
                         </Button>
                    </VBox>
               </HBox>
               <HBox>
                    <Label text="Number of columns:" />
                    <TextField fx:id="numColsTF" editable="false" />
                    <VBox>
                         <Button fx:id="numColsIncButton" prefWidth="20" prefHeight="10" minWidth="20" minHeight="10" onAction="#incrementNumColumns">
                              <graphic>
                              <Path fill="BLACK">
                                   <elements>
                                        <MoveTo x="0" y="4"/>
                                        <LineTo x="2" y="0"/>
                                        <LineTo x="4" y="4"/>
                                        <ClosePath/>
                                   </elements>
                              </Path>
                              </graphic>
                         </Button>
                         <Button fx:id="numColsDecButton" prefWidth="20" prefHeight="10" minWidth="20" minHeight="10" onAction="#decrementNumColumns">
                              <graphic>
                              <Path fill="BLACK">
                                   <elements>
                                        <MoveTo x="0" y="4"/>
                                        <LineTo x="2" y="0"/>
                                        <LineTo x="4" y="4"/>
                                        <ClosePath/>
                                   </elements>
                              </Path>
                              </graphic>
                         </Button>
                    </VBox>
               </HBox>
               <HBox>
                    <Label text="Number of Rows:" />
                    <TextField fx:id="numRowsTF" editable="false" />
                    <VBox>
                         <Button fx:id="numRowsIncButton" prefWidth="20" prefHeight="10" minWidth="20" minHeight="10"  onAction="#incrementNumRows">
                              <graphic>
                              <Path fill="BLACK">
                                   <elements>
                                        <MoveTo x="0" y="4"/>
                                        <LineTo x="2" y="0"/>
                                        <LineTo x="4" y="4"/>
                                        <ClosePath/>
                                   </elements>
                              </Path>
                              </graphic>
                         </Button>
                         <Button fx:id="numRowsDecButton" prefWidth="20" prefHeight="10" minWidth="20" minHeight="10" onAction="#decrementNumRows">
                              <graphic>
                              <Path fill="BLACK">
                                   <elements>
                                        <MoveTo x="0" y="4"/>
                                        <LineTo x="2" y="0"/>
                                        <LineTo x="4" y="4"/>
                                        <ClosePath/>
                                   </elements>
                              </Path>
                              </graphic>
                         </Button>
                    </VBox>
               </HBox>
          </FlowPane>
     </top>
     <center>
               <TableView fx:id="tableView"/>
     </center>
</BorderPane>and finally the test driver:
Gridlike.java:
public class Gridlike extends Application {
     @Override
     public void start(Stage primaryStage) throws Exception {
          Parent root = FXMLLoader.load(getClass().getResource("root.fxml"));
          Scene scene = new Scene(root, 600, 400);
          primaryStage.setScene(scene);
          primaryStage.sizeToScene();
          primaryStage.show();
     public static void main(String[] args) {
          launch(args);
}So that seems to me not to be too bad. Obviously in the real world there's likely to be way more functionality in the data model and table data model implementations, but the structure is pretty clean and it should integrate pretty nicely with existing structures without much effort.
One thing I don't like is having to pass the ObservableLists to the TableDataModel. I'd prefer the TableDataModel simply to instantiate it's own lists and expose them, the way it is seems like too much strong couple from the model to the view. The problem is that the TableView only exposes ObservableLists. If it exposed ListPropertys, then those properties could just be bound to arbitrary list properties (or observable lists) exposed by a TableDataModel, which I think would be a bit cleaner.
In terms of having APIs for binding directly from TableViews to JDBC code, or similar, I think that would be nice but is probably a bit unrealistic at this stage. What happened in the web app world was that this kind of functionality was implemented by third party frameworks, and only after the use cases had really settled down did Sun/Oracle provide standard implementations (JPA and JSF, depending on what you're looking for). I don't think we'll have to wait as long as we waited for those, but I'd guess it will be a while.
The row headers, however, would be pretty nice, and it seems those could be fairly easily added to the TableView API. It shouldn't be too hard to create a column for them and style it so it looks different, but it would mess with the cleanliness of the data model.
Just my $0.02 worth...