JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Alpine.js v3.x Ejemplo</title>
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">
  </head>

  <body class="p-m" x-data="componentData">


    <table class="table table-bordered table-responsive table-hover m-t-md">
      <thead>
        <tr>
          <th> Number </th>
          <th> Sample Field </th>
          <th> Indexes </th>
        </tr>
      </thead>
      <tbody>
        <template x-for="(group1, index1) in arrayGroup1" :key="index1">
          <template x-for="(group2, index2) in group1.arrayGroup2" :key="index2">
            <template x-for="(group3, index3) in group2.arrayGroup3" :key="index3">
              <template x-for="(group4, index4 ) in group3.arrayGroup4" :key="index4">
                <tr>
                  <td>
                    row number:
                    <span x-text="rowNumber++"></span>
                  </td>
                  <td>
                    <span x-text="group4.location"></span>
                  </td>
                  <td>
                    <div x-text="'index1:' + index1"></div>
                    <div x-text="'index2:' + index2"></div>
                    <div x-text="'index3:' + index3"></div>
                    <div x-text="'index4:' + index4"></div>
                  </td>
                </tr>
              </template>
            </template>
          </template>
       ...

JavaScript

document.addEventListener('alpine:init', () => {
  Alpine.data('componentData', () => ({
  	"rowNumber": 0,
    "arrayGroup1": [{
        "id": 684,
        "formalName": "TRADING COMPANY NORTHERN ROSES LLC",
        "arrayGroup2": [{
            "nickName": "no-nickName",
            "arrayGroup3": [{
              "sid": "cid_11527",
              "type": "TypeOne",
              "id": 11527,
              "arrayGroup4": [{
                  "location": "ESSAY LIVE, JOHN DOE, PLACE: SUGAR LOAF",
                  "samples": [{
                      "date": "2023-06-23",
                      "id": 66357
                    },
                    {
                      "date": "2023-06-23",
                      "id": 66356
                    }
                  ]
                },
                {
                  "location": "ESTATE FUTACUIN ROUTE 215 KM 60- PUYEHUE",
                  "samples": [{
                    "date": "2023-06-23",
                    "id": 66354
                  }]
                }
              ]
            }]
          },
          {
            "nickName": "John What",
            "arrayGroup3": [{
              "sid": "cid_11339",
              "type": "TypeOne",
              "id": 11339,
              "arrayGroup4": [{
                "location": "SOME LOCATION BETWEEN STATES",
                "samples": [{
                  "date": "2023-06-23",
                  "id": 66355
                }]
              }]
            }]
          }
        ]
      },
      {
        "id": 4556,
        "formalName": "JOHN DOE SMITH JOHNSON",
        "arrayGroup2": [{
          "nickName": "no-nickName",
          "arrayGroup3": [{
              "sid": "pid_1707",
              "type": "TypeTwo",
              "id": 1707,
              "arrayGroup4": [{
                "location": "THE APPLE ORCHARD, SAINT CHARLES",
                "samples": [{
                  "date": "2023-06-23",
                  "id": 66347
               ...