JSFiddle - React, Tailwind, and code Playground

by Lorenzo

HTML

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn3.devexpress.com/jslib/21.2.5/js/dx.all.js"></script>
<link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/21.2.5/css/dx.light.css">
<button id='bTest'>
test
</button>

<div class="dx-viewport demo-container">
  <div id="container">
    <div id="toolbar"></div>
    <div id="drawer" >
      <div id="content" class="dx-theme-background-color"></div>
    </div>
  </div>
</div>

JavaScript

$(() => {  
  const drawer = $('#drawer').dxDrawer({
    
    opened: true,
    height: "100vh",
    
    template() {
      const $treeview= $('<div>').width(200).addClass('panel-treeview');
      return $treeview.dxTreeView({          
        elementAttr: { class: 'dx-theme-accent-as-background-color' },
        items: products,
        width: 300,
        height: "100vh"
      })
    },
  }).dxDrawer('instance');

});

const products = [{
  id: '1',
  text: 'Stores',
  expanded: true,
  items: [{
    id: '1_1',
    text: 'Super Mart of the West'        
  }],
}];

$( "#bTest" ).click(function() {
  var vTest = "";
  for (var i = 0; i < 100; i++) {
    vTest += i + "<br/>";
  };
          
  $("#content").html(vTest);
});