How to load the same data in two different TableViews on single screen from the same class model (JavaFX)

Question

I have two TableViews (tableA & tableB) on the same screen (they have the same controller.java)

@FXML TableView <Product> tableA;
@FXML TableView <Product> tableB;

and I want to add the same data in both without repeating :

Product class model

Initialize all tablecolums for both tables (I don't know if this works without initialization)

productName.setCellValueFactory(new PropertyValueFactory<Product, String>("productName"));
    
price.setCellValueFactory(new PropertyValueFactory<Product, Double>("price"));

/* ... */

Is there a solution using IDs (tableA, tableB) to access the data???

Do I have to give an ID for each TableColumn?

Controller.java

@FXML TableView <Product> tableA;
@FXML TableView <Product> tableB;

@FXML TableColumn <Product, String> productName;
@FXML TableColumn <Product, Double> price;
@FXML TableColumn <Product, Integer> quantity;

ObservableList<Product> tableData;

private void intializeTableColumns() {
    
    tableData = FXCollections.observableArrayList();
    
    productName.setCellValueFactory(new PropertyValueFactory<Product, String>("productName"));
    
    price.setCellValueFactory(new PropertyValueFactory<Product, Double>("price"));

    quantity.setCellValueFactory(new PropertyValueFactory<Product, Integer>("quantity"));
    

}
private void insertInTableData() {
    
    Product product = new Product();
    
    /* ...*/
    
    tableData.addAll(product);
   
    /*Add data in both tables */

    tableA.setItems(tableData);
    tableB.setItems(tableData);

file.fxml

 <TableView fx:id="tableA" prefHeight="200.0" styleClass="table-2">
         <columns>
             <TableColumn maxWidth="-Infinity" minWidth="50.0" prefWidth="50.0" text="N°" />
             <TableColumn prefWidth="75.0" text="Product" />
             <TableColumn prefWidth="75.0" text="Price" />
             <TableColumn prefWidth="75.0" text="Quantity" />
         </columns>
         <columnResizePolicy><TableView fx:constant="CONSTRAINED_RESIZE_POLICY" /></columnResizePolicy>
</TableView>
<TableView fx:id="tableB" prefHeight="200.0" styleClass="table-2">
         <columns>
             <TableColumn maxWidth="-Infinity" minWidth="50.0" prefWidth="50.0" text="N°" />
             <TableColumn prefWidth="75.0" text="Product" />
             <TableColumn minWidth="-Infinity" prefWidth="75.0" text="Price" />
             <TableColumn minWidth="-Infinity" prefWidth="75.0" text="Quantity" />
         </columns>
         <columnResizePolicy><TableView fx:constant="CONSTRAINED_RESIZE_POLICY" /></columnResizePolicy>
</TableView>

Q: "Is there a solution using IDs (tableA, tableB) to access the data???" Why do you need to do that? The IDs are defined as a TableColumn. In MVC, it belongs to the View. To access the data, you directly work with the model class, which is tableData in your case. — user9035826, Jul 27 '23 at 17:10
See: [Why should I avoid using PropertyValueFactory in JavaFX?](https://stackoverflow.com/questions/72437983/why-should-i-avoid-using-propertyvaluefactory-in-javafx). (not related to your synchronized tables issue, just a preferred style for table use in general). — jewelsea, Jul 27 '23 at 20:13

score 4 · Answer 1 · answered Jul 27 '23 at 14:25

Yes you can set same data to both tableViews. Here, you need to provide separate ids to columns to set cellValueFactory for each columns.

Something like..

<TableView fx:id="tableA" prefHeight="200.0" styleClass="table-2">
         <columns>
             <TableColumn maxWidth="-Infinity" minWidth="50.0" prefWidth="50.0" text="N°" />
             <TableColumn fx:id="t1ProductName" prefWidth="75.0" text="Product" />
             <TableColumn fx:id="t1Price" prefWidth="75.0" text="Price" />
             <TableColumn fx:id="t1Quantity" prefWidth="75.0" text="Quantity" />
         </columns>
         <columnResizePolicy><TableView fx:constant="CONSTRAINED_RESIZE_POLICY" /></columnResizePolicy>
</TableView>
<TableView fx:id="tableB" prefHeight="200.0" styleClass="table-2">
         <columns>
             <TableColumn maxWidth="-Infinity" minWidth="50.0" prefWidth="50.0" text="N°" />
             <TableColumn fx:id="t2ProductName" prefWidth="75.0" text="Product" />
             <TableColumn fx:id="t2Price" minWidth="-Infinity" prefWidth="75.0" text="Price" />
             <TableColumn fx:id="t2Quantity" minWidth="-Infinity" prefWidth="75.0" text="Quantity" />
         </columns>
         <columnResizePolicy><TableView fx:constant="CONSTRAINED_RESIZE_POLICY" /></columnResizePolicy>
</TableView>

Controller Code:

@FXML TableColumn <Product, String> t1ProductName;
@FXML TableColumn <Product, Double> t1Price;
@FXML TableColumn <Product, Integer> t1Quantity;
@FXML TableColumn <Product, String> t2ProductName;
@FXML TableColumn <Product, Double> t2Price;
@FXML TableColumn <Product, Integer> t2Quantity;

ObservableList<Product> tableData;

private void intializeTableColumns() {
    
    tableData = FXCollections.observableArrayList();
    
    t1ProductName.setCellValueFactory(new PropertyValueFactory<Product, String>("productName"));
    
    t1Price.setCellValueFactory(new PropertyValueFactory<Product, Double>("price"));

    t1Quantity.setCellValueFactory(new PropertyValueFactory<Product, Integer>("quantity"));

    t2ProductName.setCellValueFactory(new PropertyValueFactory<Product, String>("productName"));
    
    t2Price.setCellValueFactory(new PropertyValueFactory<Product, Double>("price"));

    t2Quantity.setCellValueFactory(new PropertyValueFactory<Product, Integer>("quantity"));
    

}

How to load the same data in two different TableViews on single screen from the same class model (JavaFX)

1 Answers1