JSFiddle - React, Tailwind, and code Playground

by alachgar

HTML

<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- This jquery.min.js is necessary for popup to Print Modal -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- This bootstrap.min.css is necessary for the CSS of the app in a whole -->

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<!-- This bootstrap.js Should always Remain at the end here so it is Last Loaded -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<!-- This For DataTables -->
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap.min.js"></script>
<link href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap.min.css" rel="stylesheet" />

<div class = "well col-lg-12">
							<table id="MyTable" class="table table-hover table-striped table-bordered data-table" style="width:100%">
										
										<thead class = "alert-info">											
											<tr>
													<th>Office</th>
													<th>First Name</th>
													<th>Last Name</th>
													<th>Income</th>
													<th>Housing Type</th>
													<th>Household Size</th>
													<th>Zip Code</th>
													<th>Status</th>													 
											</tr>
										</thead>
										<tbody>
																													<tr> 
																<td>Ukiah</td>
																<td>Donovan</td>	 						
																<td>Brazile</td>
																<td>1022</td>
																<td>Rents</td>							
																<td>3</td>
																<td>95815</td>
																<td><center>Approved</center></td>
																

																													<tr> 
																<td>Ukiah</td>
																<td>Martha</td>	...

CSS

select {
  border: 0;
  width: 100%;
}

body,
html {
  width: 100%;
  height: 100%;
  padding: 0px;
  margin: 0px;

}

.modal-dialog {
  height: calc(100% - 60px);
}

.modal-content {
  height: 100%;
}

.modal-header {
  height: 50px;
}

.model-footer {
  height: 75px;
}

.modal-body {
  height: calc(100% - 125px);
  overflow-y: scroll;
  /*give auto it will take based in content */
}

#main_body {
  background-color: #F5FDFE;
  width: 1180px;
  height: auto;
  margin: 3px auto;
  border: 1.5px solid orange;
  /* width, style, colour */
}

MyTable {
  color: #333;
  font-family: Helvetica, Arial, sans-serif;
  width: 640px;
  border-collapse:
    collapse;
  border-spacing: 0;
}

td,
th {
  border: 1px solid transparent;
  /* No more visible border */
  height: 30px;
  transition: all 0.3s;
  /* Simple transition for hover effect */
}

th {
  background: #DFDFDF;
  /* Darken header a bit */
  font-weight: bold;
}

td {
  background: #FAFAFA;
  text-align: center;
}

/* Cells in even rows (2,4,6...) are one color */
tr:nth-child(even) td {
  background: #F1F1F1;
}

/* Cells in odd rows (1,3,5...) are another (excludes header cells)  */
tr:nth-child(odd) td {
  background: #FEFEFE;
}

tr td:hover {
  background: #666;
  color: #FFF;
}

/* Hover cell effect! */

.approved {
  background-color: #C5F97E;
}

.denied {
  background-color: #FF5733;
}

.pending {
  background-color: #F3E498;
}

JavaScript

$('#MyTable').dataTable({
				  'columnDefs': [{
					'targets': 2,
					'createdCell': function(td, cellData, rowData, row, col) {
					  switch (cellData) {
						case 'Approved':
						  $(td).addClass('approved');
						  break;
						case 'Denied':
						  $(td).addClass('denied');
						  break;
						case 'Pending':
						  $(td).addClass('pending');
						  break;
					  }
					}
				  }]
				});

// THIS BELOW SHOULD ALWAYS BE AT THE END TO FIX Next page Modal edit not popping up or doing it with wrong Data.        
 $(document).ready(function()
		{			
			$('#MyTable').DataTable(); 			
		});