JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/r/bs-3.3.5/jqc-1.11.3,dt-1.10.9,r-1.0.7/datatables.min.css">
<script src="https://cdn.datatables.net/r/bs-3.3.5/jqc-1.11.3,dt-1.10.9,r-1.0.7/datatables.min.js"></script>
<div class="container">
    <table id="table-cache" class="table-recap table table-striped table-bordered table-hover dt-responsive nowrap" width="100%">
        <thead>
            <tr>
                <th>Actions</th>
                <th>Col 1</th>
                <th>Col 2</th>
                <th>Col 3</th>
                <th>Col 4</th>
                <th>Col 5</th>
            </tr>
        </thead>

        <tbody>
            <tr data-id="td-col-1">
                <td>
                    <div class="btn-group">
                        <button type="button" class="btn btn-xs btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <span class="glyphicon glyphicon-cog" aria-hidden="true"></span> <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu">
                            <li><a href="#" role="button" data-action="modify">Modify value</a></li>
                            <li><a href="#" role="button" data-action="reset">Reset value</a></li>
                        </ul>
                    </div>
                </td>
                <td id="td-col-1-1">Col 1-1</td>
                <td id="td-col-1-2">Col 1-2</td>
                <td id="td-col-1-3">Col 1-3</td>
                <td id="td-col-1-4">Col 1-4</td>
                <td id="td-col-1-5">Col 1-5</td>
            </tr>
            <tr data-id="td-col-2">
                <td>
                    <div class="btn-group">
                        <button type="button" class="btn btn-xs btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <span class="glyphicon glyphicon-cog"...

JavaScript

$(document).ready(function() {
				var oTable = $('.table-recap').DataTable( {
					"responsive": true,
					"processing": true,
					"autoWidth": true,
					"lengthMenu": [
						[10, 25, 50, -1],
						[10, 25, 50, "All"]
					],
					"pagingType": "full_numbers",
					"dom": "<'row'<'col-sm-6'l><'col-sm-6'f>>" + "<'row'<'col-sm-12'tr>>" + "<'row'<'col-sm-5'i><'col-sm-7'p>>"
				} );

				$("body").on("click", "[data-action='modify'], [data-action='reset']", function(e) {
					e.preventDefault();
					var o = {
						'action' : $(this).data('action'),
						'id' : $(this).closest('tr').data('id')
					};
					var s = "Test col ";
					if ((o.action == 'reset')) {
						s = "reset --- ";
					}
					for (var i = 1; i <= 5; i++) {
						oTable.cell($('#' + o.id + '-' + i)).data(s + i);
					}
					oTable.draw('page');
				});
			});