JSFiddle - React, Tailwind, and code Playground

by Scott Burrows

HTML

<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://cdn.datatables.net/1.13.2/js/jquery.dataTables.js"></script>
<script src="https://cdn.datatables.net/buttons/2.3.4/js/dataTables.buttons.js"></script>
<script src="https://cdn.datatables.net/buttons/2.3.4/js/buttons.html5.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.2/css/jquery.dataTables.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.3.4/css/buttons.dataTables.css">
<table class="display compact dataTable" id="tableView" style="border-collapse: collapse; border-spacing: 0px; width: 100%;">
	<thead>
		<th>column 1</th><th>column 2</th><th>column 3</th><th>column 4</th><th>column 5</th>
	</thead>
	<tr>
		<td>data</td><td>data</td><td>data</td><td>data</td><td>data</td>
	</tr>
	<tr>
		<td>data</td><td>data</td><td>data</td><td>data</td><td>data</td>
	</tr>
	<tr>
		<td>data</td><td>data</td><td>data</td><td>data</td><td>data</td>
	</tr>
	<tr>
		<td>data</td><td>data</td><td>data</td><td>data</td><td>data</td>
	</tr>
	<tr>
		<td>data</td><td>data</td><td>data</td><td>data</td><td>data</td>
	</tr>
</table>

CSS

div.dt-buttons {
    			float: right;
    			margin-bottom: 10px;
			}
			button.dt-button, div.dt-button, a.dt-button {
			    padding: 0.4em 0.5em;
			}

JavaScript

let tbView = $('#tableView')
              .DataTable({
                processing: true,
                autoWidth: true,
                scrollX: "100%",
                scrollY: "50vh", 
                deferRender: true,
                pagingType: "full_numbers",
                pageLength: 50,
                orderCellsTop: true, 
                dom: 'T<"toolbar"><"clear">lfrtip',
                "language": {
                  "sSearch": "Search all columns:"
                }
              });


            let toolbar = $("div.toolbar").html('<b>Table: table name </b>');

            new $.fn.dataTable.Buttons(tbView, {
              buttons: [{
                  text: 'Add',
                  name: 'btnAdd',
                  action: function(e, dt, node, config) {
                    //btnClicked( "${tableName}","ADD", "${user}", null,  null, null, actionParamsObj );
                  },
                  //className: 'addButton',
                  titleAttr: 'Add additional row.',
                  enabled: true,
                },
                {
                  text: 'Edit',
                  name: 'btnEdit',
                  action: function(e, dt, node, config) {
                    console.log('isValidRow in Edit' + isValidRow);
                  },
                  titleAttr: 'Edit a row.',
                  enabled: true,
                },
                {
                  text: 'Delete',
                  name: 'btnDelete',
                  action: function(e, dt, node, config) {},
                  titleAttr: 'Delete a row.',
                  enabled: true,
                }
              ]
            });

   			new $.fn.dataTable.Buttons( tbView, {
   					buttons   : [
   						{
   							text      : 'View Data',
   							name      : 'btnViewData',
   							extend    : 'collection', 
   							autoClose : true,
   		        			titleAttr : 'View the Data column as formatted JSON or raw text.',   
   		        			buttons   :...