react js datatables net, can't add custom html element to datatable columns

Question

I'm using SYMFONY + API PLATFORM + REACT JS.

I'm getting data from api inside my React Component :

  useEffect(() => {
    document.title = "IIG | Écran d'accueil";

    asyncSecureGetHelper(resource, AUTH_TOKEN)
      .then((response) => {
        setLoading(false);
        setProjects(response.data["hydra:member"]);
      })
      .catch((error) => {
        setLoading(false);
      });
  }, []);

I created a datatables with projects :

var projectsDt = null;

  function projectsDatatable() {
    if (projectsDt !== null) {
      projectsDt.destroy();
    }
    projectsDt = $("#projects_dt_table").DataTable({
      destroy: true,
      searching: false,
      data: projects,
      columns: [
        { data: "reference" },
        { data: "createdAt" },
        { data: "updatedAt" },
        { data: "user" },
        { data: "type" },
        { data: "status" },
        // I NEED TO ADD  SHOW AND EDIT LINKS HERE
      ],
    });
  }

  if ($("#projects_dt_table").length) {
    projectsDatatable();
  }

I want to add show and edit links to datatables .

 columns: [
        { data: "reference" },
        { data: "createdAt" },
        { data: "updatedAt" },
        { data: "user" },
        { data: "type" },
        { data: "status" },
        {
          <a href="link_to_edit"> edit </a>  // i want to add this
        },
       {
          <a href="link_to_showt"> show </a> / i want to add this
        },
      ],

i will be grateful if someone could help me .

Thank you

Answer 1

It works for me :

  columnDefs: [
        {
          targets: 0,
          data: "reference",
          render: function (data, type, row, meta) {
            return '<a href="' + data + '">Download</a>';
          },
        },
        {
          targets: 1,
          data: "createdAt",
          render: function (data, type, row, meta) {
            return '<a href="' + data + '">Download</a>';
          },
        },
        {
          targets: 2,
          data: "updatedAt",
          render: function (data, type, row, meta) {
            return '<a href="' + data + '">Download</a>';
          },
        },
        {
          targets: 3,
          data: "user",
          render: function (data, type, row, meta) {
            return '<a href="' + data + '">Download</a>';
          },
        },
        {
          targets: 4,
          data: "type",
          render: function (data, type, row, meta) {
            return '<a href="' + data + '">Download</a>';
          },
        },
        {
          targets: 5,
          data: "status",
          render: function (data, type, row, meta) {
            return '<a href="' + data + '">Download</a>';
          },
        },
        {
          targets: 6,
          data: "id",
          render: function (data, type, row, meta) {
            return '<a href="' + data + '">Download</a>';
          },
        },
        {
          targets: 7,
          data: "id",
          render: function (data, type, row, meta) {
            return '<a href="' + data + '">Download</a>';
          },
        },
      ],