JSFiddle - React, Tailwind, and code Playground

HTML

<script src="&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;https://cdn.datatables.net/v/dt/jq-2.2.4/dt-1.10.15/se-1.2.2/datatables.min.css&quot;/&gt;  "></script>
<script src="https://cdn.datatables.net/v/dt/jq-2.2.4/dt-1.10.15/se-1.2.2/datatables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/v/dt/jq-2.2.4/dt-1.10.15/se-1.2.2/datatables.min.css">
<table id='theTable'>
  <thead>
    <tr>
      <th>COL1</th>
      <th>COL2</th>
      <th>COL3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1a</td>
      <td>2a</td>
      <td>3a</td>
    </tr>
    <tr class='no_selecty'>
      <td>1b (we are unselectable)</td>
      <td>2b (we are unselectable)</td>
      <td>3b (we are unselectable)</td>
    </tr>
    <tr>
      <td>1c</td>
      <td>2c</td>
      <td>3c</td>
    </tr>
  </tbody>
</table>

JavaScript

var theTable;
	$(document).ready(function() {
	  theTable = $('#theTable').DataTable({
	    select: {
	      style: 'os',
	      selector: 'tr:not(.no_selecty)'
	    },
	  });

	  theTable.on('select', function(e, dt, type, indexes) {
	    if (type === 'row') {
	      var data = theTable.rows(indexes).every( function () {
        	if ( $( this.node() ).hasClass('no_selecty') ) {
          	this.deselect();
          }
        })

	      // do something with the ID of the selected items
	    }
	  });
	});