Javafx dynamically populate table rows and columnheads from sql query

Question

I want to populate data from database table to javafx table dynamically. By using object of ResultSetMetaData, I tried to get names of columns of database table. By using methods of ResultSet class, I want to populate javafx table.

I tried following way.

Database Table

enter image description here

FXMLDocumentController.java

public class FXMLDocumentController implements Initializable 
{
    DBConnect db = new DBConnect();
    SimpleDateFormat sdf = new SimpleDateFormat("dd-MM-YYYY");
    ResultSet rs;
    ResultSetMetaData rsmt;

    @FXML
    private Label label;
    @FXML
    private TableView<?> tbl;
    private TextField tID;
    private TextField tName;
    private ComboBox<String> cmbType;
    private Button btnAdd;
    private Button btnDelete;
    private DatePicker tDate;

    public void refreshTable(Double[] widthArray)
    {
        TableColumn column;
        ObservableList row = FXCollections.observableArrayList();
        ObservableList data = FXCollections.observableArrayList();

        try
        {
            rs = db.stmt.executeQuery("select * from emp order by id");
            rsmt = rs.getMetaData();

            tbl.getColumns().clear();  
            for(int i=0; i<rsmt.getColumnCount(); i++)
            {
                column = new TableColumn(rsmt.getColumnName(i+1));
                column.setCellValueFactory(new PropertyValueFactory(rsmt.getColumnName(i+1)));
                tbl.getColumns().add(column);

                column.setResizable(false);
                column.prefWidthProperty().bind(tbl.widthProperty().multiply(widthArray[i]));                    
            }

            tbl.getItems().clear();              
            while(rs.next())
            {
                for(int i=0; i<rsmt.getColumnCount(); i++)
                {
                    row.add(rs.getString(i+1));
                }
                data.add(row);
            }  
            tbl.setItems(data);
        }
        catch(Exception ex)
        {
            ex.printStackTrace();
        }
    }

    private void handleButtonAction(ActionEvent event)
    { 

    }

    @Override
    public void initialize(URL url, ResourceBundle rb) 
    {
        refreshTable(new Double[]{0.1,0.4,0.25,0.25});

    }
}

FXMLDocument.fxml

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

<?import javafx.scene.control.Label?>
<?import javafx.scene.control.ScrollPane?>
<?import javafx.scene.control.TableColumn?>
<?import javafx.scene.control.TableView?>
<?import javafx.scene.layout.AnchorPane?>

<AnchorPane id="AnchorPane" prefHeight="388.0" prefWidth="511.0" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/11.0.1" fx:controller="fxcrud.FXMLDocumentController">
    <children>
        <Label fx:id="label" layoutX="126" layoutY="120" minHeight="16" minWidth="69" />
      <ScrollPane hbarPolicy="NEVER" layoutX="14.0" layoutY="52.0" prefHeight="283.0" prefWidth="484.0" vbarPolicy="ALWAYS">
         <content>
          <AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="275.0" prefWidth="485.0">
               <children>
                  <TableView fx:id="tbl" layoutY="-2.0" prefHeight="296.0" prefWidth="480.0">
                    <columns>
                      <TableColumn prefWidth="75.0" text="C1" />
                      <TableColumn prefWidth="75.0" text="C2" />
                    </columns>
                  </TableView>
               </children>
            </AnchorPane>
         </content>
      </ScrollPane>
    </children>
</AnchorPane>

Result enter image description here

Here you can see column headers are generated dynamically. But rows are not added. What to do?