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 add sorting on multiple columns by setting multiSortEnabled to true.

Use dark colors for code blocksCopy
view.when(() => {
  // 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,
  multiSortEnabled: true, // Set this to enable sorting on multiple columns
  editingEnabled: true, // This must be set to enable editing in the table
  tableTemplate: { // autocast to TableTemplate
    columnTemplates: [ // takes an array of GroupColumnTemplate and FieldColumnTemplate
    { // autocast to GroupColumnTemplate
      type: "group",
      label: "Crime details",
      columnTemplates: [
      {
        type: "field",
        fieldName: "Primary_Type",
        label: "Crime type"
      },
      {
        type: "field",
        fieldName: "Description",
        label: "Description"
      },
      {
        type: "field",
        fieldName: "Location_Description",
        label: "Location description"
      }]
    },
    {
      type: "group",
      label: "Arrest information",
      columnTemplates: [
      {
        type: "field",
        fieldName: "Arrest",
        label: "Arrest"
      },
      {
        type: "field",
        fieldName: "incident_date",
        label: "Date of incident"
      },
      {
        type: "field",
        fieldName: "Case_Number",
        label: "Case No.",
        editable: false
      }]
    }]
  },
  container: document.getElementById("tableDiv")
});
...