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. 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 hide-selection-column 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 hide-selection-column hides the selection column in the table.
<arcgis-feature-table
reference-element="arcgis-map"
show-layer-dropdown
related-records-enabled
hide-selection-column
></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. The MapViewer table's action column 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.
reactiveUtils.when(
() => table.relatedTable,
(relatedTable) => {
// Configure the related table.
relatedTable.visibleElements.columnMenus = false;
relatedTable.visibleElements.selectionColumn = 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)
};
}
);