FeatureTable with popup interaction | Sample | ArcGIS Maps SDK for JavaScript

Skip to content
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <title>FeatureTable with popup interaction | Sample | ArcGIS Maps SDK for JavaScript</title>

    <link rel="stylesheet" href="https://js.arcgis.com/5.0/esri/themes/light/main.css" />
    <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
    <script type="module" src="https://js.arcgis.com/5.0/"></script>

    <style>
      html,
      body {
        height: 100%;
        margin: 0;
      }

      .esri-popup--is-docked-top-right .esri-popup__main-container {
        max-height: 100%;
      }

      #appContainer {
        display: flex;
        flex-direction: column;
        height: 100%;
        width: 100%;
      }

      #viewDiv {
        flex: 1;
        width: 100%;
      }

      .container {
        display: flex;
        flex: 1;
        width: 100%;
      }

      .switch {
        position: relative;
        display: inline-block;
        width: 45px;
        height: 22px;
        vertical-align: middle;
      }

      .switch input {
        opacity: 0;
        width: 0;
        height: 0;
      }

      .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        -webkit-transition: 0.4s;
        transition: 0.4s;
      }

      .slider:before {
        position: absolute;
        content: "";
        height: 20px;
        width: 20px;
        left: 3px;
        bottom: 1px;
        background-color: white;
        -webkit-transition: 0.4s;
        transition: 0.4s;
      }

      input:checked + .slider {
        background-color: #2196f3;
      }

      input:focus + .slider {
        box-shadow: 0 0 1px #2196f3;
      }

      input:checked + .slider:before {
        -webkit-transform: translateX(20px);
        -ms-transform: translateX(20px);
        transform: translateX(20px);
      }

      /* Rounded sliders */

      .slider.round {
        border-radius: 20px;
      }

      .slider.round:before {
        border-radius: 50%;
      }

      .labelText {
        padding-left: 5px;
        font-size: 15px;
      }

      #mainDiv {
        padding: 8px;
      }
    </style>

    <script type="module">
      const [WebMap, MapView, FeatureLayer, FeatureTable, reactiveUtils] = await $arcgis.import([
        "@arcgis/core/WebMap.js",
        "@arcgis/core/views/MapView.js",
        "@arcgis/core/layers/FeatureLayer.js",
        "@arcgis/core/widgets/FeatureTable.js",
        "@arcgis/core/core/reactiveUtils.js",
      ]);

      let selectedFeature, id;

      const webmap = new WebMap({
        portalItem: {
          id: "209aa768f537468cb5f76f35baa7e013",
        },
      });

      const view = new MapView({
        map: webmap,
        container: "viewDiv",
        zoom: 3,
        center: [-98, 38.5],
        popup: {
          dockEnabled: true,
          dockOptions: {
            buttonEnabled: false,
            breakpoint: false,
          },
        },
      });

      // When view is ready, find feature layer and set title and outFields
      view.when(() => {
        const featureLayer = webmap.findLayerById("OverlaySchools_2862");
        featureLayer.title = "US Private school enrollment";
        featureLayer.outFields = ["*"];

        // Get references to div elements for toggling table visibility
        const appContainer = document.getElementById("appContainer");
        const tableContainer = document.getElementById("tableContainer");
        const tableDiv = document.getElementById("tableDiv");

        // Create FeatureTable
        const featureTable = new FeatureTable({
          view: view, // make sure to pass in view in order for selection to work
          layer: featureLayer,
          tableTemplate: {
            // autocasts to TableTemplate
            columnTemplates: [
              // takes an array of GroupColumnTemplate and FieldColumnTemplate
              {
                // autocasts to FieldColumnTemplate
                type: "field",
                fieldName: "state_name",
                label: "State",
                direction: "asc",
              },
              {
                type: "field",
                fieldName: "PercentagePrivate",
                label: "Private school percentage",
              },
              {
                type: "field",
                fieldName: "PercentagePublic",
                label: "Public school percentage",
              },
            ],
          },
          container: tableDiv,
        });

        // Add toggle visibility slider
        view.ui.add(document.getElementById("mainDiv"), "top-right");

        // Get reference to div elements
        const checkboxEle = document.getElementById("checkboxId");
        const labelText = document.getElementById("labelText");

        // Listen for when toggle is changed, call toggleFeatureTable function
        checkboxEle.onchange = () => {
          toggleFeatureTable();
        };

        function toggleFeatureTable() {
          // Check if the table is displayed, if so, toggle off. If not, display.
          if (!checkboxEle.checked) {
            appContainer.removeChild(tableContainer);
            labelText.textContent = "Show Feature Table";
          } else {
            appContainer.appendChild(tableContainer);
            labelText.textContent = "Hide Feature Table";
          }
        }

        // Watch for the popup's visible property. Once it is true, clear the current table selection and select the corresponding table row from the popup
        reactiveUtils.watch(
          () => view.popup.viewModel?.active,
          () => {
            selectedFeature = view.popup.selectedFeature;
            if (selectedFeature !== null && view.popup.visible !== false) {
              featureTable.highlightIds.removeAll();
              featureTable.highlightIds.add(view.popup.selectedFeature.attributes.OBJECTID);
              id = selectedFeature.getObjectId();
            }
          },
        );
      });
    </script>
  </head>

  <body>
    <div id="appContainer">
      <div id="viewDiv"></div>
      <div id="tableContainer" class="container">
        <div id="tableDiv"></div>
      </div>
      <div id="mainDiv" class="esri-widget">
        <label class="switch">
          <input id="checkboxId" type="checkbox" checked="yes" />
          <span class="slider round"></span>
        </label>
        <label class="labelText" id="labelText">Hide feature table</label>
      </div>
    </div>
  </body>
</html>