table column won't take full size of the table view in javaFX

Question

i am trying to create a table with two columns. i am using the scene builder included in netbeans 7.2. in all the examples i have seen all you need to do is drag the table column to the table and it will take the full size, this is not true in my case. this is the fxml file generated by the scene builder. just to be clear i am not changing the table properties from the java.

the fxml:

<?xml version="1.0" encoding="UTF-8"?>

<?import java.lang.*?>
<?import java.net.*?>
<?import java.util.*?>
<?import javafx.geometry.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.image.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.text.*?>

<AnchorPane id="AnchorPane" prefHeight="758.0" prefWidth="956.0" styleClass="screen" xmlns:fx="http://javafx.com/fxml" fx:controller="bgu.dcr.az.cpu.ui.expb.ExperimentBuilderScreen">
  <children>
    <GridPane id="gridPane1" prefHeight="517.0" prefWidth="600.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
      <children>
        <Label id="label1" alignment="CENTER" contentDisplay="CENTER" prefHeight="38.0" prefWidth="9999.0" styleClass="caption" text="Create New Experiment" textFill="#990000" GridPane.columnIndex="0" GridPane.rowIndex="0">
          <font>
            <Font name="Consolas Bold" size="20.0" />
          </font>
        </Label>
        <HBox id="hBox1" alignment="CENTER" prefHeight="100.0" prefWidth="200.0" spacing="5.0" GridPane.columnIndex="0" GridPane.rowIndex="1">
          <children>
            <Label id="label2" graphicTextGap="0.0" styleClass="field-label" text="Experiment Name">
              <font>
                <Font name="Consolas" size="15.0" />
              </font>
              <HBox.margin>
                <Insets top="3.0" />
              </HBox.margin>
            </Label>
            <TextField id="textField1" prefWidth="200.0" HBox.hgrow="ALWAYS" />
            <Button id="button2" fx:id="saveButton" styleClass="dialog-button" text="Save" />
            <Button id="button3" styleClass="dialog-button" text="Dismiss" />
          </children>
          <padding>
            <Insets bottom="5.0" left="5.0" right="5.0" top="5.0" fx:id="x3" />
          </padding>
        </HBox>
        <VBox id="VBox" alignment="CENTER" spacing="5.0" GridPane.columnIndex="0" GridPane.rowIndex="2">
          <children>
            <Label id="label3" prefWidth="9999.0" styleClass="field-label" text="Experiment Tests">
              <VBox.margin>
                <Insets left="5.0" top="5.0" />
              </VBox.margin>
            </Label>
            <HBox id="HBox" alignment="CENTER" spacing="5.0">
              <children>
                <Button id="button1" prefHeight="999.0" styleClass="add-button" text="New">
                  <HBox.margin>
                    <Insets bottom="5.0" left="5.0" right="5.0" top="5.0" fx:id="x3" />
                  </HBox.margin>
                </Button>
                <ListView id="listView1" fx:id="tests" orientation="HORIZONTAL" prefHeight="999.0" prefWidth="200.0" HBox.hgrow="ALWAYS">
                  <HBox.margin>
                    <Insets bottom="4.0" right="5.0" top="4.0" />
                  </HBox.margin>
                </ListView>
              </children>
            </HBox>
          </children>
        </VBox>
        <VBox id="vBox1" prefHeight="200.0" prefWidth="100.0" GridPane.columnIndex="0" GridPane.rowIndex="3">
          <children>
            <GridPane id="gridPane2" VBox.vgrow="ALWAYS">
              <children>
                <VBox id="vBox2" prefHeight="321.0" prefWidth="150.0" styleClass="with-dashed-border" GridPane.columnIndex="0" GridPane.rowIndex="0" GridPane.rowSpan="4">
                  <children>
                    <Label id="label4" text="Algorithms">
                      <graphic>
                        <ImageView id="emptyImageView1" fitHeight="32.0" fitWidth="32.0" preserveRatio="true">
                          <image>
                            <Image url="@_algo.png" preserveRatio="false" smooth="false" />
                          </image>
                        </ImageView>
                      </graphic>
                    </Label>
                    <Button id="button1" fx:id="newAlgorithmButton" prefWidth="999.0" styleClass="add-button" text="New" VBox.margin="$x3" />
                  </children>
                  <GridPane.margin>
                    <Insets bottom="10.0" left="10.0" right="10.0" top="10.0" fx:id="x2" />
                  </GridPane.margin>
                </VBox>
                <VBox id="vBox2" prefHeight="321.0" prefWidth="150.0" styleClass="with-dashed-border" GridPane.columnIndex="1" GridPane.margin="$x2" GridPane.rowIndex="1">
                  <children>
                    <Label id="label4" text="Problem Generator">
                      <graphic>
                        <ImageView id="emptyImageView1" fitHeight="32.0" fitWidth="32.0" preserveRatio="true">
                          <image>
                            <Image url="@_pgen.png" preserveRatio="false" smooth="false" />
                          </image>
                        </ImageView>
                      </graphic>
                    </Label>
                    <Button id="button1" maxHeight="999.0" prefHeight="999.0" prefWidth="999.0" styleClass="add-button" text="New" VBox.margin="$x3" VBox.vgrow="ALWAYS" />
                  </children>
                </VBox>
                <VBox id="vBox2" prefHeight="321.0" prefWidth="150.0" styleClass="with-dashed-border" GridPane.columnIndex="2" GridPane.margin="$x2" GridPane.rowIndex="1">
                  <children>
                    <Label id="label4" prefWidth="9999.0" text="Correctness tester">
                      <graphic>
                        <ImageView id="emptyImageView1" fitHeight="32.0" fitWidth="32.0" preserveRatio="true">
                          <image>
                            <Image url="@_ctest.png" preserveRatio="false" smooth="false" />
                          </image>
                        </ImageView>
                      </graphic>
                    </Label>
                    <Button id="button1" maxHeight="999.0" maxWidth="999.0" prefHeight="999.0" prefWidth="999.0" styleClass="add-button" text="New" VBox.margin="$x3" VBox.vgrow="ALWAYS" />
                  </children>
                </VBox>
                <VBox id="vBox2" prefHeight="321.0" prefWidth="150.0" styleClass="with-dashed-border" GridPane.columnIndex="1" GridPane.margin="$x2" GridPane.rowIndex="2">
                  <children>
                    <Label id="label4" prefWidth="130.0" text="Message delayer">
                      <graphic>
                        <ImageView id="emptyImageView1" fitHeight="32.0" fitWidth="32.0" preserveRatio="true">
                          <image>
                            <Image url="@_mdel.png" preserveRatio="false" smooth="false" />
                          </image>
                        </ImageView>
                      </graphic>
                    </Label>
                    <Button id="button1" maxHeight="999.0" maxWidth="999.0" prefHeight="999.0" prefWidth="999.0" styleClass="add-button" text="New" VBox.margin="$x3" VBox.vgrow="ALWAYS" />
                  </children>
                </VBox>
                <VBox id="vBox2" prefHeight="321.0" prefWidth="150.0" styleClass="with-dashed-border" GridPane.columnIndex="2" GridPane.margin="$x2" GridPane.rowIndex="2">
                  <children>
                    <Label id="label4" prefWidth="130.0" text="Limiter">
                      <graphic>
                        <ImageView id="emptyImageView1" fitHeight="32.0" fitWidth="32.0" preserveRatio="true">
                          <image>
                            <Image url="@_limiter.png" preserveRatio="false" smooth="false" />
                          </image>
                        </ImageView>
                      </graphic>
                    </Label>
                    <Button id="button1" maxHeight="999.0" maxWidth="999.0" prefHeight="999.0" prefWidth="999.0" styleClass="add-button" text="New" VBox.margin="$x3" VBox.vgrow="ALWAYS" />
                  </children>
                </VBox>
                <VBox id="vBox2" prefHeight="321.0" prefWidth="150.0" styleClass="with-dashed-border" GridPane.columnIndex="3" GridPane.margin="$x2" GridPane.rowIndex="0" GridPane.rowSpan="4">
                  <children>
                    <Label id="label4" prefWidth="9999.0" text="Statistic collectors">
                      <graphic>
                        <ImageView id="emptyImageView1" fitHeight="32.0" fitWidth="32.0" preserveRatio="true">
                          <image>
                            <Image url="@_scol.png" preserveRatio="false" smooth="false" />
                          </image>
                        </ImageView>
                      </graphic>
                    </Label>
                    <Button id="button1" prefWidth="999.0" styleClass="add-button" text="New" VBox.margin="$x3" />
                  </children>
                </VBox>
                <HBox id="hBox1" alignment="CENTER" prefHeight="100.0" prefWidth="200.0" spacing="5.0" GridPane.columnIndex="1" GridPane.columnSpan="2" GridPane.rowIndex="0">
                  <children>
                    <Label id="label2" graphicTextGap="0.0" styleClass="field-label" text="Name">
                      <HBox.margin>
                        <Insets top="7.0" />
                      </HBox.margin>
                    </Label>
                    <TextField id="textField1" maxHeight="28.0" minHeight="28.0" prefHeight="28.0" prefWidth="200.0" text="Empty Test" HBox.hgrow="ALWAYS" />
                  </children>
                  <padding>
                    <Insets bottom="5.0" left="5.0" right="5.0" top="5.0" fx:id="x3" />
                  </padding>
                </HBox>
                <VBox id="vBox3" prefHeight="200.0" prefWidth="100.0" GridPane.columnIndex="1" GridPane.rowIndex="3" />
              </children>
              <columnConstraints>
                <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
                <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
                <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
                <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
              </columnConstraints>
              <rowConstraints>
                <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
                <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
                <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
                <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
              </rowConstraints>
            </GridPane>
          </children>
        </VBox>
        <VBox id="vBox4" alignment="CENTER" styleClass="with-dashed-border" GridPane.columnIndex="0" GridPane.halignment="CENTER" GridPane.hgrow="ALWAYS" GridPane.rowIndex="4" GridPane.valignment="CENTER" GridPane.vgrow="ALWAYS">
          <children>
            <TableView id="tableView1" prefHeight="54.0" prefWidth="837.0" VBox.vgrow="ALWAYS">
              <columns>
                <TableColumn prefWidth="75.0" text="Column X" />
                <TableColumn prefWidth="75.0" text="Column X" />
              </columns>
            </TableView>
          </children>
          <GridPane.margin>
            <Insets bottom="10.0" left="10.0" right="10.0" top="10.0" fx:id="x2" />
          </GridPane.margin>
        </VBox>
      </children>
      <columnConstraints>
        <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
      </columnConstraints>
      <rowConstraints>
        <RowConstraints maxHeight="38.0" minHeight="38.0" prefHeight="38.0" vgrow="NEVER" />
        <RowConstraints maxHeight="32.0" minHeight="32.0" prefHeight="32.0" vgrow="NEVER" />
        <RowConstraints maxHeight="100.0" minHeight="100.0" prefHeight="100.0" vgrow="SOMETIMES" />
        <RowConstraints vgrow="SOMETIMES" />
        <RowConstraints maxHeight="100.0" prefHeight="100.0" valignment="CENTER" vgrow="ALWAYS" />
      </rowConstraints>
    </GridPane>
  </children>
  <stylesheets>
    <URL value="@_style.css" />
    <URL value="@../_style.css" />
  </stylesheets>
</AnchorPane>

Discern

Answer 1

Update 2023

JavaFX 20 contains numerous improvements to column resize logic and new resize polices which can be applied.

Consult the JavaFX 20 TableView documentation sections on various RESIZE_POLICY types for more details.

Update

New features in the JavaFX 2.2+ releases have rendered this answer obsolete when applied with an FXML document.

An FXML based solution which uses new FXML features to allow the column size to be set via FXML is provided in: FXML set TableView column resize policy.

<TableView fx:id="tableView" layoutX="110.0" layoutY="78.0" prefHeight="200.0" prefWidth="396.0">
    <columnResizePolicy><TableView fx:constant="CONSTRAINED_RESIZE_POLICY"/></columnResizePolicy>
    <columns>
        <TableColumn prefWidth="75.0" text="Column X" />
        <TableColumn prefWidth="75.0" text="Column X" />
    </columns>
</TableView>

If you are not using FXML the TableView's resize policy can still be set by code as defined in this answer:

tableView.setColumnResizePolicy(TableView.CONSTRAINED_RESIZE_POLICY);

---

In your FXML, you have defined the preferred width of the table to 837, and the preferred width of each column to 75. By default, the JavaFX column resizing policy will keep the columns at their preferred widths. You aren't going to get the table columns filling the width of your entire table unless you either set a new column resizing policy or set the sum of the preferred widths of all of your columns to add up to your table width.

JavaFX does provide a mechanism to modify the default column resizing policy. By setting the column resize policy to a CONSTRAINED_RESIZE_POLICY, the sum of the widths of every column will be constrained to fill the width of the tableview - even if the tableview is resized or individual columns are resized. This is likely the behaviour which you desire.

While there may be a way to set a CONSTRAINED_RESIZE_POLICY on a tableView from FXML, I am not aware of one (though my skills in fxml are rudimentary - so perhaps somebody more informed can accomplish the configuration using pure fxml).

What you can do is define a controller for your fxml file and then configure the resize policy in the controller. The following code demonstrates a complete example (written against the JavaFX 2.2b17 preview).

FXML file:

<?xml version="1.0" encoding="UTF-8"?>

<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.paint.*?>

<AnchorPane id="AnchorPane" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns:fx="http://javafx.com/fxml" fx:controller="tableview.TableViewController">
  <children>
    <TableView fx:id="tableView" layoutX="110.0" layoutY="78.0" prefHeight="200.0" prefWidth="396.0">
      <columns>
        <TableColumn prefWidth="75.0" text="Column X" />
        <TableColumn prefWidth="75.0" text="Column X" />
      </columns>
    </TableView>
  </children>
</AnchorPane>

Controller class:

package tableview;

import java.net.URL;
import java.util.ResourceBundle;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.TableView;

/* controller class for the tableview fxml definition */
public class TableViewController implements Initializable {
  @FXML //  fx:id="tableView"
  private TableView<?> tableView; // Value injected by FXMLLoader

  @Override // This method is called by the FXMLLoader when initialization is complete
  public void initialize(URL fxmlFileLocation, ResourceBundle resources) {
    assert tableView != null : "fx:id=\"tableView\" was not injected: check your FXML file 'tableview.fxml'.";
    
    // initialize your logic here: all @FXML variables will have been injected
    tableView.setColumnResizePolicy(TableView.CONSTRAINED_RESIZE_POLICY);
  }
}

Application class:

package tableview;

import java.io.IOException;
import java.net.URL;
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Scene;
import javafx.scene.layout.AnchorPane;
import javafx.stage.Stage;

/** Main application class for tableview fxml demo application */
public class TableViewApplication extends Application {
  public static void main(String[] args) { launch(args); }
  @Override public void start(Stage stage) throws IOException {
    AnchorPane layout = FXMLLoader.load(
      new URL(TableViewApplication.class.getResource("tableview.fxml").toExternalForm())
    );
    stage.setScene(new Scene(layout));
    stage.show();
  }
}

Lippmann

thank you very much @Lippmann you were the first and only place where i found the way to control the re-sizing of the columns. if i come across a way to control the table from fxml i will post it here. – Discern

Seems strange to me to add UI configuration in the controller. You can do the same by adding an XML tag in the .fxml file as demonstrated in this link: #14096208 – Graviton

Thanks for the link gabuzo, I updated by answer to reflect the new JavaFX 2.2 functionality which now allows you to define the table's column resize policy from FXML. – Lippmann

Nice, Also work for a TreeTableView: : <TreeTableView fx:id="eltTree" > <columnResizePolicy><TreeTableView fx:constant="CONSTRAINED_RESIZE_POLICY"/></columnResizePolicy> – Adventurism

Answer 2

It is not currently possible to set a CONSTRAINED_RESIZE_POLICY on a tableView from FXML :

https://forums.oracle.com/forums/thread.jspa?threadID=2337733

Anomie

As of the JavaFX 2.2 release, it is now possible to set a CONSTRAINED_RESIZE_POLICY on a tableView from FXML (see my updated answer for the syntax). – Lippmann

Answer 3

In case you use JavaFX GUI builder "SceneBuilder 2.0" - use TableView property ColumnResizePolicy "constrained-resize" value.

Velate