FeatureTableViewModel

const featureTable = new FeatureTable({
  viewModel: { // autocasts as new FeatureTableViewModel
    layer: featureLayer,
    tableTemplate: tableTemplate //autocasts as new TableTemplate
  }
});

Property Overview

Property Details

activeFilters Collection<(GeometryFilter|SelectionFilter)>readonly

Since: ArcGIS Maps SDK for JavaScript 4.23

A read-only property indicating the type of filter used by the table. It returns either filters by geometry or selections using a row's ObjectId.

See also

• Sample - FeatureTable using a map

activeSortOrders ColumnSortOrder[]readonly

Since: ArcGIS Maps SDK for JavaScript 4.25

Use this read-only property if needing to query features while retaining a column's sort order. It returns an array of ColumnSortOrder. This contains a column's name and its sort direction. The sort priority is honored in the returned ColumnSortOrder if multiSortEnabled is true with a set initialSortPriority.

Default Value:[]

attachmentsEnabled Boolean

Indicates whether to display the Attachments field in the table. This is only applicable if the feature layer supports attachments, ie. featureLayer.capabilities.data.supportsAttachments = true. If true, will display the amount of attachments per feature.

Default Value:false

autoRefreshEnabled Boolean

Since: ArcGIS Maps SDK for JavaScript 4.23

Indicates whether to refresh the table when the layer is refreshed.

Default Value:true

declaredClass Stringreadonly inherited

The name of the class. The declared class name is formatted as esri.folder.className.

editingEnabled Boolean

Since: ArcGIS Maps SDK for JavaScript 4.16

Indicates whether editing is enabled on the data within the feature table. Double-clicking in a cell will enable editing for that value.

Editing permissions can be broken down with the following levels of priority:

1. 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. This can be overridden using a field column template.
2. Template - The editable permissions on a field can be configured by setting the editable property of the FieldColumnTemplate.
3. FeatureTable - The editingEnabled property must be set on the table in order for any type of editing to be enabled.

For example, if table editing is disabled on the widget, i.e. enableEditing is not set, it is still possible to enable editing for a specific column by setting the FieldColumnTemplate.editable property. Vice versa is also true, i.e. if table editing is enabled, a field configuration can be used to disable editing for a specific column.

Ultimately, if the service's field is not editable, it is not possible to override its permissions using one of the options above.

Default Value:false

See also

• Sample - FeatureTable with editing enabled

fieldConfigs FieldColumnConfig[]autocast

Deprecated since version 4.24. Use FieldColumnTemplate via the FeatureTable's tableTemplate.

An array of individual configuration objects. This is where you can specify what fields to display and how you wish to display them.

When not set, all fields except for CreationDate, Creator, EditDate, Editor, and GlobalID will be included. Otherwise, it is up to the developer to set the right field(s) to override and display.

Default Value:All fields except for `CreationDate`, `Creator`, `EditDate`, `Editor`, and `GlobalID`

filterGeometry Geometryautocast

Since: ArcGIS Maps SDK for JavaScript 4.19

Set this property to filter the features displayed in the table. It accepts a Geometry, e.g. Extent, and uses it as a spatial filter. When modifying this property, the FeatureTable will completely refresh and re-query for all features.

See also

• Sample - FeatureTable using a map

Example

// Listen for when the view is updated. If so, pass the new
// view.extent into the table's filterGeometry.
featureLayer.watch("loaded", () => {
  reactiveUtils.when(
    () => view.stationary === false,
    () => {
      // Get the new extent of view/map whenever map is updated
      if (view.extent) {
        // Filter and show only the visible
        // features in the feature table
        featureTable.viewModel.filterGeometry = view.extent;
      }
    },
    { initial: true }
  );
});

hiddenFields Collection<string>

Since: ArcGIS Maps SDK for JavaScript 4.16

A collection of string field.names that are to remain hidden within the table. By default fields such as CreationDate, Creator, EditDate, Editor, and GlobalID do not show. If these fields are needed, set them via TableTemplate.columnTemplates. In this case, it is also required that the column template's visible property is set to true.

Default Value:true

See also

• TableTemplate
• esri/widgets/FeatureTable/support/FieldColumnTemplate viewModel: { // autocasts as new FeatureTableViewModel layer: featureLayer, tableTemplate: tableTemplate //autocasts as new TableTemplate }

Examples

const featureTableVM = new FeatureTableViewModel({
  layer: featureLayer,
  hiddenFields: ["Primary_Type", "incident_date"], // will not show these two fields within the table
  },
  container: document.getElementById("tableDiv")
});

// Set this syntax if needing to display a default hidden field, e.g. 'CreationDate`
const featureTableVM = new FeatureTableViewModel({
  layer: featureLayer,
  tableTemplate: { // autocastable to TableTemplate
    customElements: [ // takes an array of FieldColumnTemplate and GroupColumnTemplate
    { //autocastable to FieldColumnTemplate
      type: "field",
      fieldName: "CreationDate",
      label: "Date created",
      visible: true
    }]
  },
  container: document.getElementById("tableDiv")
});

highlightEnabled Boolean

Since: ArcGIS Maps SDK for JavaScript 4.25

Indicates whether to highlight the associated feature when a row is selected.

Default Value:true

highlightIds Collection<number>

Since: ArcGIS Maps SDK for JavaScript 4.25

This property accepts and returns a collection of feature ObjectId's. Use this to access and control which features are currently selected in the table and subsequently highlighted within the map. Once an application sets a collection of ObjectId's, the table will select the corresponding row and highlight its feature within the map.

See also

• highlightEnabled

• Sample - FeatureTable using a map

Example

// This example instantiates the table with highlighted features
const featureTable = new FeatureTable({
  view: view,
  layer: featureLayer,
  container: "tableDiv",
  highlightIds
});

// Push the object ids into a collection and select
featureTable.viewModel.highlightIds.push(2, 3, 4);

// Listen for changes in the collection of highlighted features
featureTable.viewModel.highlightIds.on("change", (event) => {
  console.log("features selected", event.added);
  console.log("features deselected", event.removed);
});

highlightOnRowSelectEnabled Boolean

Since: ArcGIS Maps SDK for JavaScript 4.16

Deprecated since version 4.25. Use highlightEnabled instead.

Indicates whether to highlight the associated feature when a row is selected.

Default Value:true

layer FeatureLayer|SceneLayer|GeoJSONLayer|CSVLayer|WFSLayer|ImageryLayer

The associated FeatureLayer, SceneLayer, GeoJSONLayer, CSVLayer, ImageryLayer, or WFSLayer containing the fields and attributes to display within the widget. The table's pagination defaults to 50 records at a time. It is possible to set the default pagination using the FeatureTable's pageSize property.

• Support for GeoJSONLayer, CSVLayer, ImageryLayer, and WFSLayer was added at version 4.21.
• For an ImageryLayer to work with FeatureTable, it must have mosaic dataset. Currently, Map and FeatureTable interaction for ImageryLayers is not supported.

See also

• FeatureTable.pageSize

layerView LayerViewreadonly

The LayerView displaying data for the table's associated layer.

multiSortEnabled Boolean

Since: ArcGIS Maps SDK for JavaScript 4.23

Indicates whether sorting multiple columns is supported within the table. Use this in combination with the FieldColumnTemplate.initialSortPriority and FieldColumnTemplate.direction properties to set sorting functionality for multiple columns.

Default Value:false

See also

• FieldColumnTemplate.initialSortPriority
• FieldColumnTemplate.direction
• FeatureTable.sortColumn()

• Sample - FeatureTable with editing enabled

• Sample - FeatureTable

Example

const featureTableVM = new FeatureTableViewModel({
  layer: featureLayer,
  multiSortEnabled: true,
  tableTemplate: { // autocasts to TableTemplate
    columnTemplates: [ // takes an array of FieldColumnTemplate and GroupColumnTemplate
    { // autocasts to FieldColumnTemplate
      fieldName: "ObjectId",
      direction: "asc", // In order to use initialSortPriority, make sure direction is set
      initialSortPriority: 1, // This field's sort order takes second-highest priority.
    },
    {
      fieldName: "Name",
      direction: "asc", // In order to use initialSortPriority, make sure direction is set
      initialSortPriority: 0, // This field's sort order takes the highest priority.
    },
    {
      fieldName: "Status",
      direction: "asc", // In order to use initialSortPriority, make sure direction is set
      initialSortPriority: 2 // This field's sort order is prioritized after Name and ObjectId, respectively.
    }]
  },
  container: "tableDiv"
});

returnGeometryEnabled Boolean

Since: ArcGIS Maps SDK for JavaScript 4.27

Indicates whether to fetch geometries for the corresponding features displayed in the table. NOTE: Setting this to true can impact performance of the widget.

Default Value:false

state Stringreadonly

The view model's state.

Possible Values:"disabled"|"loading"|"loaded"|"ready"

Default Value:disabled

tableTemplate TableTemplate

Since: ArcGIS Maps SDK for JavaScript 4.24

The associated template used for the feature table.

The tableTemplate is where you configure how the feature table should display and set any associated properties for the table and its columns.

Example

const tableTemplate = new TableTemplate({
  columnTemplates: [ // takes an array of FieldColumnTemplate and GroupColumnTemplate
  { // autocasts to FieldColumnTemplate
    type: "field",
    fieldName: "ObjectId",
    direction: "asc", // In order to use initialSortPriority, make sure direction is set
    initialSortPriority: 1 // This field's sort order takes the second-highest priority.
  },
  {
    type: "field",
    fieldName: "NAME",
    label: "Name",
    asc: "asc", // In order to use initialSortPriority, make sure direction is set
    initialSortPriority: 0 // This field's sort order takes the highest priority
   },
   {
     type: "field",
     fieldName: "STATUS",
     label: "Status",
     direction: "asc", // In order to use initialSortPriority, make sure direction is set
     initialSortPriority: 2 // This field's sort order is prioritized after Name and ObjectId, respectively.
   }
  ]
});

view MapView|SceneView

A reference to the MapView or SceneView. This property must be set for the select/highlight in the map to work.

Method Overview

Method Details

addHandles(handleOrHandles, groupKey)inherited

Since: ArcGIS Maps SDK for JavaScript 4.25

Adds one or more handles which are to be tied to the lifecycle of the object. The handles will be removed when the object is destroyed.

// Manually manage handles
const handle = reactiveUtils.when(
  () => !view.updating,
  () => {
    wkidSelect.disabled = false;
  },
  { once: true }
);

this.addHandles(handle);

// Destroy the object
this.destroy();

Parameters

handleOrHandles WatchHandle|WatchHandle[] Handles marked for removal once the object is destroyed.

groupKey * optional Key identifying the group to which the handles should be added. All the handles in the group can later be removed with Accessor.removeHandles(). If no key is provided the handles are added to a default group.

clearHighlights()

Since: ArcGIS Maps SDK for JavaScript 4.16

Deprecated since version 4.25. Use highlightIds.removeAll() instead.

This clears any highlighted features.

The associated rows are not deselected.

clearSelection()

Since: ArcGIS Maps SDK for JavaScript 4.16

Deprecated since version 4.25. Use highlightIds.removeAll() instead.

Clears the current selection within the table.

clearSelectionFilter()

Since: ArcGIS Maps SDK for JavaScript 4.23

Clears the current filterBySelection so that the table displays all of the table rows.

See also

• filterBySelection

deleteSelection(showWarningPrompt){Promise<void>}

Since: ArcGIS Maps SDK for JavaScript 4.25

Deletes all the selected rows from the table.

There must be at least one selected row within the table for this to work. Also, make sure that editingEnabled is set to true and the underlying service data supports deletion.

Parameter

showWarningPrompt Boolean optional Indicates whether to display a prompt warning that the selected features will be deleted. Default behavior is to show a warning dialog before proceeding.

Returns

Type	Description
Promise<void>	Resolves when the selection is deleted.

deselectRows(params)

Since: ArcGIS Maps SDK for JavaScript 4.16

Unselects the specified rows within the table.

Parameter

params Number|Graphic|Array<(number|Graphic)> The selection parameters to deselect within the feature table. Takes either individual or multiple ObjectId(s) or Graphic(s).

See also

• Sample - FeatureTable with popup interaction

filterBySelection()

Since: ArcGIS Maps SDK for JavaScript 4.23

Filters the table using the current row selection and displays only those selected table rows.

getObjectIdIndex(objectId){Number}

Returns the current row index for the associated feature.

Parameter

objectId Number The ObjectId field of the specified feature.

Returns

Type	Description
Number	The feature's row index.

getValue(objectId, fieldName){String|Number|null}

Returns a field value given the specified feature ObjectId and an associated fieldName.

Parameters

objectId Number The ObjectId field of the specified feature.

fieldName String The name of the field in which to get the associated ObjectId's feature value.

Returns

Type	Description
String | Number | null	Associated value for the specified feature, as provided using its ObjectId, under the given field value.

Example

// Gets the field value for the specified field name, "OPENSTATUS" with the given feature ObjectId
const featureValue = featureTable.viewModel.getValue(feature.attributes.ObjectId, "OPENSTATUS");
console.log(featureValue);

hasHandles(groupKey){Boolean}inherited

Since: ArcGIS Maps SDK for JavaScript 4.25

Returns true if a named group of handles exist.

Parameter

groupKey * optional A group key.

Returns

Type	Description
Boolean	Returns true if a named group of handles exist.

Example

// Remove a named group of handles if they exist.
if (obj.hasHandles("watch-view-updates")) {
  obj.removeHandles("watch-view-updates");
}

refresh()

Since: ArcGIS Maps SDK for JavaScript 4.16

Refreshes the table contents while maintaining the current scroll position.

removeHandles(groupKey)inherited

Since: ArcGIS Maps SDK for JavaScript 4.25

Removes a group of handles owned by the object.

Parameter

groupKey * optional A group key or an array or collection of group keys to remove.

Example

obj.removeHandles(); // removes handles from default group

obj.removeHandles("handle-group");
obj.removeHandles("other-handle-group");

reset()

Since: ArcGIS Maps SDK for JavaScript 4.23

Performs a full reset of the entire table resulting in the table scrolling to the top-most row.

scrollToIndex(index)

Since: ArcGIS Maps SDK for JavaScript 4.19

Scrolls the table to a row based on a specified index.

Parameter

index Number Index of the row in which the table should scroll.

selectRows(params)

Since: ArcGIS Maps SDK for JavaScript 4.16

Deprecated since 4.25. Use highlightIds.add() instead.

Selects the specified rows within the table.

Parameter

params Number|Graphic|Array<(number|Graphic)> The selection parameters to select within the feature table.Takes either individual or multiple ObjectId(s) or Graphic(s).

zoomToSelection()

Since: ArcGIS Maps SDK for JavaScript 4.23

Zooms the view to the extent of the current row selection. This can also be triggered as a menu item within the table. This item will display if at least one row is selected and the view is set on the FeatureTable.

See also

• FeatureTable.visibleElements.menuItems.zoomToSelection

Type Definitions

ColumnSortOrder

An array of objects containing a column's name and sort direction. This is used in conjunction with activeSortOrders to help retain a column's sort order while querying.

Properties

fieldName String The field name as defined by the layer. Set this property to indicate which column to sort.

direction String|null Controls the sort order of the column given the set fieldName. Possible Value Description asc Sorts the column in ascending order. desc Sorts the column in descending order. null No sort is applied to the column. Possible Values:"asc"|"desc"

See also

• activeSortOrders

GeometryFilter

Use this for spatial filtering, it is the Geometry used to filter out data within the table.

Properties

type String The type of the filter used. This will always read as "geometry".

geometry Geometry The geometry used to filter out the table's data.

See also

• filterGeometry

• activeFilters

• Sample - FeatureTable using a map

SelectionFilter

Use this for selecting rows within the table based off of their ObjectId.

Properties

type String The type of the filter used. This will always read as "selection".

objectIds Number[] An array of numbers indicating the row's ObjectId's.

See also

• filterBySelection

• activeFilters