Feature Table

ESM:

Use dark colors for code blocksCopy
import "@arcgis/map-components/components/arcgis-feature-table";

CDN:

No specific import is needed for this component.

Since:ArcGIS Maps SDK for JavaScript 4.31

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

Demo

Properties

Property	Attribute	Type
`actionColumn` readonly		`ActionColumn`
`actionColumnConfig`		`ActionColumnConfig`
`activeFilters` readonly		`Collection<GeometryFilter \| SelectionFilter>`
`activeSortOrders` readonly		`Array<ColumnSortOrder>`
`allColumns` readonly		`Array<Column>`
`allRelatedTablesVisible` readonly		`boolean`
`allVisibleColumns` readonly		`Array<Column>`
`attachmentsColumns` readonly		`Array<AttachmentsColumn>`
`attachmentsEnabled`	`attachments-enabled`	`boolean`
`attachmentsViewOptions` readonly		`AttachmentsViewOptions`
`attributeTableTemplate`		`AttributeTableTemplate`
`autoDestroyDisabled`	`auto-destroy-disabled`	`boolean`
`autoRefreshDisabled`	`auto-refresh-disabled`	`boolean`
`columnPerformanceModeDisabled`	`column-performance-mode-disabled`	`boolean`
`columnReorderingDisabled`	`column-reordering-disabled`	`boolean`
`columns` readonly		`Collection<[AttachmentsColumn](https://next.gha.afd.arcgis.com/javascript/latest/api-reference/esri-widgets-FeatureTable-AttachmentsColumn.html) \| ActionColumn \| Column \| FieldColumn \| GroupColumn \| RelationshipColumn>`
`definitionExpression`	`definition-expression`	`string`
`description`	`description`	`Function \| string`
`editingEnabled`	`editing-enabled`	`boolean`
`effectiveSize` readonly		`number`
`fieldColumns` readonly		`Array<FieldColumn>`
`filterBySelectionEnabled`	`filter-by-selection-enabled`	`boolean`
`filterGeometry`		`Extent \| Mesh \| Multipoint \| Point \| Polygon \| Polyline`
`groupColumns` readonly		`Array<GroupColumn>`
`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`
`hideLayerDropdownIcons`	`hide-layer-dropdown-icons`	`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://next.gha.afd.arcgis.com/javascript/latest/api-reference/esri-layers-knowledgeGraph-KnowledgeGraphSublayer.html) \| OrientedImageryLayer \| ParquetLayer \| SceneLayer \| Sublayer \| WFSLayer`
`layerItemId`	`layer-item-id`	`string`
`layers`		`Array<FeatureLayer \| SceneLayer \| GeoJSONLayer \| KnowledgeGraphSublayer \| WFSLayer \| CSVLayer \| ImageryLayer \| CatalogFootprintLayer>`
`layerUrl`	`layer-url`	`string`
`layerView` readonly		`LayerView`
`maxSize`	`max-size`	`number`
`menuConfig`		`TableMenuConfig`
`multipleSelectionDisabled`	`multiple-selection-disabled`	`boolean`
`multipleSortEnabled`	`multiple-sort-enabled`	`boolean`
`multipleSortPriority`	`multiple-sort-priority`	`"append" \| "prepend"`
`navigationScale`	`navigation-scale`	`"l" \| "m" \| "s"`
`noDataMessage`	`no-data-message`	`string`
`objectIds`		`Collection<string \| number>`
`outFields`		`Array<string>`
`pageCount` readonly		`number`
`pageIndex`	`page-index`	`number`
`pageSize`	`page-size`	`number`
`paginationEnabled`	`pagination-enabled`	`boolean`
`position` deprecated	`position`	`"bottom-leading" \| "bottom-left" \| "bottom-right" \| "bottom-trailing" \| "manual" \| "top-leading" \| "top-left" \| "top-right" \| "top-trailing"`
`referenceElement`	`reference-element`	`HTMLArcgisLinkChartElement \| HTMLArcgisMapElement \| HTMLArcgisSceneElement \| string`
`relatedRecordsEnabled`	`related-records-enabled`	`boolean`
`relatedTable`		`FeatureTable`
`relatedTables`		`Collection<FeatureTable>`
`relationshipColumns` readonly		`Array<RelationshipColumn>`
`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` readonlyreflected	`state`	`"disabled" \| "error" \| "loaded" \| "loading" \| "ready"`
`supportsAddAttachments` readonly		`boolean`
`supportsAttachments` readonly		`boolean`
`supportsDeleteAttachments` readonly		`boolean`
`supportsResizeAttachments` readonly		`boolean`
`supportsUpdateAttachments` readonly		`boolean`
`syncTemplateOnChangesDisabled`	`sync-template-on-changes-disabled`	`boolean`
`tableController`		`FeatureTable`
`tableDisabled`	`table-disabled`	`boolean`
`tableParent`		`FeatureTable`
`tableTemplate`		`TableTemplate`
`timeExtent`		`TimeExtent`
`timeZone`	`time-zone`	`string`
`view`		`LinkChartView \| MapView \| SceneView`
`visibleColumns` readonly		`Array<Column>`

actionColumn

readonlyProperty

actionColumn: ActionColumn

Reference to the current action column.

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: []

allColumns

readonlyProperty

allColumns: Array<Column>

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

allRelatedTablesVisible

readonlyProperty

allRelatedTablesVisible: boolean

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

Default value: false

allVisibleColumns

readonlyProperty

allVisibleColumns: Array<Column>

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

attachmentsColumns

readonlyProperty

attachmentsColumns: Array<AttachmentsColumn>

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

attachmentsEnabled

Property

attachmentsEnabled: boolean

Indicates whether to display the Attachments field in the table.

Attribute: attachments-enabled
Default value: false

attachmentsViewOptions

readonlyProperty

attachmentsViewOptions: AttachmentsViewOptions

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

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

columnPerformanceModeDisabled

Property

columnPerformanceModeDisabled: boolean

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.

Attribute: column-performance-mode-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

columns: Collection<[AttachmentsColumn](https://next.gha.afd.arcgis.com/javascript/latest/api-reference/esri-widgets-FeatureTable-AttachmentsColumn.html) | ActionColumn | Column | FieldColumn | GroupColumn | RelationshipColumn>

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

definitionExpression

Property

definitionExpression: string

The SQL where clause used to filter features visible in the table.

Attribute: definition-expression

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.

fieldColumns

readonlyProperty

fieldColumns: Array<FieldColumn>

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

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

groupColumns

readonlyProperty

groupColumns: Array<GroupColumn>

A flattened array of all group columns within the table.

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

hideLayerDropdownIcons

Property

hideLayerDropdownIcons: boolean

Indicates whether to display layer-specific icons in the layer drop down menu.

Attribute: hide-layer-dropdown-icons
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).

See also

Calcite Icons

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://next.gha.afd.arcgis.com/javascript/latest/api-reference/esri-layers-knowledgeGraph-KnowledgeGraphSublayer.html) | OrientedImageryLayer | ParquetLayer | SceneLayer | Sublayer | WFSLayer

The associated CatalogFootprintLayer, CSVLayer, FeatureLayer, GeoJSONLayer, ImageryLayer, KnowledgeGraphSublayer, ParquetLayer SceneLayer, WFSLayer, OrientedImageryLayer or Sublayer 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 | KnowledgeGraphSublayer | WFSLayer | CSVLayer | ImageryLayer | CatalogFootprintLayer>

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

multipleSortPriority

Property

multipleSortPriority: "append" | "prepend"

This property can be used to determine how newly sorted columns are prioritized.

Attribute: multiple-sort-priority
Default value: "prepend"

navigationScale

Property

navigationScale: "l" | "m" | "s"

This property controls the scale of all components in the navigation bar displayed when viewing attachments or related records.

Attribute: navigation-scale

noDataMessage

Property

noDataMessage: string

This property can be used to override the text displayed when the table is fully loaded but no rows are available.

Attribute: no-data-message

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

deprecatedProperty

position: "bottom-leading" | "bottom-left" | "bottom-right" | "bottom-trailing" | "manual" | "top-leading" | "top-left" | "top-right" | "top-trailing"

Deprecatedsince 4.34, use slot instead.

Attribute: position

referenceElement

Property

referenceElement: HTMLArcgisLinkChartElement | HTMLArcgisMapElement | HTMLArcgisSceneElement | string

By assigning the id attribute of the Map or Scene component to this property, you can position a child component anywhere in the DOM while still maintaining a connection to the Map or Scene.

See also

Associate components with a Map or Scene component

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.

relationshipColumns

readonlyProperty

relationshipColumns: Array<RelationshipColumn>

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

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 current state of the component.

Attribute: state
Default value: "disabled"

supportsAddAttachments

readonlyProperty

supportsAddAttachments: boolean

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

Default value: false

supportsAttachments

readonlyProperty

supportsAttachments: boolean

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

Default value: false

supportsDeleteAttachments

readonlyProperty

supportsDeleteAttachments: boolean

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

Default value: false

supportsResizeAttachments

readonlyProperty

supportsResizeAttachments: boolean

Defines whether or not the feature supports resizing attachments.

Default value: false

supportsUpdateAttachments

readonlyProperty

supportsUpdateAttachments: boolean

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

Default value: false

syncTemplateOnChangesDisabled

Property

syncTemplateOnChangesDisabled: boolean

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

Attribute: sync-template-on-changes-disabled
Default value: false

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

view

Property

view: LinkChartView | MapView | SceneView

The view associated with the component.

Note: The recommended approach is to fully migrate applications to use map and scene components and avoid using MapView and SceneView directly. However, if you are migrating a large application from widgets to components, you might prefer a more gradual transition. To support this use case, the SDK includes this view property which connects a component to a MapView or SceneView. Ultimately, once migration is complete, the Feature Table component will be associated with a map or scene component rather than using the view property.

visibleColumns

readonlyProperty

visibleColumns: Array<Column>

A flattened array of all top-level visible columns.

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.

Example

Use dark colors for code blocksCopy
const arcgisFeatureTable = document.querySelector("arcgis-feature-table");
document.body.append(arcgisFeatureTable);
await arcgisFeatureTable.componentOnReady();
console.log("arcgis-feature-table is ready to go!");

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<[AttachmentsColumn](https://next.gha.afd.arcgis.com/javascript/latest/api-reference/esri-widgets-FeatureTable-AttachmentsColumn.html) | ActionColumn | Column | GroupColumn | 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`	`CustomEvent<FeatureTableCellClickEvent>`
`arcgisCellKeydown`	`CustomEvent<FeatureTableCellKeydownEvent>`
`arcgisCellPointerout`	`CustomEvent<FeatureTableCellPointeroutEvent>`
`arcgisCellPointerover`	`CustomEvent<FeatureTableCellPointeroverEvent>`
`arcgisColumnReorder`	`CustomEvent<FeatureTableColumnReorderEvent>`
`arcgisPropertyChange`	`CustomEvent<{ name: "state" \| "size" \| "layerView" \| "effectiveSize" \| "isQueryingOrSyncing"; }>`
`arcgisReady`	`CustomEvent<void>`
`arcgisSelectionChange`	`CustomEvent<CollectionChangeEvent<string \| number>>`

arcgisCellClick

Event

arcgisCellClick: CustomEvent<FeatureTableCellClickEvent>

arcgisCellKeydown

Event

arcgisCellKeydown: CustomEvent<FeatureTableCellKeydownEvent>

arcgisCellPointerout

Event

arcgisCellPointerout: CustomEvent<FeatureTableCellPointeroutEvent>

arcgisCellPointerover

Event

arcgisCellPointerover: CustomEvent<FeatureTableCellPointeroverEvent>

arcgisColumnReorder

Event

arcgisColumnReorder: CustomEvent<FeatureTableColumnReorderEvent>

arcgisPropertyChange

Event

arcgisPropertyChange: CustomEvent<{ name: "state" | "size" | "layerView" | "effectiveSize" | "isQueryingOrSyncing"; }>

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

arcgisReady

Event

arcgisReady: CustomEvent<void>

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

arcgisSelectionChange

Event

arcgisSelectionChange: CustomEvent<CollectionChangeEvent<string | number>>