JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/keytable/2.1.1/css/keyTable.dataTables.css">
<link rel="stylesheet" href="https://cdn.datatables.net/select/1.1.2/css/select.dataTables.min.css">
<script src="https://cdn.datatables.net/keytable/2.2.1/js/dataTables.keyTable.min.js"></script>
<script src="https://cdn.datatables.net/select/1.2.0/js/dataTables.select.min.js"></script>
<script src="https://cdn.datatables.net/select/1.2.2/js/dataTables.select.min.js"></script>
<table id="data-table" class="display compact articulos table0">
<thead>
<tr>
<th>Code</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Description 1</td>
</tr>
<tr>
<td>2</td>
<td>Description 2</td>
</tr>
<tr>
<td>3</td>
<td>Description 3</td>
</tr>
<tr>
<td>4</td>
<td>Description 4</td>
</tr>
<tr>
<td>5</td>
<td>Description 5</td>
</tr>
<tr>
<td>6</td>
<td>Description 6</td>
</tr>
<tr>
<td>7</td>
<td>Description 7</td>
</tr>
<tr>
<td>8</td>
<td>Description 8</td>
</tr>
<tr>
<td>9</td>
<td>Description 9</td>
</tr>
<tr>
<td>10</td>
<td>Description 10</td>
</tr>
<tr>
<td>11</td>
<td>Description 11</td>
</tr>
<tr>
<td>12</td>
<td>Description 12</td>
</tr>
<tr>
<td>13</td>
<td>Description 13</td>
</tr>
<tr>
<td>14</td>
<td>Description 14</td>
</tr>
</tbody>
</table>
CSS
table.dataTable th.focus,
table.dataTable td.focus {
outline: none;
}
JavaScript
$(document).ready(function() {
$('#data-table')
.DataTable({
"select": {
"style": "single"
},
"keys": true
}).on('key-focus', function() {
console.log("key-focus fired");
$('#data-table').DataTable().row(getRowIdx()).select();
})
});
function getRowIdx() {
return $('#data-table').DataTable().cell({
focused: true
}).index().row;
}