Javafx adding Image in TableView

Question

I am trying to add image in tableView but I can't add image.

I am getting image in byte[] and I can set this image in imageView but is there any way to add it in tableView?

person3 class:

public class person3 {
    private final StringProperty firstName7 = new SimpleStringProperty("");
    private final StringProperty firstName8 = new SimpleStringProperty("");

    public person3(String firstName4, String firstName5) {
        setFirstName7(firstName4);
        setFirstName8(firstName5);
    }

    public String getFirstName7() {
        return firstName7.get();
    }

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

    public StringProperty firstNameProperty7() {
        return firstName7;
    }

    public String getFirstName8() {
        return firstName8.get();
    }

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

    public StringProperty firstNameProperty8() {
        return firstName8;
    } 
}

Now I am trying to add image in tableview:

f51 = rs.getBytes(10); 
System.out.println(f51);
ByteArrayInputStream bis = new ByteArrayInputStream(f51);
System.out.println(bis);
BufferedImage read = ImageIO.read(bis);
System.out.println(read);
Image image = SwingFXUtils.toFXImage(read, null);
table1.getItems().add(new person3("Data1", "data2"));
// this add simple data but how can I add image

Would like to get any advice. Thank you.

Answer 1

One of the posible approach for this issue is to create simple class, lets say CustomImage with private ImageView object initialization and its setter and getter. Next, you can use this class to specify TableView<T> and TableColumn<T> generic types, set column's cell value factory, and populate table with your images. Implementation of example CustomImage class and its practical use is shown below:

import javafx.scene.image.ImageView;

public class CustomImage {

    private ImageView image;

    CustomImage(ImageView img) {
        this.image = img;
    }

    public void setImage(ImageView value) {
        image = value;
    }

    public ImageView getImage() {
        return image;
    }
}

Practical implementation:

import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.scene.control.TableColumn;
import javafx.scene.control.TableView;
import javafx.scene.control.cell.PropertyValueFactory;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.BorderPane;
import javafx.stage.Stage;

public class ImageViewInTableView extends Application {

    public Parent createContent() {

        /* layout */
        BorderPane layout = new BorderPane();

        /* layout -> center */
        TableView<CustomImage> tableview = new TableView<CustomImage>();

        /* layout -> center -> tableview */

        /* initialize two CustomImage objects and add them to the observable list */
        ObservableList<CustomImage> imgList = FXCollections.observableArrayList();
        CustomImage item_1 = new CustomImage(new ImageView(new Image("Icon_AddNewPatient.png")));
        CustomImage item_2 = new CustomImage(new ImageView(new Image("Icon_EditPatient.png")));
        imgList.addAll(item_1, item_2);

        /* initialize and specify table column */
        TableColumn<CustomImage, ImageView> firstColumn = new TableColumn<CustomImage, ImageView>("Images");
        firstColumn.setCellValueFactory(new PropertyValueFactory<CustomImage, ImageView>("image"));
        firstColumn.setPrefWidth(60);

        /* add column to the tableview and set its items */
        tableview.getColumns().add(firstColumn);
        tableview.setItems(imgList);

        /* add TableView to the layout */
        layout.setCenter(tableview);
        return layout;
    }

    @Override
    public void start(Stage stage) throws Exception {
        stage.setScene(new Scene(createContent()));
        stage.setWidth(200);
        stage.setHeight(200);
        stage.show();
    }

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

And thats how it looks like: