JSFiddle - React, Tailwind, and code Playground

by rotailed

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/v/bs/jqc-1.12.3/pdfmake-0.1.18/dt-1.10.12/b-1.2.1/b-html5-1.2.1/b-print-1.2.1/se-1.2.0/datatables.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://cdn.datatables.net/v/dt/jqc-1.12.3/pdfmake-0.1.18/dt-1.10.12/b-1.2.1/b-html5-1.2.1/b-print-1.2.1/se-1.2.0/datatables.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
	<table id="detail" class="table table-bordered table-hover table-striped table-condensed" width="100%">
		<thead style="background-color: #E6E6FA !important;">
			<th>ID</th>
			<th class="text-center">Item</th>
			<th class="text-center">Name</th>
		</thead>
		<tbody>
				<tr>
					<td>1</td>
					<td>001</td>
					<td>John</td>
				</tr>
				<tr>
					<td>2</td>
					<td>002</td>
					<td></td>
				</tr>				
				<tr>
					<td>3</td>
					<td>003</td>
					<td>Stan</td>
				</tr>								
		</tbody>	
	</table>

JavaScript

$(document).ready(function() {
			var table = $('#detail').DataTable(
			{	
				dom: '<"toolbar">Bfrtlip',
				select: 'single',
				buttons: [
					{ extend: 'pdf', 
		            	text: '<i class="fa fa-print" aria-hidden="true"></i> Add',
		            	className: 'btn btn-default btnAtt',
		      },
					{ extend: 'pdf', 
		            	text: '<i class="fa fa-print" aria-hidden="true"></i> Remove',
		            	className: 'btn btn-default btnDes',
		      }          
				],
			}).on('deselect', function(e, dt, type, indexes) {
				if(type === 'row') {
					$('.btnAtt').hide();
					$('.btnDes').hide();
				}
			}).on('select', function(e, dt, type, indexes) {
				if(type === 'row') {
					var data = dt.row( { selected: true } ).data();
			        var id = (data[Object.keys(data)[2]]);
					if( id.length === 0) {
						$('.btnAtt').show();
						$('.btnDes').hide();
					}
					else if(id.length != 0) {
						$('.btnAtt').hide();
						$('.btnDes').show();
					}			
				}
			});
      
			$(table.buttons().nodes()).hide();
		});