JSFiddle - React, Tailwind, and code Playground

by Csaba Hellinger

HTML

<div class="database">
  <table id="myPeeps">  <!-- Would tables be best for this? -->
  </table>
</div>

<button id="test">Test</button>

CSS

table {
    border: 1px solid black;
    width: 400px;
}

JavaScript

$("#test").click(search);

function search() {
    // I assume you got something like this as the search results
    var searchResults = [
        {"firstName": "John", "lastName": "Smith", "age": 42},
        {"firstName": "Mary", "lastName": "Jones", "age": 36},
        {"firstName": "Paul", "lastName": "Brown", "age": 29}
    ];
    // create a table row for each result    
    var $table = $("#myPeeps"),
        index, item, $row;
    for (index=0; index<searchResults.length; index++) {
        item = searchResults[index];
        $row = $("<tr><td>" + item.firstName + "</td><td>" + item.lastName + "</td><td>" + item.age + "</td></tr>");
        $table.append($row);
    }
}