how to insert data into tableview in javafx

Question

I'm trying to put data into tableview but i keep getting javafx.fxml.LoadException and i dont know how to solve it, I have seen other posts but they don't seem to work for me ,the error came from table.setItems(data); if I remove table.setItems(data); the error disappear but the table will be populated and thank you for your help.

my APPLICATION

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class App extends Application {

  @Override
  public void start(Stage primaryStage) {
    try {
      Parent parent = FXMLLoader.load(getClass().getResource("/todo.fxml"));
      Scene scene = new Scene(parent);
      scene
        .getStylesheets()
        .add(getClass().getResource("/style.css").toExternalForm());
      primaryStage.setScene(scene);
      primaryStage.setTitle("TODO");
      primaryStage.setResizable(false);
      primaryStage.show();
    } catch (Exception e) {
      System.out.println(1);
      e.printStackTrace();
    }
  }

  public static void main(String[] args) {
    launch(args);
  }
}

my model class

import javafx.beans.property.SimpleIntegerProperty;
import javafx.beans.property.SimpleStringProperty;

public class todo {

  private SimpleIntegerProperty id;
  private SimpleStringProperty todo = null;
  private SimpleStringProperty description = null;
  private SimpleStringProperty delete = null;

  public todo(int id, String todo, String description, String delete) {
    this.id = new SimpleIntegerProperty(id);
    this.todo = new SimpleStringProperty(todo);
    this.description = new SimpleStringProperty(description);
    this.delete = new SimpleStringProperty(delete);
  }

  public Integer getId() {
    return id.get();
  }

  public String getTodo() {
    return todo.get();
  }

  public String getDescription() {
    return description.get();
  }

  public String getDelete() {
    return delete.get();
  }

  public void setId(int id) {
    this.id = new SimpleIntegerProperty(id);
  }

  public void setTodo(String todo) {
    this.todo = new SimpleStringProperty(todo);
  }

  public void setDescription(String description) {
    this.description = new SimpleStringProperty(description);
  }

  public void setDelete(String delete) {
    this.delete = new SimpleStringProperty(delete);
  }
}

my fxml file

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

<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.TableColumn?>
<?import javafx.scene.control.TableView?>
<?import javafx.scene.control.TextArea?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.Pane?>
<?import javafx.scene.text.Font?>

<AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="468.0" prefWidth="692.0" xmlns="http://javafx.com/javafx/8.0.171" xmlns:fx="http://javafx.com/fxml/1" fx:controller="todocontroller">
   <children>
      <TableView fx:id="table" layoutX="39.0" layoutY="216.0" prefHeight="229.0" prefWidth="614.0">
        <columns>
          <TableColumn fx:id="colId" maxWidth="70.0" prefWidth="70.0" text="id" />
          <TableColumn fx:id="colTodo" minWidth="100.0" prefWidth="100.0" text="todo" />
            <TableColumn fx:id="colDescription" minWidth="100.0" prefWidth="354.0" text="description" />
            <TableColumn fx:id="colDelete" minWidth="0.0" prefWidth="89.0" text="delete" />
        </columns>
      </TableView>
      <TextField fx:id="todo" layoutX="39.0" layoutY="94.0" prefHeight="25.0" prefWidth="200.0" promptText="ENTER TODO" />
      <TextArea fx:id="description" layoutX="39.0" layoutY="134.0" prefHeight="68.0" prefWidth="541.0" promptText="ENTER TODO DESCRIPTION" />
      <Button fx:id="add" layoutX="605.0" layoutY="177.0" mnemonicParsing="false" onAction="#add" prefHeight="25.0" prefWidth="48.0" text="ADD" />
      <Pane fx:id="header" prefHeight="85.0" prefWidth="692.0">
         <children>
            <Label fx:id="title" layoutX="38.0" layoutY="15.0" prefHeight="56.0" prefWidth="200.0" text="TODO APP">
               <font>
                  <Font name="Courier New" size="40.0" />
               </font>
            </Label>
         </children>
      </Pane>
   </children>
</AnchorPane>

my controllerclass

import java.net.URL;
import java.util.ResourceBundle;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.TableColumn;
import javafx.scene.control.TableView;
import javafx.scene.control.TextArea;
import javafx.scene.control.TextField;
import javafx.scene.control.cell.PropertyValueFactory;

public class todocontroller implements Initializable {

  @FXML
  TextField todo;

  @FXML
  TextArea description;

  @FXML
  static TableView<todo> table;

  @FXML
  public TableColumn<todo, Integer> colId;

  @FXML
  public TableColumn<todo, String> colTodo;

  @FXML
  public TableColumn<todo, String> colDescription;

  @FXML
  public TableColumn<todo, String> colDelete;

  ObservableList<todo> data = FXCollections.observableArrayList(
    new todo(0, "run", "go running", "ejhfue")
  );

  @Override
  public void initialize(URL location, ResourceBundle resource) {
    colId.setCellValueFactory(new PropertyValueFactory<todo, Integer>("id"));
    colTodo.setCellValueFactory(new PropertyValueFactory<todo, String>("todo"));
    colDescription.setCellValueFactory(
      new PropertyValueFactory<todo, String>("description")
    );
    colDelete.setCellValueFactory(new PropertyValueFactory<todo, String>("delete"));
    table.setItems(data); //this is the part that generate the error
  }
}```