TableColumn.setGraphic под заголовком столбца

Question

Когда я использую следующий код для добавления TextField в каждую колонку:

 tableColumn.setGraphic(textField); 

текстовое поле получает расположено на левой стороне этикетки, делая столбцы выглядеть следующим образом:

Если я перетащить столбец шириной, я вижу, что этикетка еще там

Есть ли способ, чтобы колонка использовала оригинальную метку и помещала текстовое поле под ним? Я попытался добавить свой собственный ярлык в VBox вместе с текстовым полем, но тогда вы потеряете функцию автоматической ширины.

После ответа James_D метка верна, но стиль столбца все еще немного странный?

MVCE:

public class TableViewTEST extends Application { 

List<TableColumn> listOfColumns = new ArrayList(); 
TableView tableView = new TableView(); 


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


public void buildData() { 

    TableColumn myColumn = new TableColumn("asd"); 
    TableColumn myColumn2 = new TableColumn("qq"); 
    listOfColumns.add(myColumn); 
    listOfColumns.add(myColumn2); 
    //add columns dynamically 
    int counter = 0; 
    for (TableColumn col : listOfColumns) { 
     final int j = counter; 

    col.setCellValueFactory(new Callback<TableColumn.CellDataFeatures<MyTableRow, String>, ObservableValue<String>>() { 
      public ObservableValue<String> call(TableColumn.CellDataFeatures<MyTableRow, String> param) { 
       return new SimpleStringProperty(param.getValue().rowData.get(j)); 

      } 
     }); 

     counter++; 
     TextField txtField = new TextField(); 
     VBox vbox = new VBox(); 
     vbox.getChildren().add(txtField); 
     col.setGraphic(vbox); 
     tableView.getColumns().add(col); 

    } 

    tableView.setRowFactory(tv -> { 

     MyTableRow rowz = new MyTableRow(); 

     rowz.setOnMouseClicked(event -> { 
      if (event.getClickCount() == 2 && (!rowz.isEmpty())) { 

      } 
     }); 

     return rowz; 

    }); 

} 

@Override 
public void start(Stage stage) throws Exception { 
    FlowPane flowpane = new FlowPane(); 
    flowpane.getChildren().add(tableView); 

    buildData(); 
    Scene scene = new Scene(flowpane); 

    scene.getStylesheets().add(TableViewTEST.class.getResource("css.css").toExternalForm()); 
    stage.setScene(scene); 
    stage.show(); 

} 

} 

Answer 1

Используйте внешний файл CSS со следующим:

.table-column .label { 
    -fx-content-display: bottom ; 
} 

Вот полный пример:

import java.util.List; 

import javafx.application.Application; 
import javafx.beans.property.ReadOnlyStringWrapper; 
import javafx.scene.Scene; 
import javafx.scene.control.TableColumn; 
import javafx.scene.control.TableView; 
import javafx.scene.control.TextField; 
import javafx.scene.layout.BorderPane; 
import javafx.stage.Stage; 

public class TableWithTextFieldColumnHeaders extends Application { 

    @Override 
    public void start(Stage primaryStage) { 
     TableView<List<String>> table = new TableView<>(); 

     table.getColumns().add(createColumn("A", 0)); 
     table.getColumns().add(createColumn("B", 1)); 

     BorderPane root = new BorderPane(table); 
     Scene scene = new Scene(root, 600, 400); 
     scene.getStylesheets().add("table-text-field.css"); 
     primaryStage.setScene(scene); 
     primaryStage.show(); 
    } 

    private TableColumn<List<String>, String> createColumn(String title, int index) { 

     TableColumn<List<String>, String> col = new TableColumn<>(title); 

     col.setCellValueFactory(cellData -> 
      new ReadOnlyStringWrapper(cellData.getValue().get(index))); 

     TextField textField = new TextField(); 
     col.setGraphic(textField); 

     double textFieldPadding = 8 ; 
     textField.prefWidthProperty().bind(
       col.widthProperty().subtract(textFieldPadding)); 

     return col ; 
    } 

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

с с сс файл таблицы текста field.css:

.table-column .label { 
    -fx-content-display: bottom ; 
}