index.html

<!doctype html>
<html>
<head>
    <title>Socket.IO chat</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font: 13px Helvetica, Arial;
        }

           </style>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet">
</head>
<body>
<table id="webpush"
       class="display nowrap table table-hover table-striped table-bordered"
       cellspacing="0" width="100%">
    <thead>
    <tr>
        <td>Property</td>
        <td>Reservations</td>
        <td>Total</td>
        <td>Occupancy</td>
    </tr>
    </thead>
    <tbody>
    </tbody>
</table>
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script>
    $(function () {
        var socket = io();
        socket.on('webpush', function (msg) {
            jQuery('#webpush').DataTable().destroy();
            $('#webpush').DataTable({
                'data': msg,
                'columns': [
                    {"data": "property"},
                    {"data": "reservations"},
                    {"data": "total"},
                    {"data": "occupancy"}
                ]
            });
        });
    });
</script>
</body>
</html>