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 |
---|---|---|
| ||
activeFilters readonly |
| |
activeSortOrders readonly |
| Array<ColumnSortOrder> |
allRelatedTablesVisible readonly |
| boolean |
attachments-enabled | boolean | |
| ||
auto-destroy-disabled | boolean | |
auto-refresh-disabled | boolean | |
column-reordering-disabled | boolean | |
columns readonly |
| |
description | Function | string | |
editing-enabled | boolean | |
effectiveSize readonly |
| 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 | |
isQueryingOrSyncing readonly |
| 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 | |
| Array<FeatureLayer | SceneLayer | GeoJSONLayer | WFSLayer | CSVLayer | ImageryLayer | CatalogFootprintLayer | KnowledgeGraphSublayer> | |
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 |
activeFilters
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
activeSortOrders: Array<ColumnSortOrder>
Use this read-only property if needing to query features while retaining a column's sort order.
- Default value
- []
allRelatedTablesVisible
allRelatedTablesVisible: boolean
Indicates the table is displaying all related tables in "show all" mode.
- Default value
- false
attachmentsEnabled
attachmentsEnabled: boolean
Indicates whether to display the Attachments
field in the table.
- Attribute
- attachments-enabled
- Default value
- false
attributeTableTemplate
attributeTableTemplate: AttributeTableTemplate
Use this property to configure how columns display within the table in regard to visibility, column order, and sorting.
autoDestroyDisabled
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
autoRefreshDisabled: boolean
Indicates whether the table should automatically refresh when the underlying data changes
- Attribute
- auto-refresh-disabled
- Default value
- false
columnReorderingDisabled
columnReorderingDisabled: boolean
Indicates whether the table should allow reordering of columns.
- Attribute
- column-reordering-disabled
- Default value
- false
columns
columns: Collection<Column | FieldColumn | GroupColumn | ActionColumn | AttachmentsColumn | RelationshipColumn>
A read-only collection of column, field, group, action, attachment, and relationship columns that are displayed within the table.
description
description: Function | string
Text displayed in the table header, under the title.
- Attribute
- description
editingEnabled
editingEnabled: boolean
Indicates whether editing is enabled on the data within the feature table.
- Attribute
- editing-enabled
- Default value
- false
effectiveSize
effectiveSize: number
Total number of records displayed in the table's current view.
filterBySelectionEnabled
filterBySelectionEnabled: boolean
Indicates whether the table only displays rows that are considered selected.
- Attribute
- filter-by-selection-enabled
- Default value
- false
filterGeometry
Set this property to filter the features displayed in the table.
- Default value
- null
hiddenFields
hiddenFields: Collection<string>
A collection of string values which indicate field.names that should be hidden within the table.
hideColumnDescriptions
hideColumnDescriptions: boolean
Indicates whether to display descriptions in the header cells of individual columns.
- Attribute
- hide-column-descriptions
- Default value
- false
hideColumnMenuItemsSortAscending
hideColumnMenuItemsSortAscending: boolean
Indicates whether to display the Sort Ascending menu item.
- Attribute
- hide-column-menu-items-sort-ascending
- Default value
- false
hideColumnMenuItemsSortDescending
hideColumnMenuItemsSortDescending: boolean
Indicates whether to display the Sort Descending menu item.
- Attribute
- hide-column-menu-items-sort-descending
- Default value
- false
hideColumnMenus
hideColumnMenus: boolean
Indicates whether to display the menu items within the individual columns
- Attribute
- hide-column-menus
- Default value
- false
hideHeader
hideHeader: boolean
Indicates whether to display the feature table's header information.
- Attribute
- hide-header
- Default value
- false
hideMenu
hideMenu: boolean
Indicates whether to display the feature table's menu.
- Attribute
- hide-menu
- Default value
- false
hideMenuItemsClearSelection
hideMenuItemsClearSelection: boolean
Indicates whether to display the Clear selection menu item.
- Attribute
- hide-menu-items-clear-selection
- Default value
- false
hideMenuItemsDeleteSelection
hideMenuItemsDeleteSelection: boolean
Indicates whether to display the Delete Selection menu item.
- Attribute
- hide-menu-items-delete-selection
- Default value
- false
hideMenuItemsExportSelectionToCsv
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
hideMenuItemsRefreshData: boolean
Indicates whether to display the Refresh data menu item.
- Attribute
- hide-menu-items-refresh-data
- Default value
- false
hideMenuItemsSelectedRecordsShowAllToggle
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
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
hideMenuItemsToggleColumns: boolean
Indicates whether to enable toggling column visibility within the menu.
- Attribute
- hide-menu-items-toggle-columns
- Default value
- false
hideMenuItemsZoomToSelection
hideMenuItemsZoomToSelection: boolean
Indicates whether to display the Zoom to selected menu item.
- Attribute
- hide-menu-items-zoom-to-selection
- Default value
- false
hideProgress
hideProgress: boolean
Indicates whether to display the progress indicator when the table is querying or syncing data.
- Attribute
- hide-progress
- Default value
- false
hideSelectionColumn
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
hideTooltips: boolean
Indicates whether to display the tooltip for the Show/hide columns button.
- Attribute
- hide-tooltips
- Default value
- false
highlightDisabled
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
highlightIds: Collection<string | number>
This property accepts and returns a collection of feature object IDs.
icon
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
initialSize: number
The user-provided number of total features accessed from the data source.
- Attribute
- initial-size
isQueryingOrSyncing
isQueryingOrSyncing: boolean
A read-only property which indicates if the table is querying or syncing data.
- Default value
- false
layer
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.
layerItemId
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
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
layerUrl: string
Url for a layer to load. You can set, layer
, layerUrl
, or itemId
,
but not more than one.
- Attribute
- layer-url
maxSize
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
menuConfig: TableMenuConfig
Set this object to customize the feature table's menu content.
multipleSelectionDisabled
multipleSelectionDisabled: boolean
Controls whether the table allows multiple selected rows.
- Attribute
- multiple-selection-disabled
- Default value
- false
multipleSortEnabled
multipleSortEnabled: boolean
Indicates whether sorting multiple columns is supported within the table.
- Attribute
- multiple-sort-enabled
- Default value
- false
objectIds
objectIds: Collection<string | number>
This property accepts and returns a collection of feature object IDs.
outFields
outFields: Array<string>
An array of field names from the table's data source to include when the table requests data.
pageCount
pageCount: number
Number of pages of features to be displayed in the table, based on the total number of features and configured pageSize.
pageIndex
pageIndex: number
Represents the index of the page of the feature currently being displayed.
- Attribute
- page-index
pageSize
pageSize: number
The default page size used when displaying features within the table.
- Attribute
- page-size
- Default value
- 50
paginationEnabled
paginationEnabled: boolean
Controls whether the table should only display a single page of features at any time.
- Attribute
- pagination-enabled
- Default value
- false
position
position: "bottom-leading" | "bottom-left" | "bottom-right" | "bottom-trailing" | "manual" | "top-leading" | "top-left" | "top-right" | "top-trailing"
- Attribute
- position
- Default value
- "manual"
referenceElement
referenceElement: ArcgisLinkChart | ArcgisMap | ArcgisScene | string
- Attribute
- reference-element
relatedRecordsEnabled
relatedRecordsEnabled: boolean
Indicates whether to display any related records associated with rows within the table.
- Attribute
- related-records-enabled
- Default value
- false
relatedTable
relatedTable: FeatureTable
Reference to a nested table instance representing a relationship with another table.
returnGeometryEnabled
returnGeometryEnabled: boolean
Indicates whether to fetch geometries for the corresponding features displayed in the table.
- Attribute
- return-geometry-enabled
- Default value
- false
returnMEnabled
returnMEnabled: boolean
Indicates whether geometries fetched for the corresponding features contain M values, if supported.
- Attribute
- return-m-enabled
- Default value
- false
returnZEnabled
returnZEnabled: boolean
Indicates whether the fetched features' geometries contain Z values.
- Attribute
- return-z-enabled
- Default value
- false
rowHighlightIds
rowHighlightIds: Collection<string | number>
This property accepts and returns a collection of feature object IDs.
showLayerDropdown
showLayerDropdown: boolean
Indicates whether to display the feature table's layer switch drop down menu.
- Attribute
- show-layer-dropdown
- Default value
- false
size
size: number
Total number of records currently displayed in the table.
- Default value
- 0
state
state: "disabled" | "error" | "loaded" | "loading" | "ready"
The state of the widget.
- Attribute
- state
- Default value
- "disabled"
tableController
tableController: FeatureTable
Reference to top-level controller table, if this table is a related table, nested within and controlled by another table.
tableDisabled
tableDisabled: boolean
Indicates whether the table is disabled.
- Attribute
- table-disabled
- Default value
- false
tableParent
tableParent: FeatureTable
Reference to a table instance that this table is directly related to.
tableTemplate
tableTemplate: TableTemplate
The associated template used for the feature table.
timeExtent
timeExtent: TimeExtent
The TimeExtent in which to filter and display data within the FeatureTable widget.
timeZone
timeZone: string
Dates and times displayed in the widget will be in terms of this time zone.
- Attribute
- time-zone
Methods
Method | Signature |
---|---|
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
componentOnReady(): Promise<void>
Create a promise that resolves once component is fully loaded.
- Returns
- Promise<void>
deleteSelection
deleteSelection(showWarningPrompt?: boolean): Promise<void>
Parameters
Parameter | Type | Optional? |
---|---|---|
showWarningPrompt | boolean | undefined |
- Returns
- Promise<void>
exportSelectionToCSV
exportSelectionToCSV(includeGeometry?: boolean): Promise<void>
Parameters
Parameter | Type | Optional? |
---|---|---|
includeGeometry | boolean | undefined |
- Returns
- Promise<void>
findColumn
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
goToPage(index: number): Promise<void>
Parameters
Parameter | Type | Optional? |
---|---|---|
index | number |
- Returns
- Promise<void>
hideColumn
hideColumn(fieldName: string): Promise<void>
Parameters
Parameter | Type | Optional? |
---|---|---|
fieldName | string |
- Returns
- Promise<void>
scrollToIndex
scrollToIndex(index: number): Promise<void>
Parameters
Parameter | Type | Optional? |
---|---|---|
index | number |
- Returns
- Promise<void>
scrollToRow
scrollToRow(objectId: number): Promise<void>
Parameters
Parameter | Type | Optional? |
---|---|---|
objectId | number |
- Returns
- Promise<void>
showColumn
showColumn(fieldName: string): Promise<void>
Parameters
Parameter | Type | Optional? |
---|---|---|
fieldName | string |
- Returns
- Promise<void>
sortColumn
sortColumn(path: string, direction: "asc" | "desc"): Promise<void>
Parameters
Parameter | Type | Optional? |
---|---|---|
path | string | |
direction | "asc" | "desc" |
- Returns
- Promise<void>
Events
Event | Type |
---|---|
FeatureTableCellClickEvent | |
FeatureTableCellKeydownEvent | |
FeatureTableCellPointeroutEvent | |
FeatureTableCellPointeroverEvent | |
FeatureTableColumnReorderEvent | |
{ name: "size" | "state" | "effectiveSize" | "isQueryingOrSyncing" | "layerView"; } | |
undefined | |
CollectionChangeEvent<string | number> |
arcgisCellPointerout
arcgisCellPointerout: FeatureTableCellPointeroutEvent
arcgisCellPointerover
arcgisCellPointerover: FeatureTableCellPointeroverEvent
arcgisColumnReorder
arcgisColumnReorder: FeatureTableColumnReorderEvent