JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.datatables.net/s/dt/dt-1.10.10,sc-1.4.0/datatables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/s/dt/dt-1.10.10,sc-1.4.0/datatables.min.css">
<input type="button" id="button" value="Click Me" />
<div id="results">
  <table id="TBresults" class="display" cellspacing="0" width="100%">
  </table>
</div>

CSS

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#map {
  height: 100%;
}

JavaScript

var tbdata = [];
var table;

table = $('#TBresults').DataTable({
  "bFilter": false,
  "bLengthChange": false,
  "bSearchable": false,
  "bSortable": false,
  "deferRender": true,
  "scrollY": 200,
  "scrollCollapse": true,
  "scroller": true,
  "columns": [{
    "title": "Name",
    "data": "Name"
  }, {
    "title": "Phone",
    "data": "Phone"
  }, {
    "title": "Website",
    "data": "Website"
  }, {
    "title": "Type",
    "data": "Type"
  }, {
    "title": "Address",
    "data": "Address"
  }, {
    "title": "lat",
    "visible": false,
    "data": "lat"
  }, {
    "title": "lon",
    "visible": false,
    "data": "lon"
  }]
});

$('#button').click(function() {
  var rows = {
    "Name": "Zkh. Maas & Kempen",
    "Phone": "+3289509200",
    "Website": "http://www.zmk.be/",
    "Type": "General hospital",
    "Country": "Belgium",
    "lat": "51.09573",
    "lon": "5.795289"
  }

  tbdata.push(rows);
  table.row.add(tbdata).draw();
});