JSFiddle - React, Tailwind, and code Playground

by Alex Azuero

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Add zoom button to 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/dijit/themes/claro/claro.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/esri/css/esri.css">
    <style>
      body,html,#main{
        margin:0;
        padding:0;
        height:100%;
        width:100%;
        font: 16px Geneva, Arial, Helvetica, sans-serif;
      }
      #map{
        padding:0;
        border: 1px solid #b5bcc7;
      }
      .dgrid { border: none; height: 100%; }
      .dgrid-column-0 {
        width: 35px;
      }
      .dgrid-row-odd {
        background: #FFFDF3;
      }
      td div img:hover {
        cursor: pointer;
      }
    </style>
    <script src="https://js.arcgis.com/3.16/"></script>
    <script>
      var map, grid;
    /*
    optional:
    1. make field heading color rusty brown (and white on hover)
    2. make sure odd selected rows turn blue too
    3. figure out how to make zoom label the image (can't inject button in the constructor)
    */
      require([
        "esri/map", "esri/layers/FeatureLayer", "esri/symbols/SimpleFillSymbol",
        "esri/tasks/query", "esri/Color",
        "dgrid/OnDemandGrid", "dgrid/Selection", "dojo/store/Memory",
        "dojo/_base/array", "dojo/dom", "dijit/form/Button",
        "dojo/parser", "dojo/_base/declare",

        "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"
      ], function(
        Map, FeatureLayer, SimpleFillSymbol,
        Query, Color,
        Grid, Selection, Memory,
        array, dom, Button,
        parser, declare
      ) {

        parser.parse();

       ...