JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.24/js/dataTables.bootstrap4.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/searchpanes/1.2.1/css/searchPanes.bootstrap4.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/select/1.3.3/css/select.bootstrap4.min.css">
<script src="https://cdn.datatables.net/searchpanes/1.2.1/js/dataTables.searchPanes.min.js"></script>
<script src="https://cdn.datatables.net/searchpanes/1.2.1/js/searchPanes.bootstrap4.min.js"></script>
<script src="https://cdn.datatables.net/select/1.3.3/js/dataTables.select.min.js"></script>
<script src="https://momentjs.com/downloads/moment.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.24/css/dataTables.bootstrap4.min.css">
<table id="tickets" class="table table-striped table-bordered dt-responsive nowrap table-content" style="width:100%">
  <thead>
    <tr>
      <th>Ticket</th>
      <th>Nombre</th>
      <th>Descripción</th>
      <th>Fecha Creación</th>
      <th>Responsable</th>
      <th>Estado</th>
    </tr>
  </thead>
</table>

JavaScript

var data = [
    {
        "odata.type": "SP.Data.TicketsListItem",
        "odata.id": "48e8026a-1715-45d7-afb6-b61e6f98e68a",
        "odata.etag": "\"3\"",
        "odata.editLink": "Web/Lists(guid'26ff5bd8-2641-4645-978d-1bbb7acd2231')/Items(16)",
        "Author@odata.navigationLinkUrl": "Web/Lists(guid'26ff5bd8-2641-4645-978d-1bbb7acd2231')/Items(16)/Author",
        "Author": {
            "odata.type": "SP.Data.UserInfoItem",
            "odata.id": "2c2b712b-cd22-49b7-9a02-82809ef8534f",
            "EMail": null,
            "Title": "Geovanni Luna"
        },
        "Responsable@odata.navigationLinkUrl": "Web/Lists(guid'26ff5bd8-2641-4645-978d-1bbb7acd2231')/Items(16)/Responsable",
        "Responsable": {
            "odata.type": "SP.Data.UserInfoItem",
            "odata.id": "d4830a53-f5b3-4f55-a50a-f1bba8e69312",
            "EMail": null,
            "Title": "Abastecimiento"
        },
        "Estado@odata.navigationLinkUrl": "Web/Lists(guid'26ff5bd8-2641-4645-978d-1bbb7acd2231')/Items(16)/Estado",
        "Estado": {
            "odata.type": "SP.Data.EstadosListItem",
            "odata.id": "bfa08665-4c00-43c0-b96d-68afc5aafb25",
            "Title": "Abierto"
        },
        "FileSystemObjectType": 0,
        "Id": 16,
        "ServerRedirectedEmbedUri": null,
        "ServerRedirectedEmbedUrl": "",
        "ID": 16,
        "ContentTypeId": "0x0100B38BA03D0C8F024C84CA9741E4BE8DD500B5E12F1298BFE443B62000CB01F7B71A",
        "Title": "qwe",
        "Modified": "2021-04-22T17:25:15Z",
        "Created": "2021-04-21T23:48:58Z",
        "AuthorId": 19,
        "EditorId": 19,
        "OData__UIVersionString": "3.0",
        "Attachments": false,
        "GUID": "d7299c65-8c5d-4248-a4d3-bdda9d562aa0",
        "ComplianceAssetId": null,
        "CategoriaId": 1,
        "ResponsableId": 105,
        "ResponsableStringId": "105",
        "Descripcion": null,
        "EstadoId": 1
    },
    {
        "odata.type": "SP.Data.TicketsListItem",
  ...