JavaFX TableView text alignment

Question

As you can see on the picture the text alignment for each colum is set to left alignment. Is there any way to change this? So far I've tried within my CSS file:

#Cols{
    text-align: right;
}

I have also tried:

#Cols{
    -fx-text-alignment: right;
}

Does anyone know how I can change the alignment to right?

Desiccate

is it an ID or a CLASS ? You may also try text-align: right !important; – Examinee

@HamZaDzCyberDeV should be an id i used the: col.setId("Cols"); – Desiccate

@Marc Did you by any chance find out how to left-justify the column HEADER with java code ("Programmatically" as they say) – Cellini

Here's one way to do it: link – Cellini

Answer 1

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;
            }
        });

Royster

sadly this did not change it :S – Desiccate

This worked! how would i go around making it so that the legend (the test in my picture) does not move? – Desiccate

Answer 2

A quick fix is to select the column in the SceneBuilder, and just add the property to the style field

Crosslink

Answer 3

Even this is two years old, here is another answer. For every table column exists a default css style class .table-column, so if you want to change the whole table columns to justify center right it is only necessary to put this in a style sheet or inline style:

.table-column {
  -fx-alignment: CENTER_RIGHT;
}

and if you got an column that should be aligned in an other way, like a row header, no problem at all, attach an id to this column like rowHeading and write in your stylesheet or inline style:

#rowHeading {
  -fx-alignment: CENTER_LEFT;
}

and it should be left centered. No need for huge coding.

Whinstone

Depending on the specificity of your CSS selector, you may need to use -fx-alignment: CENTER_RIGHT !important; to get it to listen. – Chloromycetin

Answer 4

I used

cell.setAlignment(Pos.CENTER_RIGHT);

instead of

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

But if there's CSS for this, which can't I put fx:id on a column and then put the alignment for it in a CSS file? That is a lot of code above just to set column alignment.

Respondent

I agree that you should be able to set a css id or class for the column then use an appropriate css selector to select cells for styling - but it doesn't work (which I think is a bug). I created an issue tracker entry for this: RT-29381 Style classes set on table columns are ignored – Institutional

Answer 5

i tried this and it works

@FXML private TableColumn<BookingData,String>colClientMobile;

//Some code
colClientMobile.setCellFactory(new Callback<TableColumn<BookingData, String>, TableCell<BookingData, String>>() {
        @Override
        public TableCell<BookingData, String> call(TableColumn<BookingData, String> param) {
            return new TableCellFormat();
        }
    });

private class TableCellFormat extends TableCell<BookingData, String>{
    @Override
    protected void updateItem(String item, boolean empty) {
        super.updateItem(item, empty); 
        this.setText(item);
        this.setAlignment(Pos.CENTER_RIGHT);
    }
}

Downthrow

If i try to use this code with an editable column, it does not work. Either editing works or alighment. Can you please provide a code example to have editable column with text aligned to pos.CENTER_RIGHT – Lansing

Answer 6

Couldn't be simpler.

for a single column (or any selection)...

declare a styleClass in your fxml

<TableColumn  styleClass="centered-table-column" />

then apply the css

.centered-table-column{
    -fx-alignment: center;
}

or for all columns

.table-column{
    -fx-alignment: center;
}

Klaxon