JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/select/1.2.3/js/dataTables.select.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/select/1.2.3/css/select.dataTables.min.css">
<table id="datatable" class="table table-hover table-striped table-condensed nowrap" width="100%">
    <thead>
        <tr>
            <th>Identifier</th>
            <th>Model</th>
            <th>Order</th>
            <th>Select</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>SSS</td>
            <td>1</td>
            <td>Un-Selectable</td>
        </tr>
        <tr>
            <td>2</td>
            <td>HHH</td>
            <td>2</td>
            <td>Un-Selectable</td>
        </tr>
        <tr>
            <td>3</td>
            <td>CCC</td>
            <td>3</td>
            <td></td>
        </tr>
        <tr>
            <td>4</td>
            <td>CCC</td>
            <td>4</td>
            <td>Un-Selectable</td>
        </tr>
        <tr>
            <td>5</td>
            <td>AAA</td>
            <td>5</td>
            <td></td>
        </tr>
        <tr>
            <td>6</td>
            <td>SSS</td>
            <td>6</td>
            <td></td>
        </tr>
    </tbody>    
    <tfoot>
        <tr>
            <th>Identifier</th>
            <th>Model</th>
            <th>Order</th>
            <th>Select</th>
        </tr>
    </tfoot>
</table>

CSS

table th {text-align: left;}
table.dataTable thead th {padding: 2px 4px;}
table.dataTable tfoot th {padding: 4px 4px;}

JavaScript

var table = $('#datatable').DataTable({
    paging: false, searching: false, dom: 'rt',
    order: [],
    columnDefs: [
        { targets: [0], type: 'natural', },
        { targets: [3], className: 'select-checkbox dt-center', orderable: false, width: '70px', },
    ],
    select: {
        style: 'os',
        selector: 'td.select-checkbox:not(.not-selectable):last-child',
    },
    buttons: [],
	
    initComplete: function(settings, json) {
        // Select checkbox behaviors...
        var checkbox_colIdx = 3
        var identifiers_colIdx = 0;
        var table = $('#datatable').DataTable();
        
        var unselectables_IDs = ['1', '2', '4'];
        var row_IDs = table.column(identifiers_colIdx).data();

        $(row_IDs).each(function(index, value) {
            var row_ID = value.replace(/\D/g,'');

            if ($.inArray(row_ID, unselectables_IDs) !== -1) {
                $(table.row(index).node()).addClass('not-selectable');
                $(table.row(index).node()).children('td.select-checkbox').removeClass('select-checkbox');
            }
        });

        // Deselect unselectable rows (that can still be selected by using the shift key)...
        table.on('select', function(e, dt, type, indexes) {
            if (type === 'row') {
                var rows = table.rows(indexes).nodes();
                
                $.each($(rows), function() {
                    if ($(this).hasClass('not-selectable')) table.row($(this)).deselect();
                })
            }
        });
    },
});