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">
<script src="https://cdn.datatables.net/keytable/2.1.1/js/dataTables.keyTable.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/keytable/2.1.1/css/keyTable.dataTables.css">
<script src="https://cdn.datatables.net/select/1.1.2/js/dataTables.select.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/select/1.1.2/css/select.dataTables.min.css">
<div>
  Result:
  <span id="output">
</span>
</div>
<br/>
<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,
      "processing": false,
      "searching": false,
      "pageLength": 10,
      "lengthChange": false,
      "scrollY": "310px",
      "scrollCollapse": false,
      "paging": true
    }).on('key-focus', function() {
      $('#data-table').DataTable().row(getRowIdx()).select();
    })
    .on('click', 'tbody td', function() {
      var rowIdx = $('#data-table').DataTable().cell(this).index().row;

      $('#data-table').DataTable().row(rowIdx).select();
    }).on('key', function(e, datatable, key, cell, originalEvent) {
      if (key === 13) {
        var data = $('#data-table').DataTable().row(getRowIdx()).data();
        $("#output").html("Code: " + data[0] + ". Description: " + data[1]);
      }
    });
});

function getRowIdx() {
  return $('#data-table').DataTable().cell({
    focused: true
  }).index().row;
}