FeatureTable

If you wish to independently wire up selection and highlighting, set the table's highlightIds. Modifying this collection by adding or removing feature object IDs will automatically update the selection status of the corresponding rows in the table. To deselect all features, simply clear the collection.

Highlighting rows within the table can be accomplished using rowHighlightIds. This property allows for the visual differentiation of rows based on criteria such as specific values or edits, without affecting their selection status. For example, you can use it to highlight rows that contain a specific value or rows that have been edited.

// This snippet highlights rows within the table that have been edited.
featureTable.layer.on("edits", (event) => {
  event.updatedFeatures.forEach((feature) => {
    featureTable.rowHighlightIds.push(feature.getObjectId());
  });
});

Additionally, selection and highlight behavior can be enhanced using the feature table's events. These events are designed to listen for cell interaction and include: cell-click, cell-keydown, cell-pointerout, and cell-pointerover. The latter two events are especially useful for tasks such as highlighting a feature in the view while hovering over a cell, all doing so without requiring the end-user to select the row. For example, these events can be used to display cell information in a tooltip that is attached to the mouse cursor.

In short, the highlightIds property is used to control and synchronize selections between the FeatureTable and other components of the SDK, whereas rowHighlightIds is for adding a highlight to some rows, based on some other interaction within the application. It allows the ability to select specific rows based on actions performed in the application, such as hovering over a feature on the map or applying a filter through another widget.

• Filtering by selection- By default, the table displays all rows, regardless of their selection status. However, if needing to display only selected rows, set the filterBySelectionEnabled property to true. When set, the table will only display rows for selected features. This is useful for focusing on a specific subset of features. Setting the FeatureTable's objectIds performs similar functionality where only the set object IDs will display within the table. If the collection is empty, all features display. The difference between filterBySelectionEnabled and objectIds is the latter does not require a selection. Rather, it only displays features with a matching object ID, whereas setting filterBySelectionEnabled indicates to the table that it should only display features that are already selected. This selection is handled by passing in a collection of object IDs to the table's highlightIds. Setting this property selects the corresponding features within the table while highlighting them in the view. For an example of how to filter using these properties, see the sample FeatureTable with related records.
• Filtering by geometry- This is done by setting the filterGeometry property to a geometry. When set, the table will only display rows for features that intersect the geometry. This is useful for focusing on a specific subset of features that intersect a geometry. See the samples, FeatureTable with a map, and FeatureTable with related records) for an example of how to filter features by geometry.
• Filtering by time- To achieve this, configure the timeExtent property to a time extent. Once configured, the table will exclusively show rows corresponding to features that are within the defined time extent. Filtering by selection and geometry- This is accomplished by setting both the objectIds and filterGeometry properties. When set, the table will only display rows for features that match the corresponding object ID and and intersect the geometry.

It is possible to control sort order individually per column or on multiple columns. The latter is accomplished by setting the multiSortEnabled property to true. When set, the table will allow sorting on multiple columns. The table's sortColumn method is used to sort columns. This method takes the field name and sort order as parameters. The sort order can be set to either asc or desc. The priority of columns and their sort order can be set using initialSortPriority. This property is used to set the initial sort priority for a column.

Editing permissions can be separated into the following levels of priority:

• FeatureLayer.editingEnabled - This is derived from the layer's FeatureLayer property. This must always be true for editing to be enabled.
• Field - This is derived from the FeatureLayer. It takes what is set in the Field.editable property. This must always be true for editing to be enabled, although it can be overridden to false (not vice-versa) via a field column template.
• FeatureTable - The FeatureTable.editingEnabled property must be set on the table in order for any type of editing to be enabled.
• Template - The editable permissions on a field can be configured by setting the editable property of the FieldColumnTemplate.

The main difference with how related records work in comparison to the Editor widget is that the FeatureTable does not have to have a template configured with relationship information for it to be recognized and automatically picked up within the table. In order for related data to display within the table, the relatedRecordsEnabled property must be set to true, the origin table must have an associated relationship class, and its related data must also be contained within the map. If these conditions are met, any related records associated with the table's features will automatically display with embedded links to its related data. The FeatureTable also provides the ability to show nested related records, which are related records that contain their own related records. This is useful for displaying complex relationships within the table.

There are a couple of known limits when working with relationships in the FeatureTable:

• Displaying and editing related records is only supported using ArcGIS Online and ArcGIS Enterprise version 11.2 or higher feature services.
• Editing related records is only supported if the related table is editable.
• The related layers or tables must also be added to the map to be able to display related records within the table.

These column classes contain information about the current table state. And although it is possible to interact directly with these columns, ie. updating properties, calling methods, etc., the recommended approach is to set the tableTemplate with configured column templates prior to table creation. The reason for this is because templates are designed to help configure columns prior to table creation and will not update based on the table's underlying state changes.

At version 4.30, the FeatureTable's API has been improved to not regenerate columns unless in only very necessary cases, e.g. setting an entirely new tableTemplate and forcing the table to refresh. Although this approach is supported, it may not be necessary as it is possible to directly interact with the underlying columns and not cause unnecessary re-renders.

The column configuration of the FeatureTable is designed to be flexible, providing a rich user experience. While it is generally recommended to update the corresponding template when changes are made to a column's property, it is not mandatory if there is no need to regenerate columns forcefully.

• The ColumnTemplate class can be used to create and configure custom columns that display within the table.
• The FieldColumnTemplate class is tied to a layer and is used to configure and display field names and values within the table.
• Lastly, the GroupColumnTemplate class is used to configure grouped columns within the table. Each template contains the field name, label, and other properties that define the column's behavior. The following example demonstrates how to configure the field columns within the FeatureTable's table template:

const featureTable = new FeatureTable({
 view: view,
 layer: featureLayer,
 tableTemplate: ({  // autocastable to table template
   columns: [{
     type: "field", // autocastable to field column template
     fieldName: "field1",
     label: "Field 1"
   },
   {
     type: "field,"
     fieldName: "field2",
     label: "Field 2"
   }]
 }),
 container: "tableDiv"
});

The template classes are designed primarily to configure columns prior to table creation. Once the table is created, the templates will not update based on state changes. The underlying column classes have information about the current table state.

const columnConfig = new ColumnTemplate({
  fieldName: "rating_stars",
  icon: "inspection",
  label: "Average Rating",
  formatFunction: ({ feature, index }) => {
    // Reuse existing components for optimal performance
    let component = ratingComponentMap.get(index);
    if (component) {
      return component;
    }
    component = document.createElement("calcite-rating");
    component.readOnly = true;
    component.value = Math.round(Math.random() * 5);
    ratingComponentMap.set(index, component);
    return component;
  }
});

The default menu items can be configured to be hidden, disabled, or selected by default. The menu items can also be configured to include customized functionality. This is handled via the table's menuConfig property. This property takes an object where custom menu items are set within the table's menu. This object contains an array of menu items that define the label, icon, and click function for each item and whether these items should display by default.

If you want to clear the selection, you can use the clearSelection menu item provided by the API. If you want to delete selected records, you can use the deleteSelection menu item provided by the API. The following example demonstrates how to configure the menu items with similar functionality but with different icons. The default menu items are not hidden and the custom menu items are appended to the menu items. If you wish to hide the default menu items, you can set their visible element to false.

Default column menu items	Configured column menu items
	)

featureTable.menuConfig = {
  items: [
    {
      label: "Clear selection",
      icon: "erase",
      clickFunction: () => {
        featureTable.highlightIds.removeAll();
      }
    },
  {
    label: "Delete selection",
    icon: "group-x",
    clickFunction: () => {
      featureTable.viewModel.deleteSelectedRecords();
    }
  }]
};

In addition to configuring the table's menu items, it is also possible to configure an individual column's menu items. This is handled via the ColumnTemplate.menuConfig property. This is similar to what can be configured for the table's menuConfig, but also includes the ability to customize the column's menu icon, and the selection mode of the menu.

The following is an example of how to configure individual menu items within the FeatureTable's column menu. Similar to how the default table menu items are configured, any custom menu items are appended to the menu items. If you wish to hide the default menu items, you can set their visible element to false.

Default table menu items	Configured table menu items
	)

const columnTemplate = new FieldColumnTemplate({
  menuConfig: {
    items: [{
      label: "Sort Ascending",
      icon: "a-z-down",
      clickFunction: () => {
        featureTable.sortColumn(columnTemplate.fieldName, "asc");
      }
    },
    {
      label: "Sort Descending",
      icon: "a-z-up",
      clickFunction: () => {
        featureTable.sortColumn(columnTemplate.fieldName, "desc");
      }
    }]
   }
});