Styling TableView cell with ikonli

[barmat80]

Hello mkpaz, I have some issues with tableview styling and I was wondering if you can provide some help.

I'm trying to build a tableview with an icon in a cell, using ikonli package. I would also style that icon with a color based on a status variabile in the pojo class. I can only get a white icon (using nord-dark theme), no color is set.

In the Sampler App (2.0) there is no example of this.

My code:

Pojo class

public FontIcon getStatusFontIcon() {
    statusFI = new FontIcon(Material2AL.LENS);
    statusFI.getStyleClass().add(status == 0 ? Styles.ACCENT : Styles.DANGER);
    return statusFI;
}

Controller class

@FXML
private TableColumn<AccountBalance, FontIcon> colStatus;

...

colStatus.setCellValueFactory(new PropertyValueFactory<>("statusFI"));
colStatus.setCellFactory(FontIconTableCell.forTableColumn());

Am I missing something or doing wrong?

Thanks in advance. Mattia

[mkpaz]

Yes, that's not correct. FontIconTableCell uses the Ikon enum value, not the FontIcon glyph. You will need to create a custom cell factory for this purpose. So, you can either reuse the FontIconTableCell source code and place the styling logic inside it, or if you're already using FontIcon from pojo, just set it as the cell graphic node.

[barmat80]

I share my solution, if it can be useful for someone.

Code to set the column

colStatus.setCellFactory(column -> new ImageTableCell<?>());

Class ImageTableCell

public class ImageTableCell<T> extends TableCell<T, Integer> {

    @Override
    public void updateItem(Integer item, boolean empty) {
        super.updateItem(item, empty);
        if (empty) {
            setGraphic(null);
        } else {
            FontIcon fi = new FontIcon(Material2AL.LENS);
            String style = Styles.SUCCESS;
            String tooltipStr = "Completato";
            switch (Integer.parseInt(item.toString())) {
                case 0:
                    style = Styles.ACCENT;
                    break;
                case 1:
                    style = Styles.WARNING;
                    break;
                case 2:
                    style = Styles.DANGER;
                    break;
            }

            Label lbl = new Label();
            lbl.getStyleClass().addAll("ikonli-font-icon", style);
            lbl.setGraphic(fi);

            setGraphic(lbl);

            setStyle("-fx-alignment: CENTER;");
        }
    }
}