Javafx Tableview Text Alignment

JavaFX TableView text alignment

Alignment of all table columns:

Starting from JavaFX-8, you can use newly defined CSS selector table-column,

#my-table .table-column {
  -fx-alignment: CENTER-RIGHT;
}

For JavaFX-2,
To achieve this define a CSS selector:

#my-table .table-cell {
    -fx-alignment: CENTER-RIGHT;
     /* The rest is from caspian.css */

    -fx-skin: "com.sun.javafx.scene.control.skin.TableCellSkin";
    -fx-padding: 0.166667em; /* 2px, plus border adds 1px */

    -fx-background-color: transparent;
    -fx-border-color: transparent -fx-table-cell-border-color transparent transparent;
    -fx-border-width: 0.083333em; /* 1 */
    -fx-cell-size: 2.0em; /* 24 */
    -fx-text-fill: -fx-text-inner-color;
}

and set the id of the tableview.

tableView.setId("my-table");

Alignment of single table column:

Starting from JavaFX-8, you can apply the styling directly to TableColumn,

firstTextCol.setStyle( "-fx-alignment: CENTER-RIGHT;");

or with css,

firstTextCol.getStyleClass().add( "custom-align");

where

.custom-align { 
  -fx-alignment: center-right; 
} 

For JavaFX-2,

To apply different alignments to different columns you need to set cell factory for that column. For instance assume that the 1st column in your table should be aligned to the left while other columns use the table's default alignment (CENTER-RIGHT in your case).

firstTextCol.setCellFactory(new Callback<TableColumn, TableCell>() {
            public TableCell call(TableColumn p) {
                TableCell cell = new TableCell<Person, String>() {
                    @Override
                    public void updateItem(String item, boolean empty) {
                        super.updateItem(item, empty);
                        setText(empty ? null : getString());
                        setGraphic(null);
                    }

                    private String getString() {
                        return getItem() == null ? "" : getItem().toString();
                    }
                };

                cell.setStyle("-fx-alignment: CENTER-LEFT;");
                return cell;
            }
        });

javafx TableView left justify single column

I suggest you to try the following: cargoTableTypeCol.setStyle("-fx-alignment: CENTER-LEFT;");

JavaFX TableView - Center the Content of a Table Column

CellValueFactory and CellFactory are two different things.
CellValueFactory is used to specify where do the values come from, while CellFactory specifies how do they get displayed.

Use both at the same time. But in the setCellFactory code you should not do setText . Setting the text will be taken care of by the TableCell code inside the updateItem() method. This method will use the value that is provided from the ' cellValueFactory ' and take care of setting it inside its own label.

tc_customer.setCellFactory(
   new Callback< TableColumn<TvAccounting, String>,
                 TableCell<TvAccounting, String>>()
   {
      @Override public TableCell<TvAccounting, String>
      call(TableColumn<TvAccounting, String> p) {
         TableCell<TvAccounting, String> tc =
            new TableCell<TvAccounting, String>();
         tc.setAlignment(Pos.CENTER);
         // tc.setText("SOMETEXT"); This line should be removed
         return tc;
      }
   }
);

JavaFX: Different types of alignment in one column of TableView

Ok, I got a working example - It seems, setAlignment() does the trick:

@Override
public void start(Stage primaryStage) {

    ObservableList<String> data = FXCollections.observableArrayList();
    IntStream.range(0, 1000).mapToObj(Integer::toString).forEach(data::add);

    TableView<String> table = new TableView<String>(data);

    TableColumn<String, String> column = new TableColumn<String, String>("test");
    column.setCellFactory(c -> new TableCell<String,String>(){

        @Override
        protected void updateItem(String item, boolean empty) {
            if(empty) {
                setText(null);
            }
            else {
                setText(item);
                if(getIndex() % 2 == 0) {
                    setAlignment(Pos.CENTER_LEFT);
                }
                else if(getIndex() % 3 == 0) {
                    setAlignment(Pos.CENTER_RIGHT);
                }
                else {
                    setAlignment(Pos.CENTER);
                }
            }
        }
    });
    column.setCellValueFactory(c -> new SimpleStringProperty(c.getValue()));
    table.getColumns().add(column);

    Scene scene = new Scene(new BorderPane(table), 400, 400);
    primaryStage.setScene(scene);
    primaryStage.show();
}

JavaFx how to align only one column-header in tableview?

You can do that now with recent versions of JavaFX.

Java 1.7

This worked for me with Java: 1.7.0_45 / JavaFX: 2.2.45-b18). It should be a recent version because it requires RT-14909

The column-header will automatically get the same "Id" as the TableColumn! Therefore your TableColumn(s) need an (CSS-) Id that you can either set in Scenebuilder for the TableColumn directly or use some code like tableColumn.setId("my-special-column").

Then you can style the column-header directly using the Id:

.table-view .column-header#my-special-column .label {
  -fx-alignment: CENTER_RIGHT;
  -fx-text-fill: red;
}

PS: This took me some frustrating 1,5 hours to figure out. Hope this helps others now!

Java 8

For reasons that I don't understand the id trick does not work for Java 8 anymore. However, what we can do is to set a styleClass for the column directly (which internally is propagated to the TableColumnHeader) and change this styleClass in the css file:

In Java:

firstNameCol.getStyleClass().add("my-special-column-style");

And in CSS:

.my-special-column-style .label {
  -fx-alignment: CENTER_RIGHT;
  -fx-text-fill: red;
}

Works for me here with jdk1.8.0_05 on Mac OS X.

---

Related Topics