JSFiddle - React, Tailwind, and code Playground

by Kishore Sahasranaman

HTML

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2015.2.624/styles/kendo.common-material.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2015.2.624/styles/kendo.material.min.css">
<script src="https://kendo.cdn.telerik.com/2015.2.624/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2015.2.624/js/kendo.all.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jszip/2.4.0/jszip.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.4.0/jszip.js"></script>
<div id="example">
 <div>    <button id="export" class="k-button k-button-icontext"><span class="k-icon k-i-excel"></span>Export to Excel</button>
     <button id="exportPdf" class="k-button k-button-icontext"><span class="k-icon k-i-pdf"></span>Export to PDF</button> </div>
    <div id="configurator"></div>
    <div id="pivotgrid"></div>
</div>

CSS

html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }
#example { height : 100%; }
#pivotgrid {
    display: inline-block;
    vertical-align: top;
    width: 68%;
}
#configurator {
    display: inline-block;
    vertical-align: top;
    width: 30%;
}
@media screen and (max-width: 1023px) {
    #pivotgrid,
    #configurator {
        display: block;
    }
}

JavaScript

$(document).ready(function() {
      var pivotgrid = $("#pivotgrid").kendoPivotGrid({
          filterable: true,
          sortable: true,
          columnWidth: 200,
          height: 580,
          dataSource: {
              type: "xmla",
              /*columns: [{
                  name: "[Date].[Calendar]",
                  expand: true
              }, {
                  name: "[Product].[Category]"
              }],
              rows: [{
                  name: "[Geography].[City]"
              }],
              measures: ["[Measures].[Reseller Freight Cost]"],*/
              transport: {
                  connection: {
                      catalog: "BSMD_SSAS",
                      cube: "BSMD"
                  },
                 // read: "https://demos.telerik.com/olap/msmdpump.dll"
                  read: "http://10.201.1.14/olap/msmdpump.dll"
              },
              schema: {
                  type: "xmla"
              },
              error: function(e) {
                  alert("error: " + kendo.stringify(e.errors[0]));
              }
          }
      }).data("kendoPivotGrid");

      $("#configurator").kendoPivotConfigurator({
          dataSource: pivotgrid.dataSource,
          filterable: true,
          sortable: true,
          height: 580
      });
      
      $("#export").click(function() {
                pivotgrid.saveAsExcel();
      });
        $("#exportPdf").click(function() {
                pivotgrid.saveAsPDF();
            });
  });