Use dark colors for code blocks Copy
1
import "@arcgis/map-components/components/arcgis-feature-table";No specific import is needed for this component.
The Feature Table component provides an interactive tabular view of each feature's attributes in a feature layer.
Demo Properties actionColumnreadonlyProperty
Reference to the current action column.
Property
Configuration for the ActionColumn.
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.
readonlyProperty
Use this read-only property if needing to query features while retaining a column's sort order.
readonlyProperty
A flattened array of all columns within the table, including nested columns.
readonlyProperty
allRelatedTablesVisible: boolean
Indicates the table is displaying all related tables in "show all" mode.
readonlyProperty
allVisibleColumns: Array<Column>
A flattened array of all visible columns within the table, including nested columns.
readonlyProperty
A flattened array of all attachment columns within the table, including nested columns.
Property
attachmentsEnabled: boolean
Indicates whether to display the Attachments field in the table.
readonlyProperty
This read-only property provides the the configuration options for the attachments view.
Property
Use this property to configure how columns display within the table in regard to visibility, column order, and sorting.
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.
Property
autoRefreshDisabled: boolean
Indicates whether the table should automatically refresh when the underlying data changes
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.
Property
columnReorderingDisabled: boolean
Indicates whether the table should allow reordering of columns.
readonlyProperty
A read-only collection of column, field, group, action, attachment, and relationship columns that are displayed within the table.
Property
definitionExpression: string
The SQL where clause used to filter features visible in the table.
Property
description: Function | string
Text displayed in the table header, under the title.
Property
editingEnabled: boolean
Indicates whether editing is enabled on the data within the feature table.
readonlyProperty
effectiveSize: number
Total number of records displayed in the table's current view.
readonlyProperty
A flattened array of all field columns within the table, including nested columns.
Property
filterBySelectionEnabled: boolean
Indicates whether the table only displays rows that are considered selected.
Property
Set this property to filter the features displayed in the table.
readonlyProperty
A flattened array of all group columns within the table.
Property
A collection of string values which indicate field.names that should be hidden within the table.
Property
hideColumnDescriptions: boolean
Indicates whether to display descriptions in the header cells of individual columns.
Property
hideColumnMenuItemsSortAscending: boolean
Indicates whether to display the Sort Ascending menu item.
Property
hideColumnMenuItemsSortDescending: boolean
Indicates whether to display the Sort Descending menu item.
Property
hideColumnMenus: boolean
Indicates whether to display the menu items within the individual columns
Property
hideHeader: boolean
Indicates whether to display the feature table's header information.
Property
hideLayerDropdownIcons: boolean
Indicates whether to display layer-specific icons in the layer drop down menu.
Property
hideMenu: boolean
Indicates whether to display the feature table's menu.
Property
hideMenuItemsClearSelection: boolean
Indicates whether to display the Clear selection menu item.
Property
hideMenuItemsDeleteSelection: boolean
Indicates whether to display the Delete Selection menu item.
Property
hideMenuItemsExportSelectionToCsv: boolean
Indicates whether to display the Export selection to CSV menu item.
Property
hideMenuItemsRefreshData: boolean
Indicates whether to display the Refresh data menu item.
Property
hideMenuItemsSelectedRecordsShowAllToggle: boolean
Indicates whether to toggle between showing only selected records in the table to showing all of the records.
Property
hideMenuItemsSelectedRecordsShowSelectedToggle: boolean
Indicates whether to display the Show selected records menu item.
Property
hideMenuItemsToggleColumns: boolean
Indicates whether to enable toggling column visibility within the menu.
Property
hideMenuItemsZoomToSelection: boolean
Indicates whether to display the Zoom to selected menu item.
Property
hideProgress: boolean
Indicates whether to display the progress indicator when the table is querying or syncing data.
Property
hideSelectionColumn: boolean
Indicates whether to display the selection column in the table. Each row has a checkbox that selects its corresponding feature.
Property
hideTooltips: boolean
Indicates whether to display the tooltip for the Show/hide columns button.
Property
highlightDisabled: boolean
Indicates whether to highlight the associated feature when a row is selected by checking the corresponding checkbox.
Property
This property accepts and returns a collection of feature object IDs.
Property
icon: string
Icon which represents the component. Typically used when the component is controlled by another component (e.g. by the Expand component).
Property
initialSize: number
The user-provided number of total features accessed from the data source.
readonlyProperty
isQueryingOrSyncing: boolean
A read-only property which indicates if the table is querying or syncing data.
Property
label: string
The components label.
Property
layerItemId: string
Portal Item Id for a layer to load. You can set, layer, layerUrl, or itemId, but not more than one.
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.
Property
layerUrl: string
Url for a layer to load. You can set, layer, layerUrl, or itemId, but not more than one.
readonlyProperty
The layer view associated with the table's layer.
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.
Property
Set this object to customize the feature table's menu content.
Property
multipleSelectionDisabled: boolean
Controls whether the table allows multiple selected rows.
Property
multipleSortEnabled: boolean
Indicates whether sorting multiple columns is supported within the table.
Property
multipleSortPriority: "append" | "prepend"
This property can be used to determine how newly sorted columns are prioritized.
Property
navigationScale: "l" | "m" | "s"
This property controls the scale of all components in the navigation bar displayed when viewing attachments or related records.
Property
noDataMessage: string
This property can be used to override the text displayed when the table is fully loaded but no rows are available.
Property
This property accepts and returns a collection of feature object IDs.
Property
outFields: Array<string>
An array of field names from the table's data source to include when the table requests data.
readonlyProperty
pageCount: number
Number of pages of features to be displayed in the table, based on the total number of features and configured pageSize.
Property
pageIndex: number
Represents the index of the page of the feature currently being displayed.
Property
pageSize: number
The default page size used when displaying features within the table.
Property
paginationEnabled: boolean
Controls whether the table should only display a single page of features at any time.
Property
position: "bottom-leading" | "bottom-left" | "bottom-right" | "bottom-trailing" | "manual" | "top-leading" | "top-left" | "top-right" | "top-trailing"
Property
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.
Property
relatedRecordsEnabled: boolean
Indicates whether to display any related records associated with rows within the table.
Property
Reference to a nested table instance representing a relationship with another table.
Property
A collection of nested table instances.
readonlyProperty
A flattened array of all relationship columns within the table, including nested columns.
Property
returnGeometryEnabled: boolean
Indicates whether to fetch geometries for the corresponding features displayed in the table.
Property
returnMEnabled: boolean
Indicates whether geometries fetched for the corresponding features contain M values, if supported.
Property
returnZEnabled: boolean
Indicates whether the fetched features' geometries contain Z values.
Property
This property accepts and returns a collection of feature object IDs.
Property
showLayerDropdown: boolean
Indicates whether to display the feature table's layer switch drop down menu.
readonlyProperty
size: number
Total number of records currently displayed in the table.
state: "disabled" | "error" | "loaded" | "loading" | "ready"
The current state of the component.
readonlyProperty
supportsAddAttachments: boolean
Indicates whether the table and associated layer support adding attachments with the current configuration.
readonlyProperty
supportsAttachments: boolean
Indicates whether the table and associated layer support viewing attachments with the current configuration.
readonlyProperty
supportsDeleteAttachments: boolean
Indicates whether the table and associated layer support deleting attachments with the current configuration.
readonlyProperty
supportsResizeAttachments: boolean
Defines whether or not the feature supports resizing attachments.
readonlyProperty
supportsUpdateAttachments: boolean
Indicates whether the table and associated layer support updating attachments with the current configuration.
Property
syncTemplateOnChangesDisabled: boolean
Indicates whether the table should synchronize the current attributeTableTemplate being used based on changes made to the table's UI.
Property
Reference to top-level controller table, if this table is a related table, nested within and controlled by another table.
Property
tableDisabled: boolean
Indicates whether the table is disabled.
Property
Reference to a table instance that this table is directly related to.
Property
The associated template used for the feature table.
Property
The TimeExtent in which to filter and display data within the FeatureTable widget.
Property
timeZone: string
Dates and times displayed in the widget will be in terms of this time zone.
readonlyProperty
A flattened array of all top-level visible columns.
No slots to display.
Events arcgisCellClickEvent
arcgisCellClick: FeatureTableCellClickEvent bubbles
Events triggered on this element will be propagated to their outermost elements.
composedThe event is composable and will propagate across the shadow DOM into the standard DOM.
cancelableThe event's default behavior can be canceled, allowing for custom behavior to be implemented instead.
arcgisCellKeydownEvent
arcgisCellKeydown: FeatureTableCellKeydownEvent bubbles
Events triggered on this element will be propagated to their outermost elements.
composedThe event is composable and will propagate across the shadow DOM into the standard DOM.
cancelableThe event's default behavior can be canceled, allowing for custom behavior to be implemented instead.
arcgisCellPointeroutEvent
arcgisCellPointerout: FeatureTableCellPointeroutEvent bubbles
Events triggered on this element will be propagated to their outermost elements.
composedThe event is composable and will propagate across the shadow DOM into the standard DOM.
cancelableThe event's default behavior can be canceled, allowing for custom behavior to be implemented instead.
arcgisCellPointeroverEvent
arcgisCellPointerover: FeatureTableCellPointeroverEvent bubbles
Events triggered on this element will be propagated to their outermost elements.
composedThe event is composable and will propagate across the shadow DOM into the standard DOM.
cancelableThe event's default behavior can be canceled, allowing for custom behavior to be implemented instead.
arcgisColumnReorderEvent
arcgisColumnReorder: FeatureTableColumnReorderEvent bubbles
Events triggered on this element will be propagated to their outermost elements.
composedThe event is composable and will propagate across the shadow DOM into the standard DOM.
cancelableThe event's default behavior can be canceled, allowing for custom behavior to be implemented instead.
arcgisPropertyChangeEvent
arcgisPropertyChange: CustomEvent<{ name: "state" | "size" | "effectiveSize" | "isQueryingOrSyncing" | "layerView"; }>
Emitted when the value of a property is changed. Use this to listen to changes to properties.
bubblesEvents triggered on this element will be propagated to their outermost elements.
composedThe event is composable and will propagate across the shadow DOM into the standard DOM.
cancelableThe event's default behavior can be canceled, allowing for custom behavior to be implemented instead.
arcgisReadyEvent
arcgisReady: CustomEvent<void>
Emitted when the component associated with a map or scene view is is ready to be interacted with.
bubblesEvents triggered on this element will be propagated to their outermost elements.
composedThe event is composable and will propagate across the shadow DOM into the standard DOM.
cancelableThe event's default behavior can be canceled, allowing for custom behavior to be implemented instead.
arcgisSelectionChangeEvent
arcgisSelectionChange: CollectionChangeEvent<string | number> bubbles
Events triggered on this element will be propagated to their outermost elements.
composedThe event is composable and will propagate across the shadow DOM into the standard DOM.
cancelableThe event's default behavior can be canceled, allowing for custom behavior to be implemented instead.
Methods Method SignaturecomponentOnReady
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>
Method
componentOnReady(): Promise<void>
Create a promise that resolves once component is fully loaded.
ExampleUse dark colors for code blocks Copy
1
2
3
4
const arcgisFeatureTable = document.querySelector("arcgis-feature-table");
document.body.append(arcgisFeatureTable);
await arcgisFeatureTable.componentOnReady();
console.log("arcgis-feature-table is ready to go!");Method
deleteSelection(showWarningPrompt?: boolean): Promise<void>
showWarningPrompt
boolean | undefined
Method
destroy(): Promise<void>
Permanently destroy the component.
Method
exportSelectionToCSV(includeGeometry?: boolean): Promise<void>
includeGeometry
boolean | undefined
Method
findColumn(fieldName: string): Promise<__esri.ActionColumn | __esri.AttachmentsColumn | __esri.Column | __esri.GroupColumn | __esri.RelationshipColumn | nullish>
fieldName
string
Method
goToPage(index: number): Promise<void>
index
number
Method
hideColumn(fieldName: string): Promise<void>
fieldName
string
Method
nextPage(): Promise<void>
Method
previousPage(): Promise<void>
Method
refresh(): Promise<void>
Method
scrollToBottom(): Promise<void>
Method
scrollToIndex(index: number): Promise<void>
index
number
Method
scrollToLeft(): Promise<void>
Method
scrollToRow(objectId: number): Promise<void>
objectId
number
Method
scrollToTop(): Promise<void>
Method
showAllColumns(): Promise<void>
Method
showColumn(fieldName: string): Promise<void>
fieldName
string
Method
sortColumn(path: string, direction: "asc" | "desc"): Promise<void>
path
string
direction
"asc" | "desc"
Method
zoomToSelection(): Promise<void>
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4