FeatureTable component

This sample demonstrates how to use the FeatureTable component to display attribute data from FeatureLayers within a webmap. The table's visible columns and order are saved within the webmap's JSON (i.e. in the AttributeTableInfo object) which maps to the layer's attributeTableTemplate beginning with version 4.31. These settings are automatically recognized and honored when displayed by the feature table. By default, the name of the relationship column displays whatever is set on the underlying feature service's relationship name. This sample updates the relationship column name by setting its corresponding AttributeTableTemplate's relationship element label.

The FeatureTable component is added to the app as shown below. Take note of the reference-element, show-layer-dropdown, related-records-enabled, and return-geometry-enabled attributes. Setting the reference element to the map enables highlighting corresponding features in the map once selected in the table. Next, setting the layer dropdown to display adds the ability to toggle layers on the table. Setting the related-records-enabled attribute allows any related records to display within the table. Lastly, by setting return-geometry-enabled returns geometries for the corresponding features displayed in the table. This is useful for the configured ActionColumn.

1
2
3
4
5
6
<arcgis-feature-table
  reference-element="arcgis-map"
  show-layer-dropdown
  related-records-enabled
  return-geometry-enabled>
</arcgis-feature-table>

Listen for the map to be ready. Once ready, iterate through the layers and find the layer titled "Region" and initialize. This is the layer that will display upon loading the table. If the layer's relationship id and its corresponding relationship element's id match, we update the element's label.

1
2
3
4
5
6
7
8
9
10
...
arcgisMap.addEventListener("arcgisViewReadyChange", async () => {
  const layers = arcgisMap.map.layers.items;
  await Promise.all(
    layers.map(async (layer) => {
      await processLayerRelationships(layer);
      if (layer.title === "Region") resolve(layer);
    })
  );
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
const processLayerRelationships = async (layer) => {
  // Ensure the layer is loaded
  if (!layer.loaded) await layer.load();

  // Check if the layer has relationships and an attribute table template
  if (layer.relationships?.length > 0 && layer.attributeTableTemplate?.elements) {
    for (const element of layer.attributeTableTemplate.elements) {
      if (element.type === "relationship") {
        // Match the relationship by ID and update its label
        const matchingRelationship = layer.relationships.find(
          (rel) => rel.id === element.relationshipId
          );

          // Update the relationship name and display within the column's label
          if (matchingRelationship) {
            const prefix = matchingRelationship.name.split("_")[0];
            element.label = `Related to: ${prefix}`;
          }
        }
      }
    }
  };

We then initialize the component with the layer to initially display. Since the action column which displays within the Map Viewer does not persist in the table's AttributeTableTemplate, set an ActionColumn on it.

1
2
3
4
5
6
7
8
table.layer = regionLayer;

// Add a custom action column for main table
table.actionColumnConfig = {
  label: "Go to feature",
  icon: "zoom-to-object",
  callback: (event) => arcgisMap.goTo(event.feature),
};

Lastly, we listen for when a related table is available and configure properties for its display.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// Monitor when the related table is loaded
reactiveUtils.when(
  () => table.relatedTable,
  (relatedTable) => {
    // Enable related records and configure the related table
    relatedTable.relatedRecordsEnabled = true;
    relatedTable.returnGeometryEnabled = true;
    relatedTable.visibleElements.columnMenus = false;

    // Add a custom action column for related tables
    relatedTable.actionColumnConfig = {
      label: `Go to ${relatedTable.layer.title} feature`,
      icon: "zoom-to-object",
      callback: (event) => arcgisMap.goTo(event.feature),
    };
  }
);

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.

The developer dashboard has moved

You can no longer sign into this site. Go to your ArcGIS portal or the ArcGIS Location Platform dashboard to perform management tasks.

Your ArcGIS portal

Create, manage, and access API keys and OAuth 2.0 developer credentials, hosted layers, and data services.

Your ArcGIS Location Platform dashboard

Manage billing, monitor service usage, and access additional resources.

Learn more about these changes in the What's new in Esri Developers June 2024 blog post.

Close