Feature Table

Use dark colors for code blocksCopy
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

Property	Attribute	Type
`actionColumnConfig`		`ActionColumnConfig`
`activeFilters` readonly		`Collection<GeometryFilter \| SelectionFilter>`
`activeSortOrders` readonly		`Array<ColumnSortOrder>`
`allRelatedTablesVisible` readonly		`boolean`
`attachmentsEnabled`	`attachments-enabled`	`boolean`
`attributeTableTemplate`		`AttributeTableTemplate`
`autoDestroyDisabled`	`auto-destroy-disabled`	`boolean`
`autoRefreshDisabled`	`auto-refresh-disabled`	`boolean`
`columnReorderingDisabled`	`column-reordering-disabled`	`boolean`
`columns` readonly		`Collection<Column \| FieldColumn \| GroupColumn \| ActionColumn \| AttachmentsColumn \| RelationshipColumn>`
`description`	`description`	`Function \| string`
`editingEnabled`	`editing-enabled`	`boolean`
`effectiveSize` readonly		`number`
`filterBySelectionEnabled`	`filter-by-selection-enabled`	`boolean`
`filterGeometry`		`Extent \| Mesh \| Multipoint \| Point \| Polygon \| Polyline`
`hiddenFields`		`Collection<string>`
`hideColumnDescriptions`	`hide-column-descriptions`	`boolean`
`hideColumnMenuItemsSortAscending`	`hide-column-menu-items-sort-ascending`	`boolean`
`hideColumnMenuItemsSortDescending`	`hide-column-menu-items-sort-descending`	`boolean`
`hideColumnMenus`	`hide-column-menus`	`boolean`
`hideHeader`	`hide-header`	`boolean`
`hideMenu`	`hide-menu`	`boolean`
`hideMenuItemsClearSelection`	`hide-menu-items-clear-selection`	`boolean`
`hideMenuItemsDeleteSelection`	`hide-menu-items-delete-selection`	`boolean`
`hideMenuItemsExportSelectionToCsv`	`hide-menu-items-export-selection-to-csv`	`boolean`
`hideMenuItemsRefreshData`	`hide-menu-items-refresh-data`	`boolean`
`hideMenuItemsSelectedRecordsShowAllToggle`	`hide-menu-items-selected-records-show-all-toggle`	`boolean`
`hideMenuItemsSelectedRecordsShowSelectedToggle`	`hide-menu-items-selected-records-show-selected-toggle`	`boolean`
`hideMenuItemsToggleColumns`	`hide-menu-items-toggle-columns`	`boolean`
`hideMenuItemsZoomToSelection`	`hide-menu-items-zoom-to-selection`	`boolean`
`hideProgress`	`hide-progress`	`boolean`
`hideSelectionColumn`	`hide-selection-column`	`boolean`
`hideTooltips`	`hide-tooltips`	`boolean`
`highlightDisabled`	`highlight-disabled`	`boolean`
`highlightIds`		`Collection<string \| number>`
`icon`	`icon`	`string`
`initialSize`	`initial-size`	`number`
`isQueryingOrSyncing` readonly		`boolean`
`label`	`label`	`string`
`layer`		`CSVLayer \| CatalogFootprintLayer \| FeatureLayer \| GeoJSONLayer \| ImageryLayer \| [KnowledgeGraphSublayer](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-knowledgeGraph-KnowledgeGraphSublayer.html) \| OrientedImageryLayer \| SceneLayer \| Sublayer \| WFSLayer`
`layerItemId`	`layer-item-id`	`string`
`layers`		`Array<FeatureLayer \| SceneLayer \| GeoJSONLayer \| WFSLayer \| CSVLayer \| ImageryLayer \| CatalogFootprintLayer \| KnowledgeGraphSublayer>`
`layerUrl`	`layer-url`	`string`
`layerView` readonly		`LayerView`
`maxSize`	`max-size`	`number`
`menuConfig`		`TableMenuConfig`
`multipleSelectionDisabled`	`multiple-selection-disabled`	`boolean`
`multipleSortEnabled`	`multiple-sort-enabled`	`boolean`
`objectIds`		`Collection<string \| number>`
`outFields`		`Array<string>`
`pageCount` readonly		`number`
`pageIndex`	`page-index`	`number`
`pageSize`	`page-size`	`number`
`paginationEnabled`	`pagination-enabled`	`boolean`
`position`	`position`	`"bottom-leading" \| "bottom-left" \| "bottom-right" \| "bottom-trailing" \| "manual" \| "top-leading" \| "top-left" \| "top-right" \| "top-trailing"`
`referenceElement`	`reference-element`	`ArcgisLinkChart \| ArcgisMap \| ArcgisScene \| string`
`relatedRecordsEnabled`	`related-records-enabled`	`boolean`
`relatedTable`		`FeatureTable`
`relatedTables`		`Collection<FeatureTable>`
`returnGeometryEnabled`	`return-geometry-enabled`	`boolean`
`returnMEnabled`	`return-m-enabled`	`boolean`
`returnZEnabled`	`return-z-enabled`	`boolean`
`rowHighlightIds`		`Collection<string \| number>`
`showLayerDropdown`	`show-layer-dropdown`	`boolean`
`size` readonly		`number`
`state` readonly	`state`	`"disabled" \| "error" \| "loaded" \| "loading" \| "ready"`
`tableController`		`FeatureTable`
`tableDisabled`	`table-disabled`	`boolean`
`tableParent`		`FeatureTable`
`tableTemplate`		`TableTemplate`
`timeExtent`		`TimeExtent`
`timeZone`	`time-zone`	`string`

actionColumnConfig

Property

actionColumnConfig: ActionColumnConfig

Configuration for the ActionColumn.

activeFilters

readonlyProperty

activeFilters: Collection<GeometryFilter | SelectionFilter>

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.

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.

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.

Attribute: description

editingEnabled

Property

editingEnabled: boolean

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

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.

Attribute: filter-by-selection-enabled
Default value: false

filterGeometry

Property

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

Default value: null

hiddenFields

Property

hiddenFields: Collection<string>

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

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.

Attribute: highlight-disabled
Default value: false

highlightIds

Property

highlightIds: Collection<string | number>

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

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.

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) | 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.

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

layers: Array<FeatureLayer | SceneLayer | GeoJSONLayer | WFSLayer | CSVLayer | ImageryLayer | CatalogFootprintLayer | KnowledgeGraphSublayer>

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.

Attribute: max-size

menuConfig

Property

menuConfig: TableMenuConfig

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

multipleSelectionDisabled

Property

multipleSelectionDisabled: boolean

Controls whether the table allows multiple selected rows.

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.

outFields

Property

outFields: Array<string>

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

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.

pageIndex

Property

pageIndex: number

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

Attribute: page-index

pageSize

Property

pageSize: number

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

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.

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.

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.

returnGeometryEnabled

Property

returnGeometryEnabled: boolean

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

Attribute: return-geometry-enabled
Default value: false

returnMEnabled

Property

returnMEnabled: boolean

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

Attribute: return-m-enabled
Default value: false

returnZEnabled

Property

returnZEnabled: boolean

Indicates whether the fetched features' geometries contain Z values.

Attribute: return-z-enabled
Default value: false

rowHighlightIds

Property

rowHighlightIds: Collection<string | number>

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

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.

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.

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.

timeExtent

Property

timeExtent: TimeExtent

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

timeZone

Property

timeZone: string

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

Attribute: time-zone

Methods

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

Parameter	Type	Optional?
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

Parameter	Type	Optional?
includeGeometry	`boolean \| undefined`

Returns: Promise<void>

findColumn

Method

findColumn(fieldName: string): Promise<__esri.ActionColumn | __esri.AttachmentsColumn | __esri.Column | __esri.GroupColumn | __esri.RelationshipColumn | nullish>

Parameters

Parameter	Type	Optional?
fieldName	`string`

Returns: Promise<Column | GroupColumn | ActionColumn | AttachmentsColumn | RelationshipColumn | null | undefined>

goToPage

Method

goToPage(index: number): Promise<void>

Parameters

Parameter	Type	Optional?
index	`number`

Returns: Promise<void>

hideColumn

Method

hideColumn(fieldName: string): Promise<void>

Parameters

Parameter	Type	Optional?
fieldName	`string`

Returns: Promise<void>

Method

nextPage(): Promise<void>

Returns: Promise<void>

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

Parameter	Type	Optional?
index	`number`

Returns: Promise<void>

scrollToLeft

Method

scrollToLeft(): Promise<void>

Returns: Promise<void>

scrollToRow

Method

scrollToRow(objectId: number): Promise<void>

Parameters

Parameter	Type	Optional?
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

Parameter	Type	Optional?
fieldName	`string`

Returns: Promise<void>

sortColumn

Method

sortColumn(path: string, direction: "asc" | "desc"): Promise<void>

Parameters

Parameter	Type	Optional?
path	`string`
direction	`"asc" \| "desc"`

Returns: Promise<void>

zoomToSelection

Method

zoomToSelection(): Promise<void>

Returns: Promise<void>

Events

Event	Type
`arcgisCellClick`	`FeatureTableCellClickEvent`
`arcgisCellKeydown`	`FeatureTableCellKeydownEvent`
`arcgisCellPointerout`	`FeatureTableCellPointeroutEvent`
`arcgisCellPointerover`	`FeatureTableCellPointeroverEvent`
`arcgisColumnReorder`	`FeatureTableColumnReorderEvent`
`arcgisPropertyChange`	`{ name: "size" \| "state" \| "effectiveSize" \| "isQueryingOrSyncing" \| "layerView"; }`
`arcgisReady`	`undefined`
`arcgisSelectionChange`	`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"; }

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

arcgisReady

Event

arcgisReady: undefined

Emitted when the component associated with a map view is is ready to be interacted with.

arcgisSelectionChange

Event

arcgisSelectionChange: CollectionChangeEvent<string | number>