Array of arrays

HTML

<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<table id="reservations" >
        <thead>
            <tr>
                <th>ID</th>
                <th>User</th>
                <th>Open Date</th>
                <th>Ticket Status</th>
                <th>End Date</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
  </table>

CSS

div {  
margin: 5px;    
}

table {
 border: 2px solid black;   
}

td {
    padding: 10px;
 border: 1px solid lightgrey; 
}

JavaScript

var reservations = [
  { "ID": "01", 'User': 'John P.', 'Open Date':'2017-08-04 01:34:18','End Date':'2017-09-05 00:29:01',"Ticket Status":"Transferred"},
  { "ID": "02", 'User': 'John C.', 'Open Date':'2016-08-04 01:14:18','End Date':'2017-09-04 00:59:01',"Ticket Status":"Closed"}
];

var tbody = $('#reservations tbody'),
    props = ["ID", "User", "Open Date", "Ticket Status", "End Date"];
$.each(reservations, function(i, reservation) {
  var tr = $('<tr>');
  $.each(props, function(i, prop) {
    $('<td>').html(reservation[prop]).appendTo(tr);  
  });
  tbody.append(tr);
});

$(document).ready(function(){
    $('#reservations').DataTable();
});