In short, I have defined my table in html file, then I use ajax with jQuery to retreive the html content with data from php file. I believe the problem has something to do with the timing, causing the table not to load properly.

app.js

    updateTable: function(value){
          $.ajax({
            type: "GET",
            url: "service.php?p=getRows",
            success: function(tableData){
              $('#adminView').html(tableData);
              // alert(tableData);
            }
          });
    }

index.html

    <!-- class="table-responsive" -->
    <div id="displayTable">
      <table         
        data-toggle="table"
        data-striped="true"
        data-pagination="true"
        data-page-list="[5, 10, 20, 50, 100, 200]"
        data-search="true"
        data-height="500" id="mainOverview" id="mainOverview">
        <thead>
          <th>Full Name</th>
          <th>Plate Number</th>
          <th>company name/th>
          <th>Description</th>
        </thead>
        <tbody id="adminView">
          <!--Data goes here-->
        </tbody>
      </table>
    </div>

service.php

    // Retrieve data
    $stmt = $db->prepare("SELECT * FROM crud ORDER BY id desc");

    // Execute query
    $stmt->execute();

    // Fetch data 
    while($row = $stmt->fetch()){
      // Inject backend data to frontend
      ?>
          <tr>
            <td><?php echo $row['fullname']?></td>  
            <td><?php echo $row['platenumber']?></td>
            <td><?php echo $row['companyname']?></td>
            <td><?php echo $row['description']?></td>
          </tr> 
      <?php
      }