Fit textfield width when column is resized - dynamic

Question

I have a treeTableView and in its header I have a Label and Textbox. I want the width of textbox to increase also when the column is increased by resizing of it.
How to do that?
How to get dynamic column width? Or how to set dynamic width to textbox as per column?
Code:
<TableView fx:id="tableView" layoutX="1.0" layoutY="1.0"
minHeight="580.0" prefWidth="434.0" AnchorPane.bottomAnchor="0.0"
AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0"
AnchorPane.topAnchor="0.0" HBox.hgrow="ALWAYS" VBox.vgrow="ALWAYS">
<columns>
<TableColumn style="-fx-font-family: Calibri; -fx-font-size: 11px;" text="MessageId">
<cellValueFactory>
<PropertyValueFactory property="messageId" />
</cellValueFactory>
</TableColumn>
<TableColumn prefWidth="110.0" style="-fx-font-family: Calibri; -fx-font-size: 11px;" text="Digest Reference">
<cellValueFactory>
<PropertyValueFactory property="digestReference" />
</cellValueFactory>
</TableColumn>
<TableColumn prefWidth="115.0" style="-fx-font-family: Calibri; -fx-font-size: 11px;" text="Message Reference">
<cellValueFactory>
<PropertyValueFactory property="messageRef" />
</cellValueFactory>
</TableColumn>
<TableColumn prefWidth="115.0" style="-fx-font-family: Calibri; -fx-font-size: 11px;" text="Deal Number">
<cellValueFactory>
<PropertyValueFactory property="dealNo" />
</cellValueFactory>
</TableColumn>
<TableColumn style="-fx-font-family: Calibri; -fx-font-size: 11px;" text="Digest Value">
<cellValueFactory>
<PropertyValueFactory property="digestValue" />
</cellValueFactory>
</TableColumn>
<TableColumn prefWidth="100.0" style="-fx-font-family: Calibri; -fx-font-size: 11px;" text="Updated Date Time">
<cellValueFactory>
<PropertyValueFactory property="updateTime" />
</cellValueFactory>
</TableColumn>
</columns>
<columnResizePolicy>
<TableView fx:constant="CONSTRAINED_RESIZE_POLICY" />
</columnResizePolicy>
</TableView>
JAVA Code:
for (TableColumn<NonRepudiation, ?> tableColumn : tableView.getColumns()) {
double width = tableColumn.getWidth();
VBox vBox = new VBox();
vBox.autosize();
vBox.setPrefWidth(tableColumn.getMaxWidth());
double width = tableColumn.getWidth();
VBox vBox = new VBox();
vBox.autosize();
vBox.setPrefWidth(tableColumn.getMaxWidth());
HBox lableBox = new HBox();
lableBox.setPrefWidth(width);
lableBox.getStyleClass().add("labelBoxTxt");
StackPane HL = new StackPane();
HL.getStyleClass().add("greyBorder");
Label label = new Label(tableColumn.getText());
label.setPrefWidth(width);
label.alignmentProperty().setValue(Pos.TOP_LEFT);
TextField textField = new TextField();
textField.setPrefWidth(width);
textField.textProperty().addListener(filterTable(tableColumn));
HBox textInputBox = new HBox();
textInputBox.getChildren().add(textField);
lableBox.getChildren().add(label);
HBox.setMargin(textField, new Insets(3,3,3,0));
vBox.getChildren().addAll(lableBox, HL, textInputBox);
tableColumn.setGraphic(vBox);
}

Answer 1

Basically you need to use HBox.setHgrow() method. Here refactored code of yours:
for ( TableColumn tableColumn : tableView.getColumns() ) {
// build label
Label label = new Label( tableColumn.getText() );
HBox lableBox = new HBox( label );
lableBox.getStyleClass().add( "labelBoxTxt" );
lableBox.setAlignment( Pos.CENTER );
// build hor line
StackPane HL = new StackPane();
HL.getStyleClass().add( "greyBorder" );
// build text field
TextField textField = new TextField();
HBox.setHgrow( textField, Priority.ALWAYS );
HBox.setMargin( textField, new Insets( 3 ) );
HBox textInputBox = new HBox( textField );
// put together
VBox vBox = new VBox( lableBox, HL, textInputBox );
tableColumn.setText( "" );
tableColumn.setGraphic( vBox );
}

Answer 2

I found the solution.
Set a css class to your talbe view.
<TableView styleClass="k-table-view"
Then add css class to vbox
vBox.getStyleClass().add("k-column-graphic");
Add css rule
.k-table-view .column-header > .label {
-fx-content-display: graphic-only;
}
.k-column-graphic {
-fx-alignment: center-left;
}
I am having dynamic width for the graphic.