JSFiddle - React, Tailwind, and code Playground

by carlbeech

HTML

<script src="https://rawgit.com/vitmalina/w2ui/master/dist/w2ui.es6.min.js"></script>
<link rel="stylesheet" href="https://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.css">
<script src="https://raw.githubusercontent.com/carlbeechvuw/carldemo/main/jsondata.json"></script>
<!DOCTYPE html>
<style>
	body {
  	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
       }
</style>
	<div id="DR_APPLICATIONS" style="position: absolute; width: 99%; height: 98%; z-index: 1;"></div>

JavaScript

import { w2layout, w2grid, w2toolbar, w2alert,w2form,w2utils,w2ui } from 'https://rawgit.com/vitmalina/w2ui/master/dist/w2ui.es6.min.js'
let config = {
    layout: {
        name: 'layout',
        padding: 4,
        panels: [
            { type: 'main', size: '50%', resizable: true, html: '<button class="w2ui-btn" onclick="action();">Locate</button>'  },
            { type: 'bottom', size: '50%', resizable: true  }
        ]
    },
			DRApplications: {

				name: 'DRApplications',
				method: 'GET',
				url: 'https://raw.githubusercontent.com/carlbeechvuw/carldemo/main/jsondata.json',
				fields: 
					[
					{ field : 'field1', text: 'field1', size: '200px' },
					{ field : 'field2', text: 'field2', size: '200px' },
					{ field : 'field3', text: 'field3', size: '300px' }
          
					]
				}
				}
let layout = new w2layout( config.layout )
let DRApplications = new w2form( config.DRApplications )
layout.render('#DR_APPLICATIONS')
layout.html('bottom',DRApplications)

window.action = function () {
	w2utils.settings.dataType = 'JSON';
  DRApplications.recid=1000043;
	DRApplications.reload();
}