JSFiddle - React, Tailwind, and code Playground

HTML

<html>
	<head>
		<title>Test</title>
		<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
		<script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
		<link href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css" rel="stylesheet"></link>
	</head>
	<body>
		<table id="tbDocumentDetails" class="table table-bordered table-striped table-hover">
			<thead>
				<tr>
					<th>Product</th>
					<th>Price</th>
					<th>Hide</th>
				</tr>
			</thead>
		</table>
	</body>
</html>

JavaScript

var tbDocumentDetails = $('#tbDocumentDetails').DataTable({
	scrollX: true,
  searching: false,
  info: false,
  language: { url: 'https://cdn.datatables.net/plug-ins/1.12.1/i18n/es-ES.json' },
  columnDefs: [{ targets: '_all', createdCell: function (td, cellData, rowData, row, col) { $(td).css('padding', '0') } }]
});
	
	
$(document).ready(function () {
  tbDocumentDetails.column(2).visible(false);
});