JSFiddle - React, Tailwind, and code Playground

by Andrey Gershun

HTML

<script src="https://cdn.rawgit.com/agershun/alasql/version-0.0.40/alasql.min.js"></script>
<div id="res"></div>
<div id="sql" style="display:none">
    CREATE TABLE wages
(
    emp_id        tinyint   identity,
    hourly_wage   decimal   NULL,
    salary        decimal   NULL,
    commission    decimal   NULL,
    num_sales     tinyint   NULL
);

INSERT wages (hourly_wage, salary, commission, num_sales)
VALUES
    (10.00, NULL, NULL, NULL),
    (20.00, NULL, NULL, NULL),
    (30.00, NULL, NULL, NULL),
    (40.00, NULL, NULL, NULL),
    (NULL, 10000.00, NULL, NULL),
    (NULL, 20000.00, NULL, NULL),
    (NULL, 30000.00, NULL, NULL),
    (NULL, 40000.00, NULL, NULL),
    (NULL, NULL, 15000, 3),
    (NULL, NULL, 25000, 2),
    (NULL, NULL, 20000, 6),
    (NULL, NULL, 14000, 4);

SELECT CAST(COALESCE(hourly_wage * 40 * 52, 
   salary, 
   commission * num_sales) AS money) AS [Total Salary]
INTO HTML("#res",{headers:true})
FROM wages
ORDER BY [Total Salary];
</div>

CSS

#res table {border: 1px solid black}
#res th {background:lightgray}
#res td {text-align:right; border:1px solid gray}

JavaScript

var res = alasql('SOURCE "#sql"');