JSFiddle - React, Tailwind, and code Playground

by iammapping

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/alasql/0.4.11/alasql.min.js"></script>
<p>ROLLUP()</p><div id="res1"></div>
<p>CUBE()</p><div id="res2"></div>
<p>GROUPING SETS()</p><div id="res3"></div>

CSS

table {border:1px solid black}

JavaScript

var testData = [
{ Phase: "Phase 1", Step: "Step 1", Task: "Task 1", Val: 5 },

{ Phase: "Phase 1", Step: "Step 2", Task: "Task 2", Val: 20 },
{ Phase: "Phase 2", Step: "Step 1", Task: "Task 1", Val: 25 },

{ Phase: "Phase 2", Step: "Step 2", Task: "Task 2", Val: 40 }
];

res = alasql('SELECT Phase, Step, SUM(Val) AS Val INTO HTML("#res1",{headers:true}) FROM ? GROUP BY ROLLUP(Phase,Step)', [testData]);
res = alasql('SELECT Phase, Step, SUM(Val) AS Val INTO HTML("#res2",{headers:true}) FROM ? GROUP BY CUBE(Phase,Step)', [testData]);

res = alasql('SELECT Phase, Step, SUM(Val) AS Val INTO HTML("#res3",{headers:true}) FROM ? GROUP BY GROUPING SETS(Phase,Step)', [testData]);