Datatables select -- not selecting row or a checkbox, cdn loaded... everything else works, check box shown but not selectable - laravel

Question

Have tried with and without a checkbox(checkbox will be shown but not selectable), also using editor. Project is local dev in laravel. Code snippets is best i got. I am at about 5 hours searching the web. Everything else is working except select, and the edit and remove buttons because i can't select. No console errors. Inline editing works great.
I tried both dataTables.select.js and dataTables.select.min.js. Tried many different versions of select.
JS and CSS
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.0/js/buttons.bootstrap4.min.js"></script>
<script src="https://cdn.datatables.net/select/1.2.5/js/dataTables.select.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.1/js/buttons.print.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.flash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
<script src="{{asset('plugins/editor/js/dataTables.editor.js')}}"></script>
<script src="{{asset('plugins/editor/js/editor.bootstrap4.min.js')}}"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap4.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.5.0/css/buttons.bootstrap4.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/select/1.2.4/css/select.bootstrap4.min.css">
<link rel="stylesheet" href="/plugins/editor/css/dataTables.editor.css">
<link rel="stylesheet" href="/plugins/editor/css/editor.bootstrap4.min.css">
Table
<table class="table" id="example">
<thead>
<tr>
<th></th> <!--Checkbox Column --!>
<th></th> <!-- Avatar Column --!>
<th>Name</th>
<th>Priority</th>
<th>Title</th>
<th>Body</th>
</tr>
</thead>
</table>
JS
$(function() {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': '{{csrf_token()}}'
}
});
var editor = new $.fn.dataTable.Editor({
ajax: "manage",
table: "#example",
idSrc: 'id',
fields: [
{label:"Title", name: "title", type:"textarea"},
{label:"Priority", name: "priority_id", type: "select",
options: [
#foreach ($priorities as $priority)
{ label: "{{$priority['name'] }}", value: "{{$priority['id']}}" },
#endforeach
]
},
{label:"user_id", name: "user_id", type: "select", def: "Unassigned",
options: [
#foreach ($users as $user)
{ label: "{{$user['first_name'] }} {{$user['last_name']}}", value: "{{$user['id']}}" },
#endforeach
]
},
{label:"Body", name: "body", type:"textarea"}
]
});
$('#example').on('click', 'tbody td:not(:first-child)', function (e) {
editor.inline(this, {
buttons: {label: '&gt', fn:function(){ this.submit()}},
onBlur: 'submit',
submit: 'allIfChanged'
});
});
$(function() {
var table = $('#example').DataTable({
ajax: '/manage/data',
dom: 'Bfrtip',
order: [3, 'asc'],
processing: true,
serverSide: true,
deferRender: true,
select:[
{style: 'multi'},
{selector: 'td:first-child'}
],
columns: [
{
data : null,
defaultContent : '',
className : 'select-checkbox',
title : '',
orderable : false,
searchable : false
},
{data: 'user_avatar', name:"user_avatar", render: function(data,type,row){ // column
if (row.user == null) {
var avatar = "<img style='width:75px' src='/storage/users/default.png'>";
} else {
var avatar = "<img style='width:75px' src='/storage/"+ row.user.avatar +"'>";
}
return avatar;
}},
{ data: null, name: 'user.name', editField: "user_id", defaultContent: '', render: function(data,type,row){ //column
if(row.user === null){
var name = 'Unassigned';
} else {
var name = row.user.first_name +" "+ row.user.last_name;
}
return name;
} },
{
data: 'priority.name',
name: 'priority.name',
editField:"priority_id"
},
{
data: 'title',
name: 'title'
},
{
data: 'body',
name: 'body'
}
],
buttons: [
{extend: 'create', editor: editor},
{extend: 'edit', editor: editor},
{extend: 'remove', editor: editor},
{
extend: 'collection',
text: 'Export',
buttons: [
'copy',
'excel',
'csv',
'pdf',
'print'
]
}
]
});
});
})
I have also tried using
$('#example tbody').on( 'click', 'tr', function () {
if ($(this).hasClass('selected')) {
$(this).removeClass('selected');
} else {
table.$('tr.selected').removeClass('selected');
$(this).addClass('selected');
}
} );