chore: add Realtime Trading to ViteJS demos

examples/example-grid-menu.html

@@ -49,7 +49,7 @@
       -moz-box-sizing: border-box;
       box-sizing: border-box;
     }
-    /** you could optionally style the grid menu column picker list with font-awesome checkboxes */
+    /** you could optionally style the grid menu column picker list with slickgrid icons (.sgi) */
     .slick-gridmenu-list li,
     .slick-columnpicker-list li {
       cursor: pointer;

vite-demo/package.json

@@ -14,6 +14,7 @@
     "sortablejs": "^1.15.3"
   },
   "devDependencies": {
+    "@fnando/sparkline": "^0.3.10",
     "sass": "^1.80.5",
     "vite": "^5.4.10"
   }

vite-demo/src/example-trading.html

@@ -0,0 +1,47 @@
+<div style="position:relative">
+  <div style="width:850px;">
+    <div class="grid-header" style="width:100%">
+      <label>SlickGrid - Trading Platform</label>
+    </div>
+    <div id="myGrid" class="slick-container alpine-theme" style="width:100%;height:500px;"></div>
+  </div>
+
+  <div class="options-panel" style="margin-left:175px">
+    <h2>
+      <a href="/examples/index.html" style="text-decoration: none; font-size: 22px">&#x2302;</a>
+      Search:
+    </h2>
+    <div style="padding:6px;">
+      <label style="width:200px;float:left">Changes Rate(ms): </label>
+      <div style="padding:2px;">
+        <input style="width:100px;display:inline-block;" id="refreshRateSlider" type="range" min="1" max="125" value="25">
+      </div>
+      <br/>
+      <label style="width:200px;float:left">Highlight Duration (ms): </label>
+      <div style="padding:2px;">
+        <input style="width:100px;display:inline-block;" id="highlightDuration" type="number" min="1" max="125" step="10" value="70">
+      </div>
+      <br/>
+      <label style="width:200px;float:left">Simulation:</label>
+      <button class="button" id="btnStartSimulation">Start</button>
+      <button class="button" id="btnStopSimulation">Stop</button>
+      <br/><br/>
+      <button class="button" data-test="group-currency-btn">Group by Currency</button>
+      <button class="button" data-test="group-market-btn">Group by Market</button>
+      <br/>
+      <button class="button" data-test="collapse-all-btn">Collapse all groups</button>
+      <button class="button" data-test="expand-all-btn">Expand all groups</button>
+      <button class="button" data-test="clear-grouping-btn">Clear grouping</button>
+
+      <h2>Demonstrates:</h2>
+      <ul>
+        <li>High Frequency Update - Realtime Trading Platform</li>
+      </ul>
+      <h2>View Source:</h2>
+      <ul>
+          <li><A href="https://github.com/6pac/SlickGrid/blob/master/vite-demo/src/example-trading.js" target="_sourcewindow"> View the source for this example on Github</a></li>
+      </ul>
+
+    </div>
+  </div>
+</div>