JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/jquery.dataTables.min.js"></script>
<table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Date</th>
                <th>Actions</th>
            </tr>
        </thead>       
 
        <tbody>
            <tr>
                <td data-order="1714043553">November 2024</td>
                <td><button>
                Edit
                </button></td>
            </tr>
            <tr>
                <td data-order="1714043533">October 2024</td>
                <td><button>
                Edit
                </button></td>
            </tr>
            <tr>
                 <td data-order="1714043153">Mai 2024</td>
                <td><button>
                Edit
                </button></td>
            </tr>
            
        </tbody>
    </table>
    <button id="add">
    Add row
    </button>

JavaScript

$(document).ready(function() {
    let myTable = $('#example').DataTable( {
        responsive: true
    } );
    
    $('#add').on('click', function(){
    	var response = {
        data: [
          'Nov 2016', 
          '<button>Edit</button>'  
        ]
      };
      myTable.row.add(response.data).draw(false);
    })
} );