JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/v/bs/jszip-2.5.0/dt-1.11.5/b-2.2.2/b-colvis-2.2.2/b-html5-2.2.2/b-print-2.2.2/cr-1.5.5/fc-4.0.2/fh-3.2.2/r-2.2.9/rg-1.1.4/sc-2.0.5/sp-2.0.0/sl-1.3.4/datatables.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/v/bs/jszip-2.5.0/dt-1.11.5/b-2.2.2/b-colvis-2.2.2/b-html5-2.2.2/b-print-2.2.2/cr-1.5.5/fc-4.0.2/fh-3.2.2/r-2.2.9/rg-1.1.4/sc-2.0.5/sp-2.0.0/sl-1.3.4/datatables.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<table id="example" class="display nowrap" width="100%">
        <thead>
            <tr>
                <th>First name</th>
                <th>Last name</th>
                <th>Phone</th>
                <th>Site</th>
            </tr>
        </thead>
    </table>

JavaScript

const data = {
	draw: 1,
recordsFiltered: 10,
recordsTotal: 10,
  "data": [
    {
      "DT_RowId": "row_32",
      "users": {
        "first_name": "Alexa",
        "last_name": "Wilder",
        "phone": "1-727-307-1997",
        "site": "2"
      },
      "sites": {
        "name": "London"
      }
    },
    {
      "DT_RowId": "row_11",
      "users": {
        "first_name": "Avram",
        "last_name": "Allison",
        "phone": "1-751-507-2640",
        "site": "5"
      },
      "sites": {
        "name": "Singapore"
      }
    },
    {
      "DT_RowId": "row_28",
      "users": {
        "first_name": "Basia",
        "last_name": "Harrell",
        "phone": "1-528-238-4178",
        "site": "4"
      },
      "sites": {
        "name": "New York"
      }
    },
    {
      "DT_RowId": "row_8",
      "users": {
        "first_name": "Bryar",
        "last_name": "Long",
        "phone": "1-918-114-8083",
        "site": "2"
      },
      "sites": {
        "name": "London"
      }
    },
    {
      "DT_RowId": "row_3",
      "users": {
        "first_name": "Cruz",
        "last_name": "Reynolds",
        "phone": "1-776-102-6352",
        "site": "3"
      },
      "sites": {
        "name": "Paris"
      }
    },
    {
      "DT_RowId": "row_30",
      "users": {
        "first_name": "Dexter",
        "last_name": "Burton",
        "phone": "1-275-332-8186",
        "site": "6"
      },
      "sites": {
        "name": "Los Angeles"
      }
    },
    {
      "DT_RowId": "row_6",
      "users": {
        "first_name": "Dustin",
        "last_name": "Rosa",
        "phone": "1-875-919-3188",
        "site": "6"
      },
      "sites": {
        "name": "Los Angeles"
      }
    },
    {
      "DT_RowId": "row_29",
      "users": {
        "first_name": "Hamilton",
        "last_name": "Blackburn",
        "phone": "1-676-857-1423",
        "site": "5"
      },
      "sites": {
        "name": "Singapore"
      }
    },
    {
      "DT_RowId":...