JavaFX Tableview with scrollbar

We are going to create a tableview to display response headers with key value pair.

FXML for creating tableview

In the fxml, each column needs to map the property which will be added to the table.

<TableView fx:id="responseHeadersTableView" GridPane.columnIndex="0" GridPane.rowIndex="1">
    <columns>
        <TableColumn text="Header">
            <cellValueFactory>
                <PropertyValueFactory property="header" />
            </cellValueFactory>
        </TableColumn>
        <TableColumn text="Value">
            <cellValueFactory>
                <PropertyValueFactory property="value" />
            </cellValueFactory>
        </TableColumn>
    </columns>
</TableView>

Object for table rows

Instead of directly adding the hashmap to the table, it is easier and more convenient to create a class.

package org.openjfx;
import javafx.beans.property.SimpleStringProperty;

public class Header {

    private final SimpleStringProperty header = new SimpleStringProperty("");
    private final SimpleStringProperty value = new SimpleStringProperty("");

    public Header() {
        this("","");
    }

    public Header(String header, String value) {
        setHeader(header);
        setValue(value);
    }

    public String getHeader() {
        return header.get();
    }

    public SimpleStringProperty headerProperty() {
        return header;
    }

    public void setHeader(String header) {
        this.header.set(header);
    }

    public String getValue() {
        return value.get();
    }

    public SimpleStringProperty valueProperty() {
        return value;
    }

    public void setValue(String value) {
        this.value.set(value);
    }
}

Converting hashmap to Row Objects for tableview

Now we are going to convert the hashmap to row objects using java streams.

List<Header> headerList = new ArrayList<>();
headers.map().entrySet().forEach(e -> {
    headerList.add(new Header(e.getKey(), e.getValue().get(0)));
});

ObservableList<Header> list
        = FXCollections.observableArrayList(headerList);
responseHeadersTableView.setItems(list);

And finally add the list of objects into the tableview.

Reference: https://docs.oracle.com/javafx/2/fxml_get_started/fxml_tutorial_intermediate.htm

Configuration in FXML Controller

Adding the following resize policy will provide adequate space for the columns. Other such settings can be done in the controller.

    @FXML
    public void initialize() {
        responseHeadersTableView.setColumnResizePolicy(TableView.CONSTRAINED_RESIZE_POLICY);
    }

Below controller applies to the TabView which contains the TableView. This also provides scrollbars to the tableview.

Final Code

package com.metamug.apitester.ctrl;

import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.fxml.FXML;
import javafx.scene.control.TableView;
import javafx.scene.control.TextArea;

import java.net.http.HttpHeaders;
import java.util.ArrayList;
import java.util.List;
import static java.lang.System.Logger.Level.INFO;

public class APIResponseController {
    private static System.Logger LOGGER = System.getLogger("");
    @FXML
    private TextArea responseBody;

    @FXML
    private TableView<Header> responseHeaders;

    @FXML
    public void initialize() {
        responseHeaders.setColumnResizePolicy(TableView.CONSTRAINED_RESIZE_POLICY);
    }

    protected void setResponse(HttpHeaders headers, String body) {
        LOGGER.log(INFO,body);
        List<Header> headerList = new ArrayList<>();
        headers.map().forEach((key, value) -> headerList.add(new Header(key, value.get(0))));
        ObservableList<Header> list
                = FXCollections.observableArrayList(headerList);
        responseHeaders.setItems(list);
        responseBody.setText(body);

    }
}