Skip to content
import FeatureTableViewModel from "@arcgis/core/widgets/FeatureTable/FeatureTableViewModel.js";
Since
ArcGIS Maps SDK for JavaScript 4.15

Provides the logic for the FeatureTable widget and component, 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
}
});

Properties

PropertyTypeClass
actionColumn
readonly
activeFilters
readonly
activeSortOrders
readonly
allColumns
readonly
columns
readonly
declaredClass
readonly inherited
effectiveSize
readonly
fieldColumns
readonly
groupColumns
readonly
hasPendingEdits
readonly
isEditing
readonly
isQuerying
readonly
isSyncing
readonly
layerView
readonly
pageCount
readonly
relatedTable
readonly
relatedTables
readonly
relationship
readonly
relationships
readonly
size
readonly
state
readonly
visibleColumns
readonly

actionColumn

readonly Property
Type
ActionColumn | null | undefined
Since
ArcGIS Maps SDK for JavaScript 4.33

Reference to the current action column. This column is only generated if a configuration has been provided.

See also

actionColumnConfig

Property
Type
ActionColumnConfig | null | undefined
Since
ArcGIS Maps SDK for JavaScript 4.30

Configuration for the ActionColumn. This property allows for customizing the action column's appearance and behavior. The action column is a column that contains interactive buttons for each row. These buttons can be used to perform actions such as editing, deleting, or viewing additional information about a feature. This column is displayed as the last column in the table and is only displayed if this property is set.

featuretable action column

See also
Example
// The following snippet demonstrates how to configure an action column that adds a button
// to each row which allows the user to zoom to the associated row's feature within the view.
featureTable.viewModel.actionColumnConfig = {
label: "Go to feature",
icon: "zoom-to-object",
callback: (params) => {
view.goTo(params.feature);
}
}

activeFilters

readonly Property
Type
Collection<SupportedFilters>
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 object ID.

See also

activeSortOrders

readonly Property
Type
ColumnSortOrder[]
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 which 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 FieldColumnTemplate.initialSortPriority.

Default value
[]

allColumns

readonly Property
Type
GridSupportedColumns[]
Since
ArcGIS Maps SDK for JavaScript 4.33

A flattened array of all columns within the table, including nested columns. Take note that group columns are separate entries. This property is useful when applying updates to all columns, including nested columns, as it provides ease of use when iterating through all columns in the table.

allRelatedTablesVisible

readonly Property
Type
boolean
Since
ArcGIS Maps SDK for JavaScript 4.31

Indicates the table is displaying all related tables in show all mode.

allVisibleColumns

readonly Property
Type
GridSupportedColumns[]
Since
ArcGIS Maps SDK for JavaScript 4.33

A flattened array of all visible columns within the table, including nested columns. Group columns are separate entries.

attachmentsColumns

readonly Property
Type
AttachmentsColumn[]
Since
ArcGIS Maps SDK for JavaScript 4.33

A flattened array of all attachment columns within the table, including nested columns.

attachmentsEnabled

Property
Type
boolean

Indicates whether to display the Attachments field in the table. It displays the count of attachments per feature and is only applicable if the feature layer supports attachments.

featuretable attachmentsEnabled

See also
Default value
false

attachmentsViewOptions

readonly Property
Type
AttachmentsViewOptions
Since
ArcGIS Maps SDK for JavaScript 4.33

This read-only property provides the the configuration options for the attachments view.

See also

attributeTableTemplate

autocast Property
Type
AttributeTableTemplate | null | undefined
Since
ArcGIS Maps SDK for JavaScript 4.31

Use this property to configure how columns display within the table in regard to visibility, column order, and sorting.

This property differs from the tableTemplate property. The tableTemplate property provides more fine-grained control over how the table is rendered within the application by offering more advanced configurations such as custom cell rendering, column formatting, and more. It is useful for application-level development that remains within an application. Use the attributeTableTemplate property to access the table's settings across different applications. By using this property, the settings can be saved within a webmap or layer. Please refer to the AttributeTableTemplate and TableTemplate documentation for more information.

See also

autoRefreshEnabled

Property
Type
boolean
Since
ArcGIS Maps SDK for JavaScript 4.23

Indicates whether the table should automatically refresh when the underlying data changes. This property is useful when the table is displaying data from a feature layer that is being updated by other clients.

Default value
true

autoSaveEnabled

Property
Type
boolean
Since
ArcGIS Maps SDK for JavaScript 5.0

Indicates whether the table should automatically save edits, or cache all edits until the 'savePendingEdits' or 'discardPendingEdits' methods are called.

Default value
true

canAddRelatedFeature

readonly Property
Type
boolean
Since
ArcGIS Maps SDK for JavaScript 5.0

Indicates whether the table supports adding a related record based on the current relationship configuration. This accounts for whether table is currently configured to show related features. If the table is not displaying related features, then the value of this property is always false.

Default value
false

columnPerformanceModeEnabled

Property
Type
boolean
Since
ArcGIS Maps SDK for JavaScript 4.33

Indicates whether to enable the table's column performance mode. This mode is designed to improve the performance of the table when working with a large number of columns.

Default value
true

columnReorderingEnabled

Property
Type
boolean
Since
ArcGIS Maps SDK for JavaScript 4.33

Indicates if columns can be reordered by dragging the column's header.

Default value
true

columns

readonly Property
Type
Collection<SupportedColumn>

A read-only collection of Column, field, group, action, attachment, and relationship columns that are displayed 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 scenario, it is also necessary to set the column template's visible property to true.

See also

declaredClass

readonlyinherited Property
Type
string
Inherited from: Accessor

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

definitionExpression

Property
Type
string | null | undefined
Since
ArcGIS Maps SDK for JavaScript 4.33

The SQL where clause used to filter features visible in the table. Only the features that satisfy the definition expression are displayed in the table. This value takes priority over any definition expression set on the associated layer.

editingEnabled

Property
Type
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 separated into the following levels of priority:

  1. FeatureLayer.editingEnabled - This is derived from the layer's FeatureLayer.editingEnabled property. This must always be true for editing to be enabled.
  2. 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.
  3. FeatureTable - The FeatureTable.editingEnabled property must be set on the table in order for any type of editing to be enabled.
  4. Template - The editable permissions on a field can be configured by setting the FieldColumnTemplate.editable property of the FieldColumnTemplate.

If the service's field is not editable, it is not possible to override its permissions using any of the options above. FieldColumnTemplate.editable can never override what is set on the layer, field, or table.

featuretable editing

See also
Default value
false

effectiveSize

readonly Property
Type
number
Since
ArcGIS Maps SDK for JavaScript 4.31

The total number of records displayed in the table's current view. Normally, this is equivalent to size for default configurations. If paginationEnabled is true, effectiveSize reflects the total number of visible rows for the current page. This value is usually equivalent to pageSize unless viewing the last page of data. The last page may display less features than the maximum number for a single page. This property also takes into account all active filters and the current value of maxSize.

fieldColumns

readonly Property
Type
FieldColumn[]
Since
ArcGIS Maps SDK for JavaScript 4.33

A flattened array of all field columns within the table, including nested columns.

filterBySelectionEnabled

Property
Type
boolean
Since
ArcGIS Maps SDK for JavaScript 4.30

Indicates whether the table only displays rows that are considered selected. Row selection can be modified by adding or removing associated object IDs from FeatureTable.highlightIds. This will cause the store to fetch fresh features to ensure the expected sort order is honored.

Default value
false

filterGeometry

autocast Property
Type
GeometryUnion | null | undefined
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
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 }
);

groupColumns

readonly Property
Type
GroupColumn[]
Since
ArcGIS Maps SDK for JavaScript 4.33

A flattened array of all group columns within the table.

hasContingentValues

readonly Property
Type
boolean
Since
ArcGIS Maps SDK for JavaScript 5.0

Convenience property indicating the data set contains contingent values. This includes contingent values in a related table.

Default value
false

hasInvalidPendingEdits

readonly Property
Type
boolean
Since
ArcGIS Maps SDK for JavaScript 5.0

Indicates there are unsaved edits and that they are invalid. This includes invalid pending edits in a related table.

Default value
false

hasPendingEdits

readonly Property
Type
boolean
Since
ArcGIS Maps SDK for JavaScript 5.0

Indicates there are unsaved edits. This includes edits in a related table. This does not account for whether the edits are valid or not.

Default value
false

hiddenFields

autocast Property
Type
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 FieldColumnTemplate.visible property is set to true.

See also
Default value
true
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: { // 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

Property
Type
boolean
Since
ArcGIS Maps SDK for JavaScript 4.25

Indicates whether to highlight the associated feature when a row is selected by checking the corresponding checkbox. This property is only applicable when working with a map and the FeatureTable.view property is set. This property has no effect if syncViewSelection is true or a custom selectionManager has been provided.

Default value
true

highlightIds

autocast Property
Type
Collection<ObjectId>
Since
ArcGIS Maps SDK for JavaScript 4.25

This property accepts and returns a collection of feature object IDs. 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 object IDs, the table will select the corresponding row and highlight its feature within the map.

See also
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);
});

initialSize

Property
Type
number | null | undefined
Since
ArcGIS Maps SDK for JavaScript 4.31

The user-provided number of total features accessed from the data source. This is used for initial load of the data store as opposed to querying a specified layer. Additionally, the table will query data counts to verify the data's integrity, or when requested via refresh().

isEditing

readonly Property
Type
boolean
Since
ArcGIS Maps SDK for JavaScript 4.33

Indicates the table is displaying an editable input in one of its cells.

isQuerying

readonly Property
Type
boolean
Since
ArcGIS Maps SDK for JavaScript 4.33

Indicates if the table is querying data. This is useful when determining if the table is busy. This can be especially helpful when the table is querying a large amount of features.

isQueryingOrSyncing

readonly Property
Type
boolean
Since
ArcGIS Maps SDK for JavaScript 4.31

Indicates the table is querying or syncing data. This is useful when determining if the table is busy. This can be especially helpful when the table is querying a large amount of features.

isSyncing

readonly Property
Type
boolean
Since
ArcGIS Maps SDK for JavaScript 4.33

Indicates if the table is syncing data. This is useful when determining if the table is busy.

isSyncingAttachments

readonly Property
Type
boolean
Since
ArcGIS Maps SDK for JavaScript 4.31

Indicates the table is syncing attachment edits.

layer

Property
Type
FeatureTableSupportedLayer | null | undefined

The associated CatalogFootprintLayer, CSVLayer, FeatureLayer, GeoJSONLayer, ImageryLayer, KnowledgeGraphSublayer, SceneLayer, 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 FeatureTable.pageSize property.

See also

layers

Property
Type
FeatureTableSupportedLayer[] | null | undefined
Since
ArcGIS Maps SDK for JavaScript 4.30

An array of layers listed within the dropdown component of the table's header. This component allows changing which table layer it should display. Typically, the dropdown component will display all supported layers within the FeatureTable.view unless a specific set of layers is set. The table supports CatalogFootprintLayer, CSVLayer, FeatureLayer, GeoJSONLayer, ImageryLayer, KnowledgeGraphSublayer, SceneLayer, and WFSLayer layers.

layerView

readonly Property
Type
LayerView | null | undefined

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

maxSize

Property
Type
number | null | undefined
Since
ArcGIS Maps SDK for JavaScript 4.31

This property is applicable when working with layers that contain a large number of features, as it provides the ability to limit the displayed total feature count. If paginationEnabled is true, and maxSize is greater than the current value of pageSize, multiple pages usually display. If maxSize is less than pageSize, a single page shows the total number of features limited to maxSize.

Property
Type
TableMenuConfig | null | undefined

Set this object to customize the feature table's menu content.

multipleSelectionEnabled

Property
Type
boolean
Since
ArcGIS Maps SDK for JavaScript 4.30

Controls whether the table allows multiple selected rows.

Default value
true

multipleSortPriority

Property
Type
GridMultiSortPriority
Since
ArcGIS Maps SDK for JavaScript 4.33

This property can be used to determine how newly sorted columns are prioritized. By default, newly sorted columns are given the highest sort priority.

Default value
"prepend"

multiSortEnabled

Property
Type
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.

See also
Default value
false
Example
const featureTableVM = new FeatureTableViewModel({
layer: featureLayer,
multiSortEnabled: true,
tableTemplate: { // autocastable to TableTemplate
columnTemplates: [ // takes an array of FieldColumnTemplate and GroupColumnTemplate
{ // autocastable 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"
});

objectIds

autocast Property
Type
Collection<ObjectId>
Since
ArcGIS Maps SDK for JavaScript 4.30

This property accepts and returns a collection of feature object IDs. Use this to access and control which features are currently visible in the table. When the collection is empty, all potential rows are displayed. Modifying object IDs is not supported while filterBySelectionEnabled is true as these properties are mutually exclusive. This filter can also be combined with filterGeometry to display features that satisfy both conditions.

outFields

Property
Type
string[] | null | undefined
Since
ArcGIS Maps SDK for JavaScript 4.31

An array of field names from the table's data source to include when the table requests data. By default, all fields are requested. This property is useful when working with many fields and only a subset of them is needed for the table. Take note that doing so can improve the table's load time.

pageCount

readonly Property
Type
number
Since
ArcGIS Maps SDK for JavaScript 4.31

Number of pages of features to be displayed in the table, based on the total number of features and configured pageSize.

pageIndex

Property
Type
number
Since
ArcGIS Maps SDK for JavaScript 4.31

Represents the index of the page of the feature currently being displayed. The number of features per page can be adjusted by modifying the pageSize. Pagination must be enabled or the value of this property may not be not reliable due to virtualization of visible pages.

pageSize

Property
Type
number
Since
ArcGIS Maps SDK for JavaScript 4.19

The default page size used when displaying features within the table. By default, the page loads the first 50 features returned by the service. It can be used with paginationEnabled to display a subset of features.

It is not possible to overwrite the maximum page size on the server, ie. maxRecordCount, as this property only applies to set values less than the maximum page size, i.e. maxRecordCount, set on the service.

See also
Default value
50

paginationEnabled

Property
Type
boolean
Since
ArcGIS Maps SDK for JavaScript 4.31

Controls whether the table should only display a single page of features at any time. Current page can be determined via the pageIndex property. The current page can be modified by calling the goToPage() method and passing in the desired page index.

Default value
false

pendingEditsCount

readonly Property
Type
number
Since
ArcGIS Maps SDK for JavaScript 5.0

Total number of individual cells with pending edits.

relatedRecordsEnabled

Property
Type
boolean
Since
ArcGIS Maps SDK for JavaScript 4.30

Indicates whether to display any related records associated with rows within the table. Take note that related layers must be provided via the FeatureTable.layers property when there is no associated FeatureTable.view.

Default value
false

relatedTable

readonly Property
Type
FeatureTable | null | undefined
Since
ArcGIS Maps SDK for JavaScript 4.31

A nested table instance which represents a relationship to another table. This is a reference to the most recently generated table when multiple related tables exist. It is only applicable if the table instance manages all nested tables.

relatedTableHasContingentValues

readonly Property
Type
boolean
Since
ArcGIS Maps SDK for JavaScript 5.0

Indicates a nested table has contingent values.

relatedTableHasInvalidPendingEdits

readonly Property
Type
boolean
Since
ArcGIS Maps SDK for JavaScript 5.0

Indicates a nested table has invalid pending edits.

relatedTableHasPendingEdits

readonly Property
Type
boolean
Since
ArcGIS Maps SDK for JavaScript 5.0

Indicates a nested table has pending edits.

relatedTables

readonly Property
Type
Collection<FeatureTable>
Since
ArcGIS Maps SDK for JavaScript 4.31

A collection of nested table instances. This is typically used to represent relationships between each other. These are configured and managed by a single table widget instance. Only applies if this particular table instance is responsible for managing all nested tables. Nested tables reference the main table controller via the tableController property.

relationship

readonly Property
Type
Relationship | null | undefined
Since
ArcGIS Maps SDK for JavaScript 5.0

Reference to the relationship represented by the table.

relationshipColumns

readonly Property
Type
RelationshipColumn[]
Since
ArcGIS Maps SDK for JavaScript 4.33

A flattened array of all relationship columns within the table, including nested columns.

relationships

readonly Property
Type
Relationship[] | null | undefined

An array of relationships that exist on the layer. This is only applicable if relationships are supported.

returnGeometryEnabled

Property
Type
boolean
Since
ArcGIS Maps SDK for JavaScript 4.27

Indicates whether to fetch geometries for the corresponding features displayed in the table.

Setting this to true can impact performance of the widget.

Default value
false

returnMEnabled

Property
Type
boolean
Since
ArcGIS Maps SDK for JavaScript 4.30

Indicates whether geometries fetched for the corresponding features contain M values, if supported. The FeatureTable.returnGeometryEnabled property must also be true.

Setting this to true can impact performance of the widget.

Default value
false

returnZEnabled

Property
Type
boolean
Since
ArcGIS Maps SDK for JavaScript 4.30

Indicates whether the fetched features' geometries contain Z values. This is only applicable if Z-values are supported. The FeatureTable.returnGeometryEnabled property must also be true.

Setting this to true can impact performance of the widget.

Default value
false

rowHighlightIds

autocast Property
Type
Collection<ObjectId>
Since
ArcGIS Maps SDK for JavaScript 4.30

This property accepts and returns a collection of feature object IDs. It is used to access and control which rows display a darker background, i.e., highlighted. Take note that highlighted rows are not considered selected as this property is independent of the table's selection state. Use the highlightIds property to choose rows. Setting rowHighlightIds applies an alternative highlight style to an entire row or rows.

See also

selectionManager

Property
Type
SelectionManager | null | undefined
Since
ArcGIS Maps SDK for JavaScript 5.0
beta

Use this property to supply a custom selection manager that overrides the default selection manager. This is useful when applications want to share selection sets between components, without relying on the view's selection manager. This property is ignored if syncViewSelection is true.

size

readonly Property
Type
number
Since
ArcGIS Maps SDK for JavaScript 4.30

Total number of records currently displayed in the table. This property takes into account all active filters and the current value of maxSize if it is configured.

Default value
0

state

readonly Property
Type
FeatureTableState

The state of the widget.

ValueDescription
disabledDependencies are missing and therefore the widget is disabled.
errorWidget failed to load (added at version 4.30).
loadedWidget is ready to use.
loadingWidget is busy loading its resources.
readyDependencies are met and has valid property values but hasn't started the load process.
Default value
"disabled"

supportsAddAttachments

readonly Property
Type
boolean
Since
ArcGIS Maps SDK for JavaScript 4.31

Indicates whether the table and associated layer support adding attachments with the current configuration.

supportsAttachments

readonly Property
Type
boolean
Since
ArcGIS Maps SDK for JavaScript 4.31

Indicates whether the table supports viewing attachments with the current configuration.

supportsDeleteAttachments

readonly Property
Type
boolean
Since
ArcGIS Maps SDK for JavaScript 4.31

Indicates whether the table and associated layer support deleting attachments with the current configuration.

supportsResizeAttachments

readonly Property
Type
boolean
Since
ArcGIS Maps SDK for JavaScript 4.31

Defines whether or not the feature supports resizing attachments. This depends on whether the feature layer's capabilities.attachment.supportsResize is set to true.

supportsUpdateAttachments

readonly Property
Type
boolean
Since
ArcGIS Maps SDK for JavaScript 4.31

Indicates whether the table and associated layer support updating attachments with the current configuration.

syncTemplateOnChangesEnabled

Property
Type
boolean
Since
ArcGIS Maps SDK for JavaScript 4.33

Indicates whether the table should synchronize the current attributeTableTemplate being used based on changes made to the table's UI.

See also
Default value
true

syncViewSelection

Property
Type
boolean
Since
ArcGIS Maps SDK for JavaScript 5.0
beta

Indicates whether the FeatureTable should sync with the view's selection manager. Enabling this does not automatically inherit the selection sources from the SelectionManager, (e.g. which layers or graphics collections the view listens to for selections). If you need specific selection sources, configure them separately via SelectionManager.sources.

Setting this property takes precedence over the selectionManager property.

Default value
false

tableController

Property
Type
FeatureTable | null | undefined
Since
ArcGIS Maps SDK for JavaScript 4.31

A reference to top-level controller table. This property is applicable if this table is a related table, nested within and controlled by another table widget.

tableParent

Property
Type
FeatureTable | null | undefined
Since
ArcGIS Maps SDK for JavaScript 5.0

A reference to the instance of a table widget that is directly associated with this table. This only applies if this table is nested within another table widget. The parent table is responsible for creating this child table instance. The child table reacts to state changes on the parent table, including row selection.

The parent table that this property references may also be nested, meaning it would refer to a different parent table. The top-level table can always be referenced via the tableController property. If only one nested table exists, then the values of tableController and tableParent are the same.

tableTemplate

autocast Property
Type
TableTemplate | null | undefined
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.

The TableTemplate provides more fine-grained control over how the table is rendered within the application by offering more advanced configurations such as custom cell rendering, column formatting, and more. TableTemplate is useful for application-level development that remains within an application. This property differs from the attributeTableTemplate property as that property should be used to access the table's settings across different applications. By using attributeTableTemplate, the settings can be saved within a webmap or layer. Please refer to the AttributeTableTemplate and TableTemplate documentation for more information.

Take note that it is required to set the type property when creating column templates.

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.
}
]
});

timeExtent

autocast Property
Type
TimeExtent | null | undefined
Since
ArcGIS Maps SDK for JavaScript 4.30

The TimeExtent in which to filter and display data within the FeatureTable widget. Setting this property directly on the viewModel or its widget takes precedence over the layer's FeatureLayer.timeExtent. If this property is set directly on the widget, the table will not refresh when the layer's TimeExtent changes.

See also
Example
// Filters the table to display only features that fit within the time extent
reactiveUtils.watch(
() => timeSlider.timeExtent,
(extent) => {
featureTable.viewModel.timeExtent = extent;
}
);

timeZone

Property
Type
TimeZone | null | undefined
Since
ArcGIS Maps SDK for JavaScript 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.

The following considerations apply when working with date, time, and big integer field types:

By default, the FeatureTable displays timezones for date and timestamp-offset field types reflecting the MapView's timezone. This timezone can be overridden by setting the view's timeZone property. If the table's FeatureTable.view isn't set, and the table's Feature.timeZone isn't set, the table defaults to system time. The only time that this is not the case is when there is a FeatureLayer.preferredTimeZone set on the table's layer. If the latter is true, the preferred time zone is used as opposed to system.

view

Property
Type
MapViewOrSceneView | LinkChartView | null | undefined

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

visibleColumns

readonly Property
Type
GridSupportedColumns[]
Since
ArcGIS Maps SDK for JavaScript 4.33

A flattened array of all top-level visible columns. Take note that this does not include nested columns.

Methods

MethodSignatureClass
addPendingEdits(edits: FeatureStoreEdits[]): void
deleteSelection(): Promise<void>
discardPendingEdits(edits?: DiscardPendingEditsParameters[] | null | undefined): Promise<boolean>
emit
inherited
emit<Type extends EventNames<this>>(type: Type, event?: this["@eventTypes"][Type]): boolean
exportSelectionToCSV(includeGeometry?: boolean): Promise<void>
getFeatureStoreItemByObjectId(objectId: ObjectId): FeatureStoreItem | null | undefined
getObjectIdIndex(objectId: ObjectId): number
getValue(objectId: ObjectId, fieldName: string): FieldValue
goToPage(index: number): void
hasEventListener
inherited
hasEventListener<Type extends EventNames<this>>(type: Type): boolean
hideAttachmentsView(): void
nextPage(): void
on
inherited
on<Type extends EventNames<this>>(type: Type, listener: EventedCallback<this["@eventTypes"][Type]>): ResourceHandle
previousPage(): void
refresh(): Promise<void>
refreshCellContent(): void
refreshPageCache(): void
reset(): Promise<void>
savePendingEdits(): Promise<void>
scrollLeft(): void
scrollToBottom(): void
scrollToIndex(index: number): void
scrollToRow(objectId: ObjectId): void
scrollToTop(): void
syncAttributeTableTemplate(): void
toggleColumnVisibility(fieldName: string): void
zoomToSelection(): Promise<void>

addPendingEdits

Method
Signature
addPendingEdits (edits: FeatureStoreEdits[]): void
Since
ArcGIS Maps SDK for JavaScript 5.0

Creates a pending edit with the specified parameters. A pending edit is not immediately saved to the layer.

Parameters
ParameterTypeDescriptionRequired
edits

Pending edits to be cached. Edits must include a valid objectId and field name.

Returns
void
Example
// Add pending edits for two cells in a single row
table.addPendingEdits(
[
{
objectId: 1,
updates: [
{ fieldName: "Hotel_Name", value: "My Hotel" },
{ fieldName: "Address", value: "123 Hotel Street" },
]
}
]
);

deleteSelection

Method
Signature
deleteSelection (): 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.

Returns
Promise<void>

Resolves when the selection is deleted.

discardPendingEdits

Method
Signature
discardPendingEdits (edits?: DiscardPendingEditsParameters[] | null | undefined): Promise<boolean>
Since
ArcGIS Maps SDK for JavaScript 5.0

Cancels any pending edits. This might be edits for a specific field or column, or all pending edits for a specific feature. If no parameters are supplied, all pending edits for all features are discarded.

Parameters
ParameterTypeDescriptionRequired
edits

Information about which pending edits should be canceled.

Returns
Promise<boolean>
Example
// Discard pending edits for single cell in a given row
table.discardPendingEdits([{ objectId: 1, fieldName: "Address" }]);
// Discard pending edits for all cells in a given row
table.discardPendingEdits([{ objectId: 1 }]);
// Discard all pending edits
table.discardPendingEdits();

emit

inherited Method
Signature
emit <Type extends EventNames<this>>(type: Type, event?: this["@eventTypes"][Type]): boolean
Type parameters
<Type extends EventNames<this>>
Inherited from: EventedMixin

Emits an event on the instance. This method should only be used when creating subclasses of this class.

Parameters
ParameterTypeDescriptionRequired
type
Type

The name of the event.

event
this["@eventTypes"][Type]

The event payload.

Returns
boolean

true if a listener was notified

exportSelectionToCSV

Method
Signature
exportSelectionToCSV (includeGeometry?: boolean): Promise<void>
Since
ArcGIS Maps SDK for JavaScript 4.31

Exports features associated with currently selected rows to a CSV file and displays a download prompt. When invoked from the table's menu, it automatically includes geometry for features with a point geometry type. Geometry information is excluded on all other layer types.

This method must be used on selected rows within the table.

Parameters
ParameterTypeDescriptionRequired
includeGeometry

Indicates whether the geometry should be included in the exported file. Only applies to features with 'point' geometries.

Returns
Promise<void>

Resolves when the export dialog is displayed.

getFeatureStoreItemByObjectId

Method
Signature
getFeatureStoreItemByObjectId (objectId: ObjectId): FeatureStoreItem | null | undefined
Since
ArcGIS Maps SDK for JavaScript 5.0

Returns information about the feature with the provided object ID.

Parameters
ParameterTypeDescriptionRequired
objectId

The ObjectId field of the specified feature.

Returns
FeatureStoreItem | null | undefined

Information about the associated feature.

getObjectIdIndex

Method
Signature
getObjectIdIndex (objectId: ObjectId): number

Returns the current row index for the associated feature. Returns a value of -1 if the row is not found.

Parameters
ParameterTypeDescriptionRequired
objectId

The ObjectId field of the specified feature.

Returns
number

The feature's row index.

getValue

Method
Signature
getValue (objectId: ObjectId, fieldName: string): FieldValue

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

Parameters
ParameterTypeDescriptionRequired
objectId

The object ID field of the specified feature.

fieldName

The name of the field in which to get the associated object id's feature value.

Returns
FieldValue

Associated value for the specified feature, as provided using its object ID, 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);

goToPage

Method
Signature
goToPage (index: number): void
Since
ArcGIS Maps SDK for JavaScript 4.31

Instructs the table to scroll to or display a specific page of data.

See also
Parameters
ParameterTypeDescriptionRequired
index

The page index.

Returns
void

hasEventListener

inherited Method
Signature
hasEventListener <Type extends EventNames<this>>(type: Type): boolean
Type parameters
<Type extends EventNames<this>>
Inherited from: EventedMixin

Indicates whether there is an event listener on the instance that matches the provided event name.

Parameters
ParameterTypeDescriptionRequired
type
Type

The name of the event.

Returns
boolean

Returns true if the class supports the input event.

hideAttachmentsView

Method
Signature
hideAttachmentsView (): void
Since
ArcGIS Maps SDK for JavaScript 4.31

Internal method used to hide the attachments view.

Returns
void

nextPage

Method
Signature
nextPage (): void
Since
ArcGIS Maps SDK for JavaScript 4.31

Instructs the table to scroll to or display the next page of data.

Returns
void

on

inherited Method
Signature
on <Type extends EventNames<this>>(type: Type, listener: EventedCallback<this["@eventTypes"][Type]>): ResourceHandle
Type parameters
<Type extends EventNames<this>>
Inherited from: EventedMixin

Registers an event handler on the instance. Call this method to hook an event with a listener.

Parameters
ParameterTypeDescriptionRequired
type
Type

An event or an array of events to listen for.

listener
EventedCallback<this["@eventTypes"][Type]>

The function to call when the event fires.

Returns
ResourceHandle

Returns an event handler with a remove() method that should be called to stop listening for the event(s).

PropertyTypeDescription
removeFunctionWhen called, removes the listener from the event.
Example
view.on("click", function(event){
// event is the event handle returned after the event fires.
console.log(event.mapPoint);
});

previousPage

Method
Signature
previousPage (): void
Since
ArcGIS Maps SDK for JavaScript 4.31

Instructs the table to scroll to or display the previous page of data.

Returns
void

refresh

Method
Signature
refresh (): Promise<void>
Since
ArcGIS Maps SDK for JavaScript 4.16

Refreshes the table contents while maintaining the current scroll position.

Returns
Promise<void>

refreshCellContent

Method
Signature
refreshCellContent (): void
Since
ArcGIS Maps SDK for JavaScript 4.30

Re-renders the cell's content. Generally, this is only required if using a custom function for FieldColumnTemplate.formatFunction or ColumnTemplate.formatFunction. If the render function is dependent on external data or its state, and that data or state changes, calling this method will re-render the cell content. If the render function is dependent on the feature's attributes, calling this method is not necessary as the cell content will automatically update when the feature's attributes change. If the render function is dependent on the feature's geometry, calling this method is not necessary as the cell content will automatically update when the feature's geometry changes.

Returns
void

refreshPageCache

Method
Signature
refreshPageCache (): void
Since
ArcGIS Maps SDK for JavaScript 4.31

Performs a light refresh of cell content, emptying the store and fetching fresh data. Scroll position is maintained. Unlike the refresh() method, this method does not query the layer for an updated total feature count.

Returns
void

reset

Method
Signature
reset (): Promise<void>
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.

Returns
Promise<void>

savePendingEdits

Method
Signature
savePendingEdits (): Promise<void>
Since
ArcGIS Maps SDK for JavaScript 5.0

Attempts to save any pending edits. If any edits are invalid, the save will be rejected until the edits are in a valid state.

Returns
Promise<void>

Resolves when the edits are saved or rejected.

scrollLeft

Method
Signature
scrollLeft (): void
Since
ArcGIS Maps SDK for JavaScript 4.31

Resets the horizontal scroll position of the table to the default view.

Returns
void

scrollToBottom

Method
Signature
scrollToBottom (): void
Since
ArcGIS Maps SDK for JavaScript 4.31

Scrolls the table to the bottom row. If pagination is enabled, the table scrolls to the bottom row of the current page.

Returns
void

scrollToIndex

Method
Signature
scrollToIndex (index: number): void
Since
ArcGIS Maps SDK for JavaScript 4.19

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

Parameters
ParameterTypeDescriptionRequired
index

Index of the row in which the table should scroll.

Returns
void

scrollToRow

Method
Signature
scrollToRow (objectId: ObjectId): void
Since
ArcGIS Maps SDK for JavaScript 4.31

Scrolls the table to a row based on a specified object ID. The row must already be loaded for this method to take effect.

Parameters
ParameterTypeDescriptionRequired
objectId

Object id of a row's associated feature in which the table should scroll.

Returns
void

scrollToTop

Method
Signature
scrollToTop (): void
Since
ArcGIS Maps SDK for JavaScript 4.31

Scrolls the table to the top row. If pagination is enabled, the table scrolls to the top row of the current page.

Returns
void

syncAttributeTableTemplate

Method
Signature
syncAttributeTableTemplate (): void
Since
ArcGIS Maps SDK for JavaScript 4.32

Manually sync the provided layer's attributeTableTemplate with the current state of the FeatureTable. This is useful if 'syncTemplateOnChangesEnabled' is set to false.

Returns
void

toggleColumnVisibility

Method
Signature
toggleColumnVisibility (fieldName: string): void
Since
ArcGIS Maps SDK for JavaScript 4.30

Toggles current visibility of the provided column.

Parameters
ParameterTypeDescriptionRequired
fieldName

Associated field name of the column to be hidden or made visible. This should match the field name as defined at the data source.

Returns
void

zoomToSelection

Method
Signature
zoomToSelection (): Promise<void>
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 FeatureTable.view is set on the FeatureTable.

See also
Returns
Promise<void>

Events

cell-click

Event
Since
ArcGIS Maps SDK for JavaScript 4.30

Fires when a cell within the table is clicked.

bubbles composed cancelable
Example
// This snippet removes the selection column and adds an event listener
// which toggles the selection of a feature when a cell is clicked.
featureTable.visibleElements.selectionColumn = false;
featureTable.on("cell-click", (event) => {
if (featureTable.highlightIds.includes(event.objectId)) {
featureTable.highlightIds.remove(event.objectId);
}
else {
featureTable.highlightIds.push(event.objectId);
}
});

cell-dblclick

Event
Since
ArcGIS Maps SDK for JavaScript 4.31

Fires when a cell within the table is double-clicked.

bubbles composed cancelable

cell-keydown

Event
Since
ArcGIS Maps SDK for JavaScript 4.30

Fires when a key is pressed down within a cell within the table.

bubbles composed cancelable
Example
// The following snippet listens for the Enter key to be pressed within a cell and zooms
// to the feature associated with the row.
featureTable.on("cell-keydown", (event) => {
if (event.native.key === "Enter") {
view.goTo(event.feature);
}
});

cell-pointerout

Event
Since
ArcGIS Maps SDK for JavaScript 4.30

Fires when the mouse pointer is moved out of a cell within the table. This event is useful for scenarios highlighting for things like highlighting a feature in the view, while hovering, without requiring manual interaction to select a row. Another example: these events can also be used to show information about the cell in a tooltip attached to the mouse.

bubbles composed cancelable

cell-pointerover

Event
Since
ArcGIS Maps SDK for JavaScript 4.30

Fires when the mouse pointer is moved over a cell within the table.

bubbles composed cancelable

column-reorder

Event
Since
ArcGIS Maps SDK for JavaScript 4.31

Fires when a column is reordered via drag-and-drop.

bubbles composed cancelable

Type definitions