JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/alasql@latest"></script>
<script src="https://unpkg.com/mustache@3.0.1/mustache.js"></script>
<app>
  <names></names>
  <query></query>
</app>

JavaScript

// Fill table with data
const data = [ 
  { id: 1, name: 'bill', sex:'M', income:50000 },
  { id: 2, name: 'Jim', sex:'M', income:30000 },
  { id: 3, name: 'sara' , sex:'F', income:100000 }
];

const queryView = () => "<h3>Query Results</h3><ul id='result'><li>Name: {{name}}</li><li>Gender: {{sex}}</li></ul>",
      nameView  = () => "<h3>Users</h3><div id='result2'></div>"


// Do the query
results = { users: alasql("SELECT * FROM ? WHERE sex='M' AND income < 60000", [data])};
   
document.querySelector("query").innerHTML = Mustache.to_html(queryView(),
	results.users.find((user) => (user.income > 45000))
);

document.querySelector("names").innerHTML = Mustache.to_html(nameView());

alasql('SELECT name INTO HTML("#result2", {headers:true}) FROM ?', [data]);