Color of filtericons in tableview

[HansITChange]

Is it possible to change the color of the filter icons in a TableView ?
And related to this: how can the skin of the MFXFilterPane be changed ? Putting ".mfx-filter-pane" into a custom css seems to have no effect.

[stefanofornari]

Hi,
I faced a similar problem recently. It is not straightforward, I do not know if because my lack of experience on FX or due to the use of hardcoded userAgentStylesheet (I suspect the latter).

Here an example of how to change the filter icons:

.mfx-table-view .default-footer .mfx-icon-wrapper .mfx-ripple-generator {
	-mfx-ripple-radius: 18;
        -mfx-ripple-color: -ew-primary-color;
}

However in order to the above to be applied from my own .css stylesheet, I needed to resking MFXPaginatedTableView:

public class EasyWalletTableView<T> extends MFXPaginatedTableView<T> {
    @Override
    protected Skin<?> createDefaultSkin() {
        return new EasyWalletTableViewSkin<>(this, rowsFlow);
    }
}

public class EasyWalletTableViewSkin<T> extends SkinBase<MFXTableView<T>> {
...
public EasyWalletTableViewSkin(MFXPaginatedTableView<T> tableView, SimpleVirtualFlow<T, MFXTableRow<T>> rowsFlow) {
        super(tableView);
        this.rowsFlow = rowsFlow;

        columnsContainer = new HBox();
        columnsContainer.getStyleClass().add("columns-container");
        Bindings.bindContent(columnsContainer.getChildren(), tableView.getTableColumns());

        filterPane = new MFXFilterPane<>();
        Bindings.bindContent(filterPane.getFilters(), tableView.getFilters());

        footer = buildFooter();

        container = new VBox(columnsContainer, rowsFlow);
        if (tableView.isFooterVisible()) {
            container.getChildren().add(footer);
        }

        filterDialog = MFXDialogs.filter(filterPane)
                .setShowMinimize(false)
                .setShowClose(false)
                .setShowAlwaysOnTop(false)
                .toStageDialogBuilder()
                .setDraggable(true)
                .setOwnerNode(container)
                .setCenterInOwnerNode(true)
                .initOwner(tableView.getScene().getWindow())
                .initModality(Modality.APPLICATION_MODAL)
                .get();
        filterDialog.setOnShown(event -> filterDialog.toFront());

        MFXGenericDialog dialog = (MFXGenericDialog)filterDialog.getContent();

        // YOUR CSS IN HERE
        dialog.getStylesheets().add(
          EasyWalletMain.class.getResource("yourcss.css").toExternalForm()
        );
        ////////

        MFXButton applyButton =  new MFXButton(Labels.LABEL_BUTTON_APPLY);
        applyButton.getStyleClass().add("primary-button");

        MFXButton refreshButton =  new MFXButton(Labels.LABEL_BUTTON_RESET);
        dialog.addActions(
            Map.entry(refreshButton, e -> {
                filterPane.getOnReset().handle(e);
            }),
            Map.entry(applyButton, e -> {
                filterPane.getOnFilter().handle(e);
            })
        );

        dialog.onKeyTypedProperty().setValue((event) -> {
            if (event.getCharacter().charAt(0) == 27) {  // ESC
                filterDialog.close();
            }
        });

        getChildren().setAll(container);

        rowsFlow.setMinHeight(Region.USE_PREF_SIZE);
        rowsFlow.setMaxHeight(Region.USE_PREF_SIZE);

        pagination = new MFXPagination();
        pagination.pagesToShowProperty().bind(tableView.pagesToShowProperty());
        pagination.maxPageProperty().bind(tableView.maxPageProperty());
        pagination.setCurrentPage(tableView.getCurrentPage());
        tableView.currentPageProperty().bindBidirectional(pagination.currentPageProperty());

        container.getChildren().remove(footer);
        container.getChildren().add(buildFooter());

        addListeners();
    }

HTH

[HansITChange]

Ok. Thanks for the help. I'll give it a try...