Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

TableView not correctly sizing at creation/initialization #269

Open
stefanofornari opened this issue Dec 29, 2022 · 2 comments
Open

TableView not correctly sizing at creation/initialization #269

stefanofornari opened this issue Dec 29, 2022 · 2 comments
Labels
enhancement New feature or request

Comments

@stefanofornari
Copy link
Contributor

stefanofornari commented Dec 29, 2022

Describe the bug
MFXTableView does not seem to be correctly sized when created. Startnig a scroll action, it resizes correctly (see attached video).

MRE(Minimal Reproducible Example)

TableMain.fmxl

<?xml version="1.0" encoding="UTF-8"?>

<!--?import ste.w3.easywallet.ui.table.EasyWalletTableView?-->
<?import javafx.geometry.Insets?>
<?import javafx.scene.layout.VBox?>
<?import io.github.palexdev.materialfx.controls.MFXTableView?>

<VBox alignment="CENTER" spacing="5.0" xmlns="http://javafx.com/javafx/19" xmlns:fx="http://javafx.com/fxml/1" fx:controller="ste.w3.easywallet.ui.table.TableMainController">
    <padding>
        <Insets bottom="15.0" />
    </padding>
    <children>
        <MFXTableView fx:id="table" />
    </children>
</VBox>

TableMain.java

public class TableMain extends Application {

    @Override
    public void start(Stage stage) throws Exception {
        stage.setTitle("TableView Test");
        stage.setWidth(800);

https://user-images.githubusercontent.com/43138/209996110-22ad600a-210b-416a-8f24-653b657586b9.mp4


        stage.setHeight(600);
        stage.getIcons().add(new Image(TableMain.class.getResourceAsStream("/images/easy-wallet-icon-64x64.png")));
        stage.getIcons().add(new Image(TableMain.class.getResourceAsStream("/images/easy-wallet-icon-128x128.png")));

        Scene scene = new Scene(
            FXMLLoader.load(TableMain.class.getResource("/fxml/TableMain.fxml"))
        );

        stage.setScene(scene);

        stage.show();
    }
}

TableMainController.java

public class TableMainController {

    @FXML
    protected MFXTableView table;

    public TableMainController() {
    }

    @FXML
    public void initialize() {
        table.autosizeColumnsOnInitialization();
        setupTable();
    }

    private void setupTable() {
        MFXTableColumn<Transaction> whenColumn = new MFXTableColumn<>("when", false, Comparator.comparing(Transaction::when));
        MFXTableColumn<Transaction> currencyColumn = new MFXTableColumn<>("currency", false, Comparator.comparing(Transaction::currency));
        MFXTableColumn<Transaction> amountColumn = new MFXTableColumn<>("amount", false, Comparator.comparing(Transaction::amount));
        MFXTableColumn<Transaction> fromColumn = new MFXTableColumn<>("from", false, Comparator.comparing(Transaction::from));

        whenColumn.setRowCellFactory(transaction -> new MFXTableRowCell<>(Transaction::when));
        currencyColumn.setRowCellFactory(transaction -> new MFXTableRowCell<>(Transaction::currency));
        amountColumn.setRowCellFactory(transaction -> new MFXTableRowCell<>(Transaction::amount));
        fromColumn.setRowCellFactory(transaction -> new MFXTableRowCell<>(Transaction::from));

        table.getTableColumns().addAll(whenColumn, currencyColumn, amountColumn, fromColumn);
        table.getFilters().addAll(
                new StringFilter<>("when", Transaction::whenZ),
                new StringFilter<>("currency", Transaction::currency),
                new StringFilter<>("amount", Transaction::amount),
                new StringFilter<>("from", Transaction::from)
        );

        ObservableList<Transaction> data = FXCollections.observableArrayList();

        for (int i = 1; i <= 50; ++i) {
            data.add(
                    new Transaction(
                            Instant.parse(String.format("2022-11-10T10:%02d:00Z", i)),
                            "USD",
                            String.format("%1$02d.%1$02d", i),
                            String.format("12345678901234567890123456789012345678%02d", i),
                            String.format("hahs%02d", i)
                    )
            );
        }
        table.setItems(data);
    }

    private class Transaction {

        public final String hash, from, amount, currency;
        public final Instant when;

        public Transaction() {
            this(null, null, null, null, null);
        }

        public Transaction(Instant when, String currency, String amount, String from, String hash) {
            this.when = when;
            this.currency = currency;
            this.amount = amount;
            this.from = from;
            this.hash = hash;
        }

        public Instant when() {
            return when;
        }

        public String currency() {
            return currency;
        }

        public String amount() {
            return amount;
        }

        public String from() {
            return from;
        }

        public String hash() {
            return hash;
        }

        public String whenZ() {
            return when.toString();
        }
    }
}

To Reproduce
Run the MRE

Expected behavior
The table size and position is correct since the beginning.

Screenshots
see video...

bug.tableview.mp4
@stefanofornari stefanofornari changed the title TableView not correctly sizing at the begining TableView not correctly sizing at creation/initialization Dec 29, 2022
@stefanofornari
Copy link
Contributor Author

BTW, setting -fx-min-width fixes the problem, but I guess it should calculated if not provided...

@palexdev
Copy link
Owner

Yes, this is a know issue. I'm a bit ashamed of the current implementation of the TableView not gonna lie.
The good news is that with the work that has been done recently on VirtualizedFX I will be able to implement a much much better and more stable table soon

@palexdev palexdev added the enhancement New feature or request label Dec 31, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

2 participants