FeatureTableViewModel

AMD: require(["esri/widgets/FeatureTable/FeatureTableViewModel"], (FeatureTableVM) => { /* code goes here */ });
ESM: import FeatureTableVM from "@arcgis/core/widgets/FeatureTable/FeatureTableViewModel";
Class: esri/widgets/FeatureTable/FeatureTableViewModel
Inheritance: FeatureTableViewModel Accessor
Since: ArcGIS API for JavaScript 4.15

Provides the logic for the FeatureTable widget, which allows users to view content from feature attributes in a tabular format.

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

Constructors

new FeatureTableViewModel(properties)
Parameter:
properties Object
optional

See the properties for a list of all the properties that may be passed into the constructor.

Property Overview

Any properties can be set, retrieved or listened to. See the Working with Properties topic.
Show inherited properties Hide inherited properties
Name Type Summary Class
Collection<(GeometryFilter|SelectionFilter)>more details

A read-only property indicating the type of filter used by the table.

more detailsFeatureTableViewModel
Booleanmore details

Indicates whether to display the Attachments field in the table.

more detailsFeatureTableViewModel
Booleanmore details

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

more detailsFeatureTableViewModel
Stringmore details

The name of the class.

more detailsAccessor
Booleanmore details

Indicates whether editing is enabled on the data within the feature table.

more detailsFeatureTableViewModel
FieldColumnConfig[]more details

An array of individual configuration objects.

more detailsFeatureTableViewModel
Geometrymore details

Set this property to filter the features displayed in the table.

more detailsFeatureTableViewModel
Collection<string>more details

A collection of string field.names that are to remain hidden within the table.

more detailsFeatureTableViewModel
Booleanmore details

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

more detailsFeatureTableViewModel
FeatureLayer|SceneLayer|GeoJSONLayer|CSVLayer|WFSLayer|ImageryLayermore details

The associated FeatureLayer, SceneLayer, GeoJSONLayer, CSVLayer, ImageryLayer, or WFSLayer containing the fields and attributes to display within the widget.

more detailsFeatureTableViewModel
Booleanmore details

Indicates whether sorting multiple columns is supported within the table.

more detailsFeatureTableViewModel
Stringmore details

The view model's state.

more detailsFeatureTableViewModel
TableTemplatemore details

The associated template used for the feature table.

more detailsFeatureTableViewModel
MapView|SceneViewmore details

A reference to the MapView or SceneView.

more detailsFeatureTableViewModel

Property Details

activeFilters Collection<(GeometryFilter|SelectionFilter)>readonly
Since: ArcGIS API 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.

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. Currently, this field only displays the count of attachments per feature.

featuretable attachments enabled

Default Value:false
autoRefreshEnabled Boolean
Since: ArcGIS API 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 API 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.

featuretable editing

Default Value:false
See also:
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 API 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:
Example:
// Filter the table to only display the associated feature(s) that fall within the filterGeometry's geometry, (e.g. Extent)
featureLayer.viewModel.watch("loaded", () => {
  reactiveUtils.when(() => view.updating === 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;
    }
  });
});
hiddenFields Collection<string>
Since: ArcGIS API 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")
});
highlightOnRowSelectEnabled Boolean
Since: ArcGIS API for JavaScript 4.16

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

Default Value:true

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.

See also:
multiSortEnabled Boolean
Since: ArcGIS API 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:
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"
});
state Stringreadonly

The view model's state.

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

Default Value:disabled
tableTemplate TableTemplate
Since: ArcGIS API 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.
   }
  ]
});

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

Method Overview

Name Return Type Summary Class
more details

This clears any highlighted features.

more detailsFeatureTableViewModel
more details

Clears the current selection within the table.

more detailsFeatureTableViewModel
more details

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

more detailsFeatureTableViewModel
more details

Unselects the specified rows within the table.

more detailsFeatureTableViewModel
more details

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

more detailsFeatureTableViewModel
Numbermore details

Returns the current row index for the associated feature.

more detailsFeatureTableViewModel
String|Number|nullmore details

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

more detailsFeatureTableViewModel
more details

Refreshes the table contents while maintaining the current scroll position.

more detailsFeatureTableViewModel
more details

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

more detailsFeatureTableViewModel
more details

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

more detailsFeatureTableViewModel
more details

Selects the specified rows within the table.

more detailsFeatureTableViewModel
more details

Zooms the view to the extent of the current row selection.

more detailsFeatureTableViewModel

Method Details

clearHighlights()
Since: ArcGIS API for JavaScript 4.16

This clears any highlighted features.

The associated rows are not deselected.

clearSelection()
Since: ArcGIS API for JavaScript 4.16

Clears the current selection within the table.

clearSelectionFilter()
Since: ArcGIS API for JavaScript 4.23

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

See also:
deselectRows(params)
Since: ArcGIS API for JavaScript 4.16

Unselects the specified rows within the table.

Parameter:

The selection parameters to deselect within the feature table. Takes either individual or multiple ObjectId(s) or Graphic(s).

See also:
filterBySelection()
Since: ArcGIS API for JavaScript 4.23

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

See also:
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);
refresh()
Since: ArcGIS API for JavaScript 4.16

Refreshes the table contents while maintaining the current scroll position.

reset()
Since: ArcGIS API 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 API 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 API for JavaScript 4.16

Selects the specified rows within the table.

Parameter:

The selection parameters to select within the feature table.Takes either individual or multiple ObjectId(s) or Graphic(s).

See also:
zoomToSelection()
Since: ArcGIS API 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:

Type Definitions

GeometryFilter

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

Properties:
type String
optional

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

geometry Geometry
optional

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

See also:
SelectionFilter

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

Properties:
type String
optional

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

objectIds Number
optional

An array of numbers indicating the row's ObjectId's.

See also:

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.