require(["esri/widgets/FeatureTable/FeatureTableViewModel"], (FeatureTableVM) => { /* code goes here */ });
import FeatureTableVM from "@arcgis/core/widgets/FeatureTable/FeatureTableViewModel.js";
esri/widgets/FeatureTable/FeatureTableViewModel
Provides the logic for the FeatureTable widget, which allows users to view content from feature attributes in a tabular format.
- See also
const featureTable = new FeatureTable({
viewModel: { // autocasts as new FeatureTableViewModel
layer: featureLayer,
tableTemplate: tableTemplate //autocasts as new TableTemplate
}
});
Constructors
-
Parameterproperties Objectoptional
See the properties for a list of all the properties that may be passed into the constructor.
Property Overview
Name | Type | Summary | Class |
---|---|---|---|
Collection<(GeometryFilter|SelectionFilter)> | A read-only property indicating the type of filter used by the table. | FeatureTableViewModel | |
ColumnSortOrder[] | Use this read-only property if needing to query features while retaining a column's sort order. | FeatureTableViewModel | |
Boolean | Indicates whether to display the | FeatureTableViewModel | |
Boolean | Indicates whether to refresh the table when the layer is refreshed. | FeatureTableViewModel | |
String | The name of the class. | Accessor | |
Boolean | Indicates whether editing is enabled on the data within the feature table. | FeatureTableViewModel | |
Geometry | Set this property to filter the features displayed in the table. | FeatureTableViewModel | |
Collection<string> | A collection of string field.names that are to remain hidden within the table. | FeatureTableViewModel | |
Boolean | Indicates whether to highlight the associated feature when a row is selected. | FeatureTableViewModel | |
Collection<number> | This property accepts and returns a collection of feature ObjectId's. | FeatureTableViewModel | |
Boolean | Indicates whether to highlight the associated feature when a row is selected. | FeatureTableViewModel | |
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. | FeatureTableViewModel | |
LayerView | The LayerView displaying data for the table's associated layer. | FeatureTableViewModel | |
Boolean | Indicates whether sorting multiple columns is supported within the table. | FeatureTableViewModel | |
Boolean | Indicates whether to fetch geometries for the corresponding features displayed in the table. | FeatureTableViewModel | |
String | The view model's state. | FeatureTableViewModel | |
TableTemplate | The associated template used for the feature table. | FeatureTableViewModel | |
String | Dates and times displayed in the widget will be in terms of this time zone. | FeatureTableViewModel | |
MapView|SceneView | FeatureTableViewModel |
Property Details
-
activeFilters
activeFilters Collection<(GeometryFilter|SelectionFilter)>readonly
Since: ArcGIS Maps SDK for JavaScript 4.23FeatureTableViewModel since 4.15, activeFilters added at 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
-
activeSortOrders
activeSortOrders ColumnSortOrder[]readonly
Since: ArcGIS Maps SDK for JavaScript 4.25FeatureTableViewModel since 4.15, activeSortOrders added at 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
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. Iftrue
, will display the amount of attachments per feature.- Default Value:false
-
autoRefreshEnabled
autoRefreshEnabled Boolean
Since: ArcGIS Maps SDK for JavaScript 4.23FeatureTableViewModel since 4.15, autoRefreshEnabled added at 4.23. -
Indicates whether to refresh the table when the layer is refreshed.
- Default Value:true
-
editingEnabled
editingEnabled Boolean
Since: ArcGIS Maps SDK for JavaScript 4.16FeatureTableViewModel since 4.15, editingEnabled added at 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:
- 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. - Template - The editable permissions on a field can be set by setting the editable property of the FieldColumnTemplate.
- 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, fields can be configured 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
- Field - This is derived
from the FeatureLayer. It takes what is set in the Field.editable property. This
must always be
-
Since: ArcGIS Maps SDK for JavaScript 4.19FeatureTableViewModel since 4.15, filterGeometry added at 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// Listen for when the view is updated. If so, pass the new // view.extent into the table's filterGeometry. await whenOnce(() => featureLayer.loaded); reactiveUtils.when( () => view.stationary === false && !!view.extent, () => { // Filter and show only the visible features in the feature table featureTable.viewModel.filterGeometry = view.extent; }, { initial: true } );
-
hiddenFields
hiddenFields Collection<string>
FeatureTableViewModel since 4.15, hiddenFields added at 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
, andGlobalID
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 totrue
.- Default Value:true
- See also
-
- TableTemplate
- esri/widgets/FeatureTable/support/FieldColumnTemplate viewModel: { // autocasts as new FeatureTableViewModel layer: featureLayer, tableTemplate: tableTemplate //autocasts as new TableTemplate }
Examplesconst 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: { // autocasts to TableTemplate customTemplates: [ // takes an array of FieldColumnTemplate and GroupColumnTemplate { //autocasts to FieldColumnTemplate type: "field", fieldName: "CreationDate", label: "Date created", visible: true }] }, container: document.getElementById("tableDiv") });
-
highlightEnabled
highlightEnabled Boolean
Since: ArcGIS Maps SDK for JavaScript 4.25FeatureTableViewModel since 4.15, highlightEnabled added at 4.25. -
Indicates whether to highlight the associated feature when a row is selected.
- Default Value:true
-
highlightIds
highlightIds Collection<number>
Since: ArcGIS Maps SDK for JavaScript 4.25FeatureTableViewModel since 4.15, highlightIds added at 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.
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
highlightOnRowSelectEnabled Boolean
Since: ArcGIS Maps SDK for JavaScript 4.16FeatureTableViewModel since 4.15, highlightOnRowSelectEnabled added at 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
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
-
layerView
layerView LayerViewreadonly
-
-
multiSortEnabled
multiSortEnabled Boolean
Since: ArcGIS Maps SDK for JavaScript 4.23FeatureTableViewModel since 4.15, multiSortEnabled added at 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.
Exampleconst 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
returnGeometryEnabled Boolean
Since: ArcGIS Maps SDK for JavaScript 4.27FeatureTableViewModel since 4.15, returnGeometryEnabled added at 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
state Stringreadonly
-
The view model's state.
Possible Values:"disabled"|"loading"|"loaded"|"ready"
- Default Value:ready
-
tableTemplate
tableTemplate TableTemplate
Since: ArcGIS Maps SDK for JavaScript 4.24FeatureTableViewModel since 4.15, tableTemplate added at 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.
Exampleconst 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. } ] });
-
timeZone
timeZone String
Since: ArcGIS Maps SDK for JavaScript 4.28FeatureTableViewModel since 4.15, timeZone added at 4.28. -
Dates and times displayed in the widget will be in terms of this time zone. If not supplied, the view's time zone is typically used (if available). Depending on the field type, individual columns may have their own unique time zone behavior when the time zone itself is
unknown
.
Method Overview
Name | Return Type | Summary | Class |
---|---|---|---|
Adds one or more handles which are to be tied to the lifecycle of the object. | Accessor | ||
Clears the current selection within the table. | FeatureTableViewModel | ||
Clears the current filterBySelection so that the table displays all of the table rows. | FeatureTableViewModel | ||
Promise<void> | Deletes all the selected rows from the table. | FeatureTableViewModel | |
Unselects the specified rows within the table. | FeatureTableViewModel | ||
Filters the table using the current row selection and displays only those selected table rows. | FeatureTableViewModel | ||
Number | Returns the current row index for the associated feature. | FeatureTableViewModel | |
String|Number|null | Returns a field value given the specified feature | FeatureTableViewModel | |
Boolean | Returns true if a named group of handles exist. | Accessor | |
Refreshes the table contents while maintaining the current scroll position. | FeatureTableViewModel | ||
Removes a group of handles owned by the object. | Accessor | ||
Performs a full reset of the entire table resulting in the table scrolling to the top-most row. | FeatureTableViewModel | ||
Scrolls the table to a row based on a specified index. | FeatureTableViewModel | ||
Selects the specified rows within the table. | FeatureTableViewModel | ||
Zooms the view to the extent of the current row selection. | FeatureTableViewModel |
Method Details
-
Inherited from Accessor
Since: ArcGIS Maps SDK for JavaScript 4.25Accessor since 4.0, addHandles added at 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();
ParametershandleOrHandles WatchHandle|WatchHandle[]Handles marked for removal once the object is destroyed.
groupKey *optionalKey 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.
-
Since: ArcGIS Maps SDK for JavaScript 4.16FeatureTableViewModel since 4.15, clearSelection added at 4.16. Deprecated since version 4.25. Use highlightIds.removeAll() instead. -
Clears the current selection within the table.
-
Since: ArcGIS Maps SDK for JavaScript 4.23FeatureTableViewModel since 4.15, clearSelectionFilter added at 4.23. -
Clears the current filterBySelection so that the table displays all of the table rows.
- See also
-
deleteSelection
deleteSelection(showWarningPrompt){Promise<void>}
Since: ArcGIS Maps SDK for JavaScript 4.25FeatureTableViewModel since 4.15, deleteSelection added at 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.ParametershowWarningPrompt BooleanoptionalIndicates whether to display a prompt warning that the selected features will be deleted. Default behavior is to show a warning dialog before proceeding.
ReturnsType Description Promise<void> Resolves when the selection is deleted.
-
Since: ArcGIS Maps SDK for JavaScript 4.16FeatureTableViewModel since 4.15, deselectRows added at 4.16. -
Unselects the specified rows within the table.
ParameterThe selection parameters to deselect within the feature table. Takes either individual or multiple ObjectId(s) or Graphic(s).
-
Since: ArcGIS Maps SDK for JavaScript 4.23FeatureTableViewModel since 4.15, filterBySelection added at 4.23. -
Filters the table using the current row selection and displays only those selected table rows.
-
Returns a field value given the specified feature
ObjectId
and an associatedfieldName
.ParametersobjectId NumberThe
ObjectId
field of the specified feature.fieldName StringThe name of the field in which to get the associated
ObjectId
's feature value.ReturnsType 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
InheritedMethodhasHandles(groupKey){Boolean}
Inherited from AccessorSince: ArcGIS Maps SDK for JavaScript 4.25Accessor since 4.0, hasHandles added at 4.25. -
Returns true if a named group of handles exist.
ParametergroupKey *optionalA group key.
ReturnsType 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"); }
-
Since: ArcGIS Maps SDK for JavaScript 4.16FeatureTableViewModel since 4.15, refresh added at 4.16. -
Refreshes the table contents while maintaining the current scroll position.
-
Inherited from Accessor
Since: ArcGIS Maps SDK for JavaScript 4.25Accessor since 4.0, removeHandles added at 4.25. -
Removes a group of handles owned by the object.
ParametergroupKey *optionalA group key or an array or collection of group keys to remove.
Exampleobj.removeHandles(); // removes handles from default group obj.removeHandles("handle-group"); obj.removeHandles("other-handle-group");
-
Since: ArcGIS Maps SDK for JavaScript 4.23FeatureTableViewModel since 4.15, reset added at 4.23. -
Performs a full reset of the entire table resulting in the table scrolling to the top-most row.
-
Since: ArcGIS Maps SDK for JavaScript 4.19FeatureTableViewModel since 4.15, scrollToIndex added at 4.19. -
Scrolls the table to a row based on a specified index.
Parameterindex NumberIndex of the row in which the table should scroll.
-
Since: ArcGIS Maps SDK for JavaScript 4.16FeatureTableViewModel since 4.15, selectRows added at 4.16. Deprecated since 4.25. Use highlightIds.add() instead. -
Selects the specified rows within the table.
ParameterThe selection parameters to select within the feature table.Takes either individual or multiple ObjectId(s) or Graphic(s).
-
Since: ArcGIS Maps SDK for JavaScript 4.23FeatureTableViewModel since 4.15, zoomToSelection added at 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
.
Type Definitions
-
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.
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
-
Use this for spatial filtering, it is the Geometry used to filter out data within the table.
-
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"
.An array of numbers indicating the row's ObjectId's.
- See also