append column data outside the datatable container

I am using JQuery datatable, after loading the data from server, my table looks something like this: As you can see my table has six columns. The last column which is Contracted product, has the same data inside, I want to get the value and display it outside the datatable so it becomes more reader friendly as shown in picture 2.

My code looks like this:

 var table = $('#products').DataTable( {
        "processing": true,
        "serverSide": true,
        "paging":   true,
           "scrollX":"true",


      "ordering": [],
      "stateSave": false,
        "info":   true,
    "dom": 'lrtip',
    "ajax":

     {
      url:"xxxxxx_fetch.php",
            type:'POST'

    },
         
 "columns": [
            { data: "product_code_fk" },
            { data: "product_name" },
            { data: "start_date" },
            { data: "end_date" },
            { data: "pack_size" },
            { data: "contract_prod" }
           


      ],

 
  } );

Answer

Through the use of the header and footer callback manipulation functions provided by DataTables (headerCallback and footerCallback).

in HTML, by exemple

<tfoot>
 <tr>
  <th colspan="4" style="text-align:right">CONTRAT PROD :</th>
  <th></th>
 </tr>
</tfoot>

DataTable

$('#example').DataTable( {
 "footerCallback": function ( row, data, start, end, display ) {
  let api = this.api(), data;
  ...

  $( api.column( 4 ).footer() ).html(
     your_DATA 
  );