JSFiddle - React, Tailwind, and code Playground

by akaimo

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdn3.devexpress.com/jslib/17.2.7/js/dx.all.js"></script>

<div class="dx-viewport demo-container">
  <div id="sales"></div>
  <div class="options">
    <div class="caption">Options</div>
    <div class="option">
      <div id="show-data-fields"></div>
    </div>
    <div class="option">
      <div id="show-row-fields"></div>
    </div>
    <div class="option">
      <div id="show-column-fields"></div>
    </div>
    <div class="option">
      <div id="show-filter-fields"></div>
    </div>
  </div>
</div>

CSS

#sales {
    max-height: 570px;
}

.options {
    padding: 20px;
    margin-top: 20px;
    background-color: rgba(191, 191, 191, 0.15);
}

.caption {
    font-size: 18px;
    font-weight: 500;
}

.option {
    width: 24%;
    display: inline-block;
    margin-top: 10px;
}

JavaScript

DevExpress.viz.currentTheme("generic.light");
$(function(){

    var salesPivotGrid = $("#sales").dxPivotGrid({
        onContentReady: function(e){
            e.element.find(".dx-header-filter").click(function() {
                setTimeout(() => {
                    if ($(".dx-header-filter-menu.dx-popup").length) {
                    	var popup = $(".dx-header-filter-menu.dx-popup").dxPopup("instance");
                    	if (popup.content().find(".dx-list").length) {
                    		var list = popup.content().find(".dx-list").dxList("instance");
                    		list.option("selectionMode", "single");
                        }
                	}
                }, 100);
            });
        },
        allowSortingBySummary: true,
        allowSorting: true,
        allowFiltering: true,
        height: 490,
        showBorders: true,
        fieldPanel: {
            showColumnFields: true,
            showDataFields: true,
            showFilterFields: true,
            showRowFields: true,
            allowFieldDragging: true,
            visible: true
        },
        dataSource: {
            fields: [{
                caption: "Region",
                width: 120,
                dataField: "region",
                area: "row" 
            }, {
                dataField: "date",
                dataType: "date",
                area: "column"
            }, {
                dataField: "sales",
                dataType: "number",
                summaryType: "sum",
                format: "currency",
                area: "data"
            }],
            store: sales
        },
        onContextMenuPreparing: contextMenuPreparing
    }).dxPivotGrid("instance");
    
    $("#show-data-fields").dxCheckBox({
        text: "Show Data Fields",
        value: true,
        onValueChanged: function(data) {
            salesPivotGrid.option("fieldPanel.showDataFields", data.value);
        }
    });
    
   ...