JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/2.1.4/css/dataTables.bootstrap5.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/3.1.1/css/buttons.bootstrap5.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/scroller/2.4.3/css/scroller.bootstrap5.min.css">
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.3/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
<script src="https://cdn.datatables.net/2.1.4/js/dataTables.min.js"></script>
<script src="https://cdn.datatables.net/2.1.4/js/dataTables.bootstrap5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/3.1.1/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/scroller/2.4.3/js/dataTables.scroller.min.js"></script>
<table>
  <thead>
    <tr>
      <th>Col1</th>
      <th>Col2</th>
      <th>Col3</th>
    </tr>
  </thead>
</table>

CSS

.dt-buttons, .dataTables_info, .dataTables_length {
	padding-right: 10px;
}

.dataTables_info, .dataTables_length
{
	display: inline !important;
}

.dt-btns-right {
	display: inline !important;
	float: right !important;
}

.dt-btns-left {
	display: inline !important;
	float: left !important;
}

JavaScript

$('table').DataTable({
		"dom": "t",
		"paging": false,
		"scrollX": false,
		"scrollY":  false,
		"scrollCollapse": true,
		"ordering": true,
		"orderCellsTop": true,		
		"order": [[ 1, "asc" ]],
		"autoWidth": true,
    data: [
    	["Something here", "Col2 thing", "Col3 thing"],
      ["Something row2", "Col2 row 2 thing", "Col3 row 2 thing"],
      ["Something ro23", "Col2 row 3 thing", "Col3 row 3 thing"]
    ],    
		columns: [
			{ title: 'col1' },
			{ title: 'col2' },
      { title: 'col3' },
		],
		"columnDefs": [
			{ className: 'needs_tooltip', targets: [1] }			
		],
		"createdRow": function(row, data, dataIndex) {
    	console.debug($(row).find('.needs_tooltip'));
    }

});