Known Limitations

The following image displays the standalone FeatureTable widget without any associated map.

The following image displays the FeatureTable widget with an associated map.

// Typical usage for the FeatureTable widget. This will recognize all fields in the layer if none are set.
const featureTable = new FeatureTable({
  view: view, // The view property must be set for the select/highlight to work
  layer: featureLayer,
  container: "tableDiv"
      
Use this read-only property if needing to query features while retaining a column's sort order. It returns an array of ColumnSortOrder. This contains a column's name and its sort direction. The sort priority is honored in the returned ColumnSortOrder if multiSortEnabled is true with a set initialSortPriority.
      
Indicates whether to display the Attachments field in the table. This is only
applicable if the feature layer supports attachments. Currently, this field only
displays the count of attachments per feature.
      
The ID or node representing the DOM element containing the widget.
This property can only be set once. The following examples are all valid use cases
when working with widgets.
    
// Create the HTML div element programmatically at runtime and set to the widget's container
const basemapGallery = new BasemapGallery({
  view: view,
  container: document.createElement("div")
// Add the widget to the top-right corner of the view
view.ui.add(basemapGallery, {
  position: "top-right"
    
// Specify an already-defined HTML div element in the widget's container
const basemapGallery = new BasemapGallery({
  view: view,
  container: basemapGalleryDiv
// Add the widget to the top-right corner of the view
view.ui.add(basemapGallery, {
  position: "top-right"
// HTML markup
  <div id="viewDiv"></div>
  <div id="basemapGalleryDiv"></div>
</body>
    
// Specify the widget while adding to the view's UI
const basemapGallery = new BasemapGallery({
  view: view
// Add the widget to the top-right corner of the view
view.ui.add(basemapGallery, {
  position: "top-right"
      
Indicates whether editing is enabled on the data within the feature table. Double-clicking in a cell will enable editing for that value.
Editing permissions can be broken down with the following levels of priority:
Field - This is derived
from the FeatureLayer. It takes what is set in the Field.editable property. This
must always be true for editing to be enabled. This can be overridden using a field column template.
Template - The editable permissions on a field can be configured by setting the
editable property of the FieldColumnTemplate.
FeatureTable - The editingEnabled
property must be set on the table in order for any type of editing to be enabled.
For example, if table editing is disabled on the widget, i.e. enableEditing is not set,
it is still possible to enable editing for a specific column by setting the
FieldColumnTemplate.editable property. Vice versa is also true, i.e. if table editing is enabled, a field configuration can be used to disable editing for a specific column.
    
If the service's field is not editable, it is not possible to override its permissions using any of the options above.
      
An array of individual field configuration objects. This is where you can specify what fields to
display and how you wish to display them.
When not set, all fields except for CreationDate, Creator, EditDate, Editor, and GlobalID
will be included. Otherwise, it is up to the developer to set the right field(s)
to override and display.
    
// Listen for when the view is stationary.
// If true, check the view's extent and set
// the table to display only the attributes
// for the features falling within this extent.
reactiveUtils.when( () => view.stationary === true,
() => {
  // Get the new extent of view/map whenever map is updated.
  if (view.extent) {
    // Filter out and show only the visible features in the feature table.
    featureTable.filterGeometry = view.extent;
}, { initial: true });
      
A collection of string field.names that are to remain hidden within the table. By default fields such as CreationDate, Creator, EditDate, Editor, and GlobalID do not show. If these fields are needed, set them via TableTemplate.columnTemplates. In this case, it is also required that the column template's visible property is set to true.
  layer: featureLayer,
  view: view,
  hiddenFields: ["Primary_Type", "incident_date"], // will not show these two fields within the table
  container: document.getElementById("tableDiv")
    
// Set this syntax if needing to display a default hidden field, e.g. 'CreationDate`
const featureTable = new FeatureTable({
  layer: featureLayer,
  view: view,
  tableTemplate: { // autocastable to TableTemplate
    customElements: [ // takes an array of FieldColumnTemplate and GroupColumnTemplate
    { //autocastable to FieldColumnTemplate
      type: "field",
      fieldName: "CreationDate",
      label: "Date created",
      visible: true
  container: document.getElementById("tableDiv")
      
This property accepts and returns a collection of feature ObjectId's. Use this to access and control which features are currently selected in the table and subsequently highlighted within the map. Once an application sets a collection of ObjectId's, the table will select the corresponding row and highlight its feature within the map.
    
// This example instantiates the table with highlighted features
const featureTable = new FeatureTable({
  view: view,
  layer: featureLayer,
  container: "tableDiv",
  highlightIds
// Push the object ids into a collection and select
featureTable.highlightIds.push(2, 3, 4);
// Listen for changes in the collection of highlighted features
featureTable.highlightIds.on("change", (event) => {
  console.log("features selected", event.added);
  console.log("features deselected", event.removed);
      
The unique ID assigned to the widget when the widget is created.
If not set by the developer, it will default to the container ID,
or if that is not present then it will be automatically generated.
      
The associated FeatureLayer, SceneLayer, GeoJSONLayer, CSVLayer, ImageryLayer, or WFSLayer containing the fields and
attributes to display within the widget.
The table's pagination defaults to 50 records at a time. If the layer contains less than 50 records, it will use whatever
count it has. Note that 0 records do not apply.
Support for GeoJSONLayer, CSVLayer, ImageryLayer, and WFSLayer was added at version 4.21.
For an ImageryLayer to work with FeatureTable, it must have a mosaic dataset. Currently, Map and FeatureTable interaction with ImageryLayers are not supported.
    
The menu's items are regenerated when a column's visibility changes. Use the FeatureTable's menuConfig and menuConfig.items to customize menu items. These options are recommended, rather than updating The table's items directly off of its menu. This helps ensure the menu always shows the correct items.
    
const featureTableVM = new FeatureTableViewModel({
  layer: featureLayer,
  multiSortEnabled: true,
  tableTemplate: { // autocasts to TableTemplate
    columnTemplates: [ // takes an array of FieldColumnTemplate and GroupColumnTemplate
    { // autocasts to FieldColumnTemplate
      type: "field",
      fieldName: "ObjectId",
      direction: "asc", // In order to use initialSortPriority, make sure direction is set
      initialSortPriority: 1, // This field's sort order takes second-highest priority.
      type: "field",
      fieldName: "Name",
      direction: "asc", // In order to use initialSortPriority, make sure direction is set
      initialSortPriority: 0, // This field's sort order takes the highest priority.
      type: "field",
      fieldName: "Status",
      direction: "asc", // In order to use initialSortPriority, make sure direction is set
      initialSortPriority: 2 // This field's sort order is prioritized after Name and ObjectId, respectively.
  container: "tableDiv"
      
The default page size used when displaying features within the table. By default, the page loads the first 50 features returned by the service.
    
It is not possible to overwrite the maximum page size on the server, ie. maxRecordCount, as this property only applies to set values less than the maximum page size, i.e. maxRecordCount, set on the service.
      
Indicates whether to fetch geometries for the corresponding features displayed in the table.
NOTE: Setting this to true can impact performance of the widget.
    
const tableTemplate = new TableTemplate({
  columnTemplates: [ // takes an array of FieldColumnTemplate and GroupColumnTemplate
  { // autocasts to FieldColumnTemplate
    type: "field",
    fieldName: "ObjectId",
    direction: "asc", // In order to use initialSortPriority, make sure direction is set
    initialSortPriority: 1 // This field's sort order takes the second-highest priority.
    type: "field",
    fieldName: "NAME",
    label: "Name",
    direction: "asc", // In order to use initialSortPriority, make sure direction is set
    initialSortPriority: 0 // This field's sort order takes the highest priority
     type: "field",
     fieldName: "STATUS",
     label: "Status",
     direction: "asc", // In order to use initialSortPriority, make sure direction is set
     initialSortPriority: 2 // This field's sort order is prioritized after Name and ObjectId, respectively.
      
Indicates whether the widget is visible.
If false, the widget will no longer be rendered in the web document. This may affect the layout of other elements or widgets in the document. For example, if this widget is the first of three widgets associated to the upper right hand corner of the view UI, then the other widgets will reposition when this widget is made invisible.
For more information, refer to the CSS display value of "none".
  menuItems: {
    clearSelection: true,
    deleteSelection: true, // Works if the layer supports deletion and editingEnabled property is true
    refreshData: true,
    toggleColumns: true,
    selectedRecordsShowAllToggle: true,
    selectedRecordsShowSelectedToggle: true,
    zoomToSelection: true
  selectionColumn: true,
  columnMenus: true
      
Adds one or more handles which are to be tied to the lifecycle of the object. The handles will
be removed when the object is destroyed.
// Manually manage handles
const handle = reactiveUtils.when(
  () => !view.updating,
  () => {
    wkidSelect.disabled = false;
  { once: true }
this.addHandles(handle);
// Destroy the object
this.destroy();
          
Key identifying the group to which the handles should be added. All the handles in the group
can later be removed with Accessor.removeHandles().
If no key is provided the handles are added to a default group.
  const dynamicIconClasses = {
    [CSS.myIcon]: this.showIcon,
    [CSS.greyIcon]: !this.showIcon
  return (
    <div class={classes(CSS.root, CSS.mixin, dynamicIconClasses)} />
          
FeatureTable.visibleElements.menuItems.selectedRecordsShowSelectedToggle
          
FeatureTable.visibleElements.menuItems.selectionColumn
          
Sample - FeatureTable using a map
    
// Remove a named group of handles if they exist.
if (obj.hasHandles("watch-view-updates")) {
  obj.removeHandles("watch-view-updates");
      
isFulfilled() may be used to verify if creating an instance of the class is fulfilled (either resolved or rejected).
If it is fulfilled, true will be returned.
    
view.on("click", function(event){
  // event is the event handle returned after the event fires.
  console.log(event.mapPoint);
      
Adds one or more handles which are to be tied to the lifecycle of the widget. The handles will
be removed when the widget is destroyed.
const handle = reactiveUtils.when(
  () => !view.updating,
  () => {
    wkidSelect.disabled = false;
  { once: true}
this.own(handle); // Handle gets removed when the widget is destroyed.
    
obj.removeHandles(); // removes handles from default group
obj.removeHandles("handle-group");
obj.removeHandles("other-handle-group");
      
when() may be leveraged once an instance of the class is created. This method takes two input parameters: a callback function and an errback function.
The callback executes when the instance of the class loads. The
errback executes if the instance of the class fails to load.
    
// Although this example uses the BasemapGallery widget, any class instance that is a promise may use when() in the same way
let bmGallery = new BasemapGallery();
bmGallery.when(function(){
  // This function will execute once the promise is resolved
}, function(error){
  // This function will execute if the promise is rejected due to an error
      
The configurable options to customize either the feature table or column menu via the menuConfig
item property.
        
(Currently not implemented). If
applicable, an array of related features associated with the
row (feature) added to the feature table selection.
        
If applicable,
an array of AttachmentInfo
associated with the row (feature) removed from the
feature table selection.
        
(Currently not implemented). If
applicable, an array of related features associated with the
row (feature) removed from the feature table selection.
    
// This function will fire each time a row (feature) is either added
// or removed from the feature table's selection
featureTable.on("selection-change", (event) => {
  let addedRows = event.added; // An array of features added to the selection
  let removedRows = event.removed;  // An array of features removed from the selection