JSFiddle - React, Tailwind, and code Playground

by Alex Azuero

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>Map with a Dojo dGrid</title>

  <link rel="stylesheet" href="https://js.arcgis.com/3.16/dojo/resources/dojo.css">
  <link rel="stylesheet" href="https://js.arcgis.com/3.16/dgrid/css/dgrid.css">
  <link rel="stylesheet" href="https://js.arcgis.com/3.16/dgrid/css/skins/tundra.css">
  <link rel="stylesheet" href="https://js.arcgis.com/3.16/dijit/themes/tundra/tundra.css">
  <link rel="stylesheet" href="https://js.arcgis.com/3.16/esri/css/esri.css">
  <style>
    html, body {
      height: 100%;
      width: 100%; 
      margin: 0;
      padding: 0;
      overflow: hidden;
    }
    #container {
      height: 100%;
      visibility: hidden;
    }
    #bottomPane { height: 200px; }
    #grid { height: 100%; }
    .dgrid { border: none; }
    .field-id { cursor: pointer; }
  </style>

  <script src="https://js.arcgis.com/3.16/"></script>
  <script>
    // load dgrid, esri and dojo modules
    // create the grid and the map
    // then parse the dijit layout dijits
    require([
      "dojo/ready",
      "dgrid/OnDemandGrid",
      "dgrid/Selection",
      "dojo/store/Memory",
      "dojo/_base/array",
      "dojo/dom-style",
      "dijit/registry",
      "esri/map",
      "esri/layers/FeatureLayer",
      "esri/symbols/SimpleFillSymbol",
      "esri/tasks/QueryTask",
      "esri/tasks/query",
      "dojo/_base/declare",
      "dojo/number",
      "dojo/on",
      "dojo/parser",
      "dijit/layout/BorderContainer",
      "dijit/layout/ContentPane"
      ], function(
        ready,
        Grid,
        Selection,
        Memory,
        array,
        domStyle,
        registry,
        Map,
        FeatureLayer,
        SimpleFillSymbol,
        QueryTask,
        Query,
        declare,
        dojoNum,
        on,
        parser
      ) {
        ready(function() {

          parser.parse();

          // create the...