FeatureTable widget with editing enabled

Explore in the sandboxView live

This sample demonstrates how to edit using the FeatureTable widget. In this example, editable data is enabled for editing within the widget. In order to enable this, the table's editingEnabled property must be set to true. Once set, the cell values within the table can be updated via a double-click.

Note that the service hosting the data must be enabled to allow editing. In this particular example, full editing privileges are granted on the data. It is also possible to restrict edit functionality even further at the field level. This is done by setting the table's fieldConfig.editable property to true within the table's field configurations. In this sample, the Case No. field is restricted to not allow editing.

In addition to showing tabular editing, this sample also demonstrates how to customize the feature table's menu. A custom Zoom to feature(s) button menu was created to zoom to the extent of the corresponding features of any selected rows within the table.

view.when(function () {
  // Create the feature layer
  featureLayer = new FeatureLayer({
    portalItem: {
      id: "3807c58dd48c4d32810042d8edf4a2fe"
    },
    outFields: ["*"],
    title: "Chicago crime incidents"
  });
  map.add(featureLayer);

// Create the feature table
const featureTable = new FeatureTable({
  view: view, // This must be set to enable highlight in the map
  layer: featureLayer,
  editingEnabled: true, // This must be set to enable editing in the table
  menuConfig: { // Creates a custom menu to zoom to selected features
    items: [{
      label: "Zoom to feature(s)",
      iconClass: "esri-icon-zoom-in-magnifying-glass",
      clickFunction: function(event) {
        zoomToSelectedFeature();
      }
    }]
  },
  // Autocast the FieldColumnConfigs
  fieldConfigs: [{
    name: "Case_Number",
    label: "Case No.",
    editable: false, // This disables editing for this specific field
    direction: "asc"
  },
  {
    name: "Primary_Type",
    label: "Crime type"
  },
  {
    name: "Location_Description",
    label: "Location description"
  },
  {
    name: "Arrest",
    label: "Arrest"
  },
  {
    name: "incident_date",
    label: "Date of incident"
  }],
  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.

// Get the FeatureLayer's layerView and 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 added selections to array
  changes.added.forEach(function(item) {
    const feature = item.feature;
    features.push({
      feature: feature
    });
  });
});
...

Lastly, zoom to the extent of the selected table rows/features. 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. This is handled in a custom ButtonMenu.

// This function is called above in the Feature Table's menuConfig property for `clickFunction`
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).catch(function(error) {
      if (error.name != "AbortError") {
        console.error(error);
      }
    });
  });
}
...