JSFiddle - React, Tailwind, and code Playground
HTML
{{-- basic Datatable functions and styles --}}
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.4/css/jquery.dataTables.min.css"/>
<script src="https://cdn.datatables.net/1.11.4/js/jquery.dataTables.min.js" defer></script>
{{-- DataTable buttons plugin functions and styles --}}
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.2.2/css/buttons.dataTables.min.css"/>
<script src="https://cdn.datatables.net/buttons/2.2.2/js/dataTables.buttons.min.js" defer></script>
{{-- DataTable select plugin functions and styles --}}
<link rel="stylesheet" href="https://cdn.datatables.net/select/1.3.4/css/select.dataTables.min.css"/>
<script src="https://cdn.datatables.net/select/1.3.4/js/dataTables.select.min.js" defer></script>
JavaScript
$(document).ready(function() {
var dataTable = $('#subseaDataTable').DataTable({
language: {
searchPlaceholder: "Name",
buttons: {
selectAll: "Select All",
selectNone: "Clear Selection"
},
},
pageLength :-1,
select: {
style: 'multi+shift',
// className: 'row-selected'
},
buttons: [
{
extend: 'selectAll',
className: 'selectAll',
action: function(e){
e.preventDefault();
dataTable.rows( { search: 'applied' } ).select()
}
},
'selectNone',
{
extend: 'selected',
text: 'Delete Files',
attr: {
id: 'deleteFilesButton',
class: 'btn btn-danger mr-1',
'data-toggle': 'modal',
'data-target': '#deleteFilesModal'
}
},
{
text: 'Upload Files',
attr: {
id: 'uploadFilesButton',
class: 'btn btn-primary mr-1',
'data-toggle': 'modal',
'data-target': '#uploadFilesModal'
},
},
],
dom: 'Bfti',
scrollY: "530px",
scrollCollapse: true,
})
});