Feature Table

1
import "@arcgis/map-components/components/arcgis-feature-table";

The Feature Table component provides an interactive tabular view of each feature's attributes in a feature layer.

Demo

Properties

PropertyAttributeType
boolean
attachments-enabled
boolean
auto-destroy-disabled
boolean
auto-refresh-disabled
boolean
column-reordering-disabled
boolean
columns
readonly
description
Function | string
editing-enabled
boolean
number
filter-by-selection-enabled
boolean
Collection<string>
hide-column-descriptions
boolean
hide-column-menu-items-sort-ascending
boolean
hide-column-menu-items-sort-descending
boolean
hide-column-menus
boolean
hide-header
boolean
hide-menu
boolean
hide-menu-items-clear-selection
boolean
hide-menu-items-delete-selection
boolean
hide-menu-items-export-selection-to-csv
boolean
hide-menu-items-refresh-data
boolean
hide-menu-items-selected-records-show-all-toggle
boolean
hide-menu-items-selected-records-show-selected-toggle
boolean
hide-menu-items-toggle-columns
boolean
hide-menu-items-zoom-to-selection
boolean
hide-progress
boolean
hide-selection-column
boolean
hide-tooltips
boolean
highlight-disabled
boolean
Collection<string | number>
icon
string
initial-size
number
boolean
label
string
CSVLayer | CatalogFootprintLayer | FeatureLayer | GeoJSONLayer | ImageryLayer | [KnowledgeGraphSublayer](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-knowledgeGraph-KnowledgeGraphSublayer.html#capabilities) | OrientedImageryLayer | SceneLayer | Sublayer | WFSLayer
layer-item-id
string
layer-url
string
layerView
readonly
max-size
number
multiple-selection-disabled
boolean
multiple-sort-enabled
boolean
Collection<string | number>
Array<string>
pageCount
readonly
number
page-index
number
page-size
number
pagination-enabled
boolean
position
"bottom-leading" | "bottom-left" | "bottom-right" | "bottom-trailing" | "manual" | "top-leading" | "top-left" | "top-right" | "top-trailing"
reference-element
ArcgisLinkChart | ArcgisMap | ArcgisScene | string
related-records-enabled
boolean
return-geometry-enabled
boolean
return-m-enabled
boolean
return-z-enabled
boolean
Collection<string | number>
show-layer-dropdown
boolean
size
readonly
number
state
readonly
state
"disabled" | "error" | "loaded" | "loading" | "ready"
table-disabled
boolean
time-zone
string

actionColumnConfig

Property
actionColumnConfig: ActionColumnConfig

Configuration for the ActionColumn.

Read more...

activeFilters

readonlyProperty

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.

activeSortOrders

readonlyProperty
activeSortOrders: Array<ColumnSortOrder>

Use this read-only property if needing to query features while retaining a column's sort order.

Default value
[]

allRelatedTablesVisible

readonlyProperty
allRelatedTablesVisible: boolean

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

Default value
false

attachmentsEnabled

Property
attachmentsEnabled: boolean

Indicates whether to display the Attachments field in the table.

Read more...

Attribute
attachments-enabled
Default value
false

attributeTableTemplate

Property
attributeTableTemplate: AttributeTableTemplate

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

Read more...

autoDestroyDisabled

Property
autoDestroyDisabled: boolean

If true, the component will not be destroyed automatically when it is disconnected from the document. This is useful when you want to move the component to a different place on the page, or temporarily hide it. If this is set, make sure to call the `destroy` method when you are done to prevent memory leaks.

Attribute
auto-destroy-disabled
Default value
false

autoRefreshDisabled

Property
autoRefreshDisabled: boolean

Indicates whether the table should automatically refresh when the underlying data changes

Attribute
auto-refresh-disabled
Default value
false

columnReorderingDisabled

Property
columnReorderingDisabled: boolean

Indicates whether the table should allow reordering of columns.

Attribute
column-reordering-disabled
Default value
false

columns

readonlyProperty

A read-only collection of column, field, group, action, attachment, and relationship columns that are displayed within the table.

description

Property
description: Function | string

Text displayed in the table header, under the title.

Read more...

Attribute
description

editingEnabled

Property
editingEnabled: boolean

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

Read more...

Attribute
editing-enabled
Default value
false

effectiveSize

readonlyProperty
effectiveSize: number

Total number of records displayed in the table's current view.

filterBySelectionEnabled

Property
filterBySelectionEnabled: boolean

Indicates whether the table only displays rows that are considered selected.

Read more...

Attribute
filter-by-selection-enabled
Default value
false

filterGeometry

Property
filterGeometry: Extent | Mesh | Multipoint | Point | Polygon | Polyline

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

Read more...

Default value
null

hiddenFields

Property
hiddenFields: Collection<string>

A collection of string values which indicate field.names that should be hidden within the table.

Read more...

hideColumnDescriptions

Property
hideColumnDescriptions: boolean

Indicates whether to display descriptions in the header cells of individual columns.

Attribute
hide-column-descriptions
Default value
false

hideColumnMenuItemsSortAscending

Property
hideColumnMenuItemsSortAscending: boolean

Indicates whether to display the Sort Ascending menu item.

Attribute
hide-column-menu-items-sort-ascending
Default value
false

hideColumnMenuItemsSortDescending

Property
hideColumnMenuItemsSortDescending: boolean

Indicates whether to display the Sort Descending menu item.

Attribute
hide-column-menu-items-sort-descending
Default value
false

hideColumnMenus

Property
hideColumnMenus: boolean

Indicates whether to display the menu items within the individual columns

Attribute
hide-column-menus
Default value
false

hideHeader

Property
hideHeader: boolean

Indicates whether to display the feature table's header information.

Attribute
hide-header
Default value
false

hideMenu

Property
hideMenu: boolean

Indicates whether to display the feature table's menu.

Attribute
hide-menu
Default value
false

hideMenuItemsClearSelection

Property
hideMenuItemsClearSelection: boolean

Indicates whether to display the Clear selection menu item.

Attribute
hide-menu-items-clear-selection
Default value
false

hideMenuItemsDeleteSelection

Property
hideMenuItemsDeleteSelection: boolean

Indicates whether to display the Delete Selection menu item.

Attribute
hide-menu-items-delete-selection
Default value
false

hideMenuItemsExportSelectionToCsv

Property
hideMenuItemsExportSelectionToCsv: boolean

Indicates whether to display the Export selection to CSV menu item.

Attribute
hide-menu-items-export-selection-to-csv
Default value
false

hideMenuItemsRefreshData

Property
hideMenuItemsRefreshData: boolean

Indicates whether to display the Refresh data menu item.

Attribute
hide-menu-items-refresh-data
Default value
false

hideMenuItemsSelectedRecordsShowAllToggle

Property
hideMenuItemsSelectedRecordsShowAllToggle: boolean

Indicates whether to toggle between showing only selected records in the table to showing all of the records.

Attribute
hide-menu-items-selected-records-show-all-toggle
Default value
false

hideMenuItemsSelectedRecordsShowSelectedToggle

Property
hideMenuItemsSelectedRecordsShowSelectedToggle: boolean

Indicates whether to display the Show selected records menu item.

Attribute
hide-menu-items-selected-records-show-selected-toggle
Default value
false

hideMenuItemsToggleColumns

Property
hideMenuItemsToggleColumns: boolean

Indicates whether to enable toggling column visibility within the menu.

Attribute
hide-menu-items-toggle-columns
Default value
false

hideMenuItemsZoomToSelection

Property
hideMenuItemsZoomToSelection: boolean

Indicates whether to display the Zoom to selected menu item.

Attribute
hide-menu-items-zoom-to-selection
Default value
false

hideProgress

Property
hideProgress: boolean

Indicates whether to display the progress indicator when the table is querying or syncing data.

Attribute
hide-progress
Default value
false

hideSelectionColumn

Property
hideSelectionColumn: boolean

Indicates whether to display the selection column in the table. Each row has a checkbox that selects its corresponding feature.

Attribute
hide-selection-column
Default value
false

hideTooltips

Property
hideTooltips: boolean

Indicates whether to display the tooltip for the Show/hide columns button.

Attribute
hide-tooltips
Default value
false

highlightDisabled

Property
highlightDisabled: boolean

Indicates whether to highlight the associated feature when a row is selected by checking the corresponding checkbox.

Read more...

Attribute
highlight-disabled
Default value
false

highlightIds

Property
highlightIds: Collection<string | number>

This property accepts and returns a collection of feature object IDs.

Read more...

icon

Property
icon: string

Icon which represents the component. Typically used when the component is controlled by another component (e.g. by the Expand component). Search Calcite Icons for possible values.

Attribute
icon
Default value
"table"

initialSize

Property
initialSize: number

The user-provided number of total features accessed from the data source.

Read more...

Attribute
initial-size

isQueryingOrSyncing

readonlyProperty
isQueryingOrSyncing: boolean

A read-only property which indicates if the table is querying or syncing data.

Default value
false

label

Property
label: string

The components label.

Attribute
label

layer

Property
layer: CSVLayer | CatalogFootprintLayer | FeatureLayer | GeoJSONLayer | ImageryLayer | [KnowledgeGraphSublayer](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-knowledgeGraph-KnowledgeGraphSublayer.html#capabilities) | OrientedImageryLayer | SceneLayer | Sublayer | WFSLayer

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

Read more...

layerItemId

Property
layerItemId: string

Portal Item Id for a layer to load. You can set, layer, layerUrl, or itemId, but not more than one.

Attribute
layer-item-id

layers

Property

Group of layers displayed in the dropdown component in the table's header, which allows changing what layer is currently displayed in the table.

layerUrl

Property
layerUrl: string

Url for a layer to load. You can set, layer, layerUrl, or itemId, but not more than one.

Attribute
layer-url

layerView

readonlyProperty
layerView: LayerView

The layer view associated with the table's layer.

maxSize

Property
maxSize: number

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.

Read more...

Attribute
max-size
Property
menuConfig: TableMenuConfig

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

Read more...

multipleSelectionDisabled

Property
multipleSelectionDisabled: boolean

Controls whether the table allows multiple selected rows.

Read more...

Attribute
multiple-selection-disabled
Default value
false

multipleSortEnabled

Property
multipleSortEnabled: boolean

Indicates whether sorting multiple columns is supported within the table.

Attribute
multiple-sort-enabled
Default value
false

objectIds

Property
objectIds: Collection<string | number>

This property accepts and returns a collection of feature object IDs.

Read more...

outFields

Property
outFields: Array<string>

An array of field names from the table's data source to include when the table requests data.

Read more...

pageCount

readonlyProperty
pageCount: number

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

Read more...

pageIndex

Property
pageIndex: number

Represents the index of the page of the feature currently being displayed.

Read more...

Attribute
page-index

pageSize

Property
pageSize: number

The default page size used when displaying features within the table.

Read more...

Attribute
page-size
Default value
50

paginationEnabled

Property
paginationEnabled: boolean

Controls whether the table should only display a single page of features at any time.

Read more...

Attribute
pagination-enabled
Default value
false

position

Property
position: "bottom-leading" | "bottom-left" | "bottom-right" | "bottom-trailing" | "manual" | "top-leading" | "top-left" | "top-right" | "top-trailing"
Attribute
position
Default value
"manual"

referenceElement

Property
referenceElement: ArcgisLinkChart | ArcgisMap | ArcgisScene | string
Attribute
reference-element

relatedRecordsEnabled

Property
relatedRecordsEnabled: boolean

Indicates whether to display any related records associated with rows within the table.

Read more...

Attribute
related-records-enabled
Default value
false

relatedTable

Property
relatedTable: FeatureTable

Reference to a nested table instance representing a relationship with another table.

relatedTables

Property
relatedTables: Collection<FeatureTable>

A collection of nested table instances.

Read more...

returnGeometryEnabled

Property
returnGeometryEnabled: boolean

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

Read more...

Attribute
return-geometry-enabled
Default value
false

returnMEnabled

Property
returnMEnabled: boolean

Indicates whether geometries fetched for the corresponding features contain M values, if supported.

Read more...

Attribute
return-m-enabled
Default value
false

returnZEnabled

Property
returnZEnabled: boolean

Indicates whether the fetched features' geometries contain Z values.

Read more...

Attribute
return-z-enabled
Default value
false

rowHighlightIds

Property
rowHighlightIds: Collection<string | number>

This property accepts and returns a collection of feature object IDs.

Read more...

showLayerDropdown

Property
showLayerDropdown: boolean

Indicates whether to display the feature table's layer switch drop down menu.

Attribute
show-layer-dropdown
Default value
false

size

readonlyProperty
size: number

Total number of records currently displayed in the table.

Default value
0

state

readonly
Property
state: "disabled" | "error" | "loaded" | "loading" | "ready"

The state of the widget.

Read more...

Attribute
state
Default value
"disabled"

tableController

Property
tableController: FeatureTable

Reference to top-level controller table, if this table is a related table, nested within and controlled by another table.

tableDisabled

Property
tableDisabled: boolean

Indicates whether the table is disabled.

Read more...

Attribute
table-disabled
Default value
false

tableParent

Property
tableParent: FeatureTable

Reference to a table instance that this table is directly related to.

tableTemplate

Property
tableTemplate: TableTemplate

The associated template used for the feature table.

Read more...

timeExtent

Property
timeExtent: TimeExtent

The TimeExtent in which to filter and display data within the FeatureTable widget.

Read more...

timeZone

Property
timeZone: string

Dates and times displayed in the widget will be in terms of this time zone.

Read more...

Attribute
time-zone

Methods

MethodSignature
componentOnReady(): Promise<void>
deleteSelection(showWarningPrompt?: boolean): Promise<void>
destroy(): Promise<void>
exportSelectionToCSV(includeGeometry?: boolean): Promise<void>
findColumn(fieldName: string): Promise<__esri.ActionColumn | __esri.AttachmentsColumn | __esri.Column | __esri.GroupColumn | __esri.RelationshipColumn | nullish>
goToPage(index: number): Promise<void>
hideColumn(fieldName: string): Promise<void>
nextPage(): Promise<void>
previousPage(): Promise<void>
refresh(): Promise<void>
scrollToBottom(): Promise<void>
scrollToIndex(index: number): Promise<void>
scrollToLeft(): Promise<void>
scrollToRow(objectId: number): Promise<void>
scrollToTop(): Promise<void>
showAllColumns(): Promise<void>
showColumn(fieldName: string): Promise<void>
sortColumn(path: string, direction: "asc" | "desc"): Promise<void>
zoomToSelection(): Promise<void>

componentOnReady

Method
componentOnReady(): Promise<void>

Create a promise that resolves once component is fully loaded.

Returns
Promise<void>

deleteSelection

Method
deleteSelection(showWarningPrompt?: boolean): Promise<void>
Parameters
ParameterTypeOptional?
showWarningPrompt
boolean | undefined
Returns
Promise<void>

destroy

Method
destroy(): Promise<void>

Permanently destroy the component

Returns
Promise<void>

exportSelectionToCSV

Method
exportSelectionToCSV(includeGeometry?: boolean): Promise<void>
Parameters
ParameterTypeOptional?
includeGeometry
boolean | undefined
Returns
Promise<void>

findColumn

Method
findColumn(fieldName: string): Promise<__esri.ActionColumn | __esri.AttachmentsColumn | __esri.Column | __esri.GroupColumn | __esri.RelationshipColumn | nullish>
Parameters
ParameterTypeOptional?
fieldName
string
Returns
Promise<Column | GroupColumn | ActionColumn | AttachmentsColumn | RelationshipColumn | null | undefined>

goToPage

Method
goToPage(index: number): Promise<void>
Parameters
ParameterTypeOptional?
index
number
Returns
Promise<void>

hideColumn

Method
hideColumn(fieldName: string): Promise<void>
Parameters
ParameterTypeOptional?
fieldName
string
Returns
Promise<void>

nextPage

Method
nextPage(): Promise<void>
Returns
Promise<void>

previousPage

Method
previousPage(): Promise<void>
Returns
Promise<void>

refresh

Method
refresh(): Promise<void>
Returns
Promise<void>

scrollToBottom

Method
scrollToBottom(): Promise<void>
Returns
Promise<void>

scrollToIndex

Method
scrollToIndex(index: number): Promise<void>
Parameters
ParameterTypeOptional?
index
number
Returns
Promise<void>

scrollToLeft

Method
scrollToLeft(): Promise<void>
Returns
Promise<void>

scrollToRow

Method
scrollToRow(objectId: number): Promise<void>
Parameters
ParameterTypeOptional?
objectId
number
Returns
Promise<void>

scrollToTop

Method
scrollToTop(): Promise<void>
Returns
Promise<void>

showAllColumns

Method
showAllColumns(): Promise<void>
Returns
Promise<void>

showColumn

Method
showColumn(fieldName: string): Promise<void>
Parameters
ParameterTypeOptional?
fieldName
string
Returns
Promise<void>

sortColumn

Method
sortColumn(path: string, direction: "asc" | "desc"): Promise<void>
Parameters
ParameterTypeOptional?
path
string
direction
"asc" | "desc"
Returns
Promise<void>

zoomToSelection

Method
zoomToSelection(): Promise<void>
Returns
Promise<void>

Events

EventType
FeatureTableCellClickEvent
FeatureTableCellKeydownEvent
FeatureTableCellPointeroutEvent
FeatureTableCellPointeroverEvent
FeatureTableColumnReorderEvent
{ name: "size" | "state" | "effectiveSize" | "isQueryingOrSyncing" | "layerView"; }
undefined
CollectionChangeEvent<string | number>

arcgisCellClick

Event
arcgisCellClick: FeatureTableCellClickEvent

arcgisCellKeydown

Event
arcgisCellKeydown: FeatureTableCellKeydownEvent

arcgisCellPointerout

Event
arcgisCellPointerout: FeatureTableCellPointeroutEvent

arcgisCellPointerover

Event
arcgisCellPointerover: FeatureTableCellPointeroverEvent

arcgisColumnReorder

Event
arcgisColumnReorder: FeatureTableColumnReorderEvent

arcgisPropertyChange

Event
arcgisPropertyChange: { name: "size" | "state" | "effectiveSize" | "isQueryingOrSyncing" | "layerView"; }

Fired when the value of a property is changed. Use this to listen to changes to properties.

arcgisReady

Event
arcgisReady: undefined

arcgisSelectionChange

Event
arcgisSelectionChange: CollectionChangeEvent<string | number>

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

You can no longer sign into this site. Go to your ArcGIS portal or the ArcGIS Location Platform dashboard to perform management tasks.

Your ArcGIS portal

Create, manage, and access API keys and OAuth 2.0 developer credentials, hosted layers, and data services.

Your ArcGIS Location Platform dashboard

Manage billing, monitor service usage, and access additional resources.

Learn more about these changes in the What's new in Esri Developers June 2024 blog post.

Close