JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.2/css/jquery.dataTables.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://cdn.datatables.net/1.10.2/js/jquery.dataTables.js"></script>
<table id="table_id" class="display">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<span class="toggler">toggle me</span>
Row 1 Data 1</td>
<td>Row 1 Data 2</td>
</tr>
<tr>
<td>
<span class="toggler">toggle me</span>
Row 1 Data 1</td>
<td>Row 1 Data 2</td>
</tr>
<tr>
<td>
<span class="toggler">toggle me</span>
Row 1 Data 1</td>
<td>Row 1 Data 2</td>
</tr>
<tr>
<td>
<span class="toggler">toggle me</span>
Row 1 Data 1</td>
<td>Row 1 Data 2</td>
</tr>
<tr>
<td>
<span class="toggler">toggle me</span>
Row 1 Data 1</td>
<td>Row 1 Data 2</td>
</tr>
<tr>
<td>
<span class="toggler">toggle me</span>
Row 1 Data 1</td>
<td>Row 1 Data 2</td>
</tr>
<tr>
<td>
<span class="toggler">toggle me</span>
Row 1 Data 1</td>
<td>Row 1 Data 2</td>
</tr>
<tr>
<td>
<span class="toggler">toggle me</span>
Row 1 Data 1</td>
<td>Row 1 Data 2</td>
</tr>
<tr>
<td>
<span class="toggler">toggle me</span>
Row 1 Data 1</td>
<td>Row 1 Data 2</td>
</tr>
<tr>
<td>
<span class="toggler">toggle me</span>
...
JavaScript
$('#table_id').DataTable();
$('.toggler').on('click', function() {
alert('toggled');
});
$('#table_id').on('click', '.toggler', function() {
alert('toggled');
});