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.
<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.
...
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);
})
);
});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.
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.
// 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),
};
}
);