Synchronize FeatureTable highlights and selection

This sample demonstrates how to synchronize highlighting features within a MapView and their corresponding rows in the FeatureTable widget. In addition, it also demonstrates how to synchronize a checked, i.e. selected, row in the table to what is shown as selected in the view and vice versa.

The ability to highlight rows without actually selecting them is handled by setting the table's rowHighlightIds. This property is similar to highlightIds. The only major difference is that there is no underlying selection happening within the row. Rather rowHighlightIds should be used purely for highlights, i.e. visual display. Please refer to the FeatureTable's selection and highlights section documentation for additional information on how this works.

How it works

The sample demonstrates this functionality through its table's cell events. When the mouse hovers over a cell, it will highlight a feature on the view using the cell-pointerover event. Whereas, when the mouse hovers out from a cell, it will remove any active feature highlights using the cell-pointerout event.

1
2
featureTable.on("cell-pointerover", ({ feature }) => addHighlight(feature));
featureTable.on("cell-pointerout", () => highlightHandles?.removeAll());

The above snippet handles interaction with the table to the view. The reverse functionality of view to table is handled by adding logic that performs a hitTest on the view. The underlying feature's object ID will then be passed to the FeatureTable's rowHighlightIds and a temporary highlight is added to the provided feature.

1
2
3
4
5
6
7
8
9
10
11
...
candidates.forEach(({ graphic }) => {
  featureTable.rowHighlightIds.add(graphic.getObjectId());
  addHighlight(graphic);
});

function addHighlight(feature) {
  if (featureTable.layerView && feature) {
    highlightHandles.add(featureTable.layerView.highlight(feature), feature.getObjectId());
  }
}

This sample also demonstrates the use of working with an ActionColumn. This column provides the ability to zoom to the feature of the selected feature of the corresponding row. This behavior is written in the FeatureTable's actionColumnConfig property.

1
2
3
4
5
6
7
8
9
10
const featureTable = new FeatureTable({
  returnGeometryEnabled: true,
  view: view,
  container: "tableContainer",
  actionColumnConfig: {
    label: "Zoom to feature",
    icon: "zoom-to-object",
    callback: ({ feature }) => view.goTo(feature)
  }
});