JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>

<html lang="en">
    <head> 
        <title>Test</title>
        <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
		<script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>		
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
		<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap.min.css" type="text/css"/>
		<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js" type="text/javascript"></script>
		<script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap.min.js" type="text/javascript"></script>
    </head>
    <body>
        <div class="container-fluid">
			<div class="form-group row">
				<div class="col-xs-12">
					<table id="tblTest" class="table table-striped table-bordered table-condensed table-hover" style="width:100%">
						<thead>
							<tr>
								<th>Column 1</th>
								<th>Column 2</th>
								<th>Column 3</th>
								<th>Column 4</th>
								<th>Column 5</th>
								<th>Column 6</th>
								<th>Column 7</th>
								<th>Column 8</th>
								<th>Column 9</th>
							</tr>
						</thead>
						<tbody></tbody>
					</table>
				</div>
			</div>
        </div>
    </body>
</html>

JavaScript

$(document).ready(function () {
	$("#tblTest").DataTable().destroy();
});