Moving Demos to examples folder

tutorials/vueExample.js → docs/docs/examples/46-vue-demo.mdx

@@ -1,3 +1,11 @@
+---
+title: Vue Demo
+---
+
+<SandpackEditor>
+
+```js 
+
 Vue.config.ignoredElements = ['canvas-datagrid'];
 new Vue({
     el: '#app',
@@ -11,3 +19,6 @@ new Vue({
         }
     }
 });
+```
+
+</SandpackEditor>

tutorials/amdDemo.js → docs/docs/examples/47-Webpack3-AMD.mdx

@@ -1,4 +1,11 @@
-/*jslint browser: true */
+---
+title: Webpack3 AMD Demo
+---
+
+<SandpackEditor>
+
+```js 
+
 require(['../dist/canvas-datagrid.debug.js'], function (dataGrid) {
     'use strict';
     var grid = dataGrid({
@@ -20,3 +27,6 @@ require(['../dist/canvas-datagrid.debug.js'], function (dataGrid) {
     });
     grid.data = [{a: 0, b: 1, c: 2}];
 });
+```
+
+</SandpackEditor>

tutorials/largeArraysDemo.js → docs/docs/examples/48-largeArrays.mdx

@@ -1,3 +1,11 @@
+---
+title:  Large Arrays
+---
+
+<SandpackEditor>
+
+```js
+
 /*jslint browser: true*/
 /*globals canvasDatagrid: false*/
 function g() {
@@ -19,4 +27,8 @@ function g() {
     grid.style.width = '100%';
     grid.schema = schema;
     grid.data = data;
-}
+}
+
+```
+
+</SandpackEditor>

tutorials/sparklineDemo.js → docs/docs/examples/49-sparkline.mdx

@@ -1,3 +1,10 @@
+---
+title: Sparkline Demo
+---
+
+<SandpackEditor>
+
+```js
 /*jslint browser: true*/
 /*globals canvasDatagrid: false*/
 document.addEventListener('DOMContentLoaded', function () {
@@ -143,4 +150,8 @@ document.addEventListener('DOMContentLoaded', function () {
         setTimeout(getData, 50);
     }
     getData(true);
-});
+});
+
+
+```
+</SandpackEditor>

tutorials/reactExample.js → docs/docs/examples/50-react-demo.mdx

@@ -1,3 +1,11 @@
+---
+title: React Demo
+---
+
+<SandpackEditor>
+
+```js
+
 /*jslint browser: true, es6: true*/
 class CanvasDatagrid extends React.Component {
     constructor(props) {
@@ -64,3 +72,7 @@ function getRandomData() {
 }
 var grid = React.createElement(GenerateRandomDataButton, {});
 ReactDOM.render(grid, document.getElementById('root'));
+
+
+```
+</SandpackEditor>

tutorials/xhrPagingDemo.js → docs/docs/examples/51-xhr-demo.mdx

@@ -1,3 +1,11 @@
+---
+title: XHR Demo 
+---
+
+<SandpackEditor>
+
+```js
+
 /*jslint browser: true*/
 /*globals canvasDatagrid: false*/
 function demo() {
@@ -128,3 +136,6 @@ function demo() {
     dataAdapter(0, 100, updateLocalCache);
 }
 document.addEventListener('DOMContentLoaded', demo);
+
+```
+</SandpackEditor>