Note: Support for 3D on mobile devices may vary, view the system requirements for more information.

This sample demonstrates how to add a FeatureTable widget to your application. The FeatureTable widget allows users to view and sort data and attributes from a FeatureLayer. In this example, the table is displayed in addition to its associated map. Any selected features from the table can be zoomed to their extent by clicking on the Zoom to selected feature(s) button in the upper right-hand corner.

It is possible to select a feature in the table and have its associated feature automatically reflect as highlighted in the map. In order for this to work correctly, the table's view property must be set. Currently, there is no direct way in the API to wire up selecting a feature in the map and have its associated row in the table selected. This sample demonstrates how to select a feature in the map and have that selection reflected within the table.

First, we add the FeatureTable with a specified FeatureLayer and fields to display. In addition, the view must also be set in order for any selected row(s) in the table to display its associated feature(s) as highlighted in the map.

view.when(function() {
  //grabs the first layer in the map
  const featureLayer = webmap.layers.getItemAt(0);
  featureLayer.title = "USFS Recreational areas";

  // Create the feature table
  const featureTable = new FeatureTable({
    layer: featureLayer,
    view: view, // required for feature highlight to work
    // Autocast the FieldColumnConfigs
    fieldConfigs: [{
      name: "RECAREANAM",
      label: "Recreation area name",
      direction: "asc"
    },
    {
      name: "FORESTNAME",
      label: "Forest name"
    },
    {
      name: "OPENSTATUS",
      label: "Open status"
    },
    {
      name: "OPEN_SEASO",
      label: "Season begins"
    },
    {
      name: "RECAREADES",
      label: "Recreation description"
    },
    {
      name: "RESTRICTIO",
      label: "Restrictions"
    }
  ],
  container: document.getElementById("tableDiv")
});
...

Next, listen to the table's selection-change event. If the row (feature) is checked, or added to the selected features, add it to the features[] array. If unchecked, remove it.

// Listen for the table's selection-change event
  featureTable.on("selection-change", function(changes) {
  // If the selection is removed, remove the feature from the array
  changes.removed.forEach(function(item) {
    const data = features.find(function(data) {
      return data.feature === item.feature;
      });
      if (data) {
        features.splice(features.indexOf(data), 1);
      }
    });

    // If the selection is added, push all selections to array
    changes.added.forEach(function(item) {
      const feature = item.feature;
      features.push({
        feature: feature
      });
    });
  });

This application also listens for the view's immediate-click event. It performs a hitTest on the point location and, if applicable, selects the corresponding feature's row in the table.

// Listen for the click on the view and select any associated row in the table
view.on("immediate-click", function(event) {
  view.hitTest(event).then(function(response) {
    const candidate = response.results.find(function(result) {
      return result.graphic && result.graphic.layer && result.graphic.layer === featureLayer;
    });
    // Select the rows of the clicked feature
    candidate && featureTable.selectRows(candidate.graphic);
  });
});

Lastly, zoom to the extent of the selected table's row(s)/feature(s). If one feature is selected, it will zoom to that one point location. If multiple rows/features are selected, it zooms to the combined extent of all point locations.

// fires when "Zoom to selected feature(s)" button is clicked
function zoomToSelectedFeature() {
  // Create a query off of the feature layer
  const query = featureLayer.createQuery();
  // Iterate through the features and grab the feature's objectID
  const featureIds = features.map(function (result) {
    return result.feature.getAttribute(featureLayer.objectIdField);
  });
  // Set the query's objectId
  query.objectIds = featureIds;
  // Make sure to return the geometry to zoom to
  query.returnGeometry = true;
  // Call queryFeatures on the feature layer and zoom to the resulting features
  featureLayer.queryFeatures(query).then(function (results) {
    view.goTo(results.features);
  });
}
...

In addition to the using a table with an existing map, it is also possible to use the FeatureTable widget as a standalone table. Please refer to the FeatureTable Widget sample for an example of how to do this.