Textflow inside Tablecell: not correct cell height

I wont to place formated text inside a JavaFX table. First I was trying to embedd a Webview but I had problems with cell heigh. This seems to be a mission feature in JavafX (see: Java FX: TableView - display simple HTML).

Based on the recommendation here I tried to embed a TextFlow. However again the sizing of the TabelCell is not correct. I want the height of the row just as big, that the content of the cell fits inside. Changeing the column width should result in changeing the row heigth.

Here is my minimal running example.

import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.ContentDisplay;
import javafx.scene.control.TableCell;
import javafx.scene.control.TableColumn;
import javafx.scene.control.TableView;
import javafx.scene.control.cell.PropertyValueFactory;
import javafx.scene.layout.Region;
import javafx.scene.paint.Color;
import javafx.scene.text.Text;
import javafx.scene.text.TextFlow;
import javafx.stage.Stage;

public class TableViewSample extends Application {


    private final ObservableList<MyData> data = FXCollections.observableArrayList(new MyData(1L), new MyData(3L), new MyData(2L), new MyData(4L), new MyData(1L));

    public static void main(final String[] args) {
        launch(args);
    }

    @Override
    public void start(final Stage stage) {
        final Scene scene = new Scene(new Group());

        TableView<MyData> table = new TableView<>();

        final TableColumn<MyData, Long> nameCol = new TableColumn("So So");
        nameCol.setMinWidth(200);
        nameCol.setCellValueFactory(new PropertyValueFactory<>("i"));

        // Allow to display Textflow in Column

        nameCol.setCellFactory(column -> {
            return new TableCell<MyData, Long>() {
                @Override
                protected void updateItem(Long item, boolean empty) {
                    super.updateItem(item, empty);

                    if (item == null || empty) {

                        setText(null);
                        setStyle("");

                    } else {

                        // Generate Textflow with variable length

                        TextFlow textFlow = new TextFlow();
                        textFlow.setPrefHeight(Region.USE_COMPUTED_SIZE);

                        for (Long ii = 1L; ii <= item; ii++) {
                            Text text1 = new Text("la la la ");
                            text1.setFill(Color.RED);

                            Text text2 = new Text("blue blue blue ");
                            text2.setFill(Color.BLUE);
                            textFlow.getChildren().add(text1);
                            textFlow.getChildren().add(text2);


                        }

                        setContentDisplay(ContentDisplay.GRAPHIC_ONLY);
                        setGraphic(textFlow);
                   //     setPrefHeight(20); // <- Shows the expected effect.
                                             // However I want to have variable height of row. 
                         setPrefHeight(Region.USE_COMPUTED_SIZE);  // <- Why is that not working

                    }
                }
            };
        });



        table.setItems(data);
        table.getColumns().addAll(nameCol);

        ((Group) scene.getRoot()).getChildren().addAll(table);

        stage.setScene(scene);
        stage.show();
    }

    public static class MyData {
        private Long i;
        public MyData(Long i) {  this.i = i;      }
        public Long getI() {    return i;      }
    }

}

As you can see the row height is way to big. Any Suggestions?

After a lot of time trying to resolve this issue I found a simple solution. Bind the flowPane width to the column width and then put it in a Group and set the group as the graphic.

So try:

//Bind the max width of textFlow 
//(6 is the sum of the default left and right margins)
textFlow.maxWidthProperty().bind(getTableColumn().widthProperty().subtract(6));

setGraphic(new Group(textFlow));