arcgis-table-list

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.

Since

ArcGIS Maps SDK for JavaScript 4.33

Indicates whether a component is closed. When true, the component will be hidden.

Since

ArcGIS Maps SDK for JavaScript 4.29

Indicates whether the component is collapsed. When collapsed, only the collapse button and heading are displayed.

See also

• showCollapseButton

tableListElement.collapsed = true;

Since

ArcGIS Maps SDK for JavaScript 4.29

Indicates whether list items may be reordered within the list by dragging and dropping. Drag won't be enabled until the number of list items is equal to or greater than than the value set set in minDragEnabledItems.

See also

• minDragEnabledItems

tableListElement.dragEnabled = true;

Since

ArcGIS Maps SDK for JavaScript 4.29

Placeholder text used in the filter input if showFilter is true.

See also

• showFilter

tableListElement.filterPlaceholder = "Filter layers";

Since

ArcGIS Maps SDK for JavaScript 4.32

Specifies a function to handle filtering list items.

tableListElement.filterPredicate = (item) => item.title.toLowerCase().includes("streets");

Since

ArcGIS Maps SDK for JavaScript 4.29

The value of the filter input text string if showFilter is true.

See also

• showFilter

reactiveUtils.watch(
  () => tableListElement.filterText,
  (filterText) => console.log(filterText)
);

Since

ArcGIS Maps SDK for JavaScript 5.0

Indicates whether the status indicators will be displayed.

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

The component's default label.

Specifies a function that accesses each ListItem. Each list item can be modified according to its modifiable properties. Actions can be added to list items using the ListItem#actionsSections property of the ListItem.

tableListElement.listItemCreatedFunction = (event) => {
  const { item } = event;
  item.actionsSections = [
    [
      {
        title: "Open in feature table",
        icon: "table",
        id: "open-table"
      }
    ]
  ];
 }

Since

ArcGIS Maps SDK for JavaScript 4.34

A reference to a Map containing the tables. Set this property to access the underlying tables within the map.

See also

• Map#tables

• WebMap#tables

Since

ArcGIS Maps SDK for JavaScript 4.29

The minimum number of list items required to enable drag and drop reordering with dragEnabled.

See also

• dragEnabled

tableListElement.dragEnabled = true;
tableListElement.minDragEnabledItems = 5;

Since

ArcGIS Maps SDK for JavaScript 4.29

The minimum number of list items required to display the showFilter input box.

See also

• showFilter

tableListElement.showFilter = true;
tableListElement.minFilterItems = 5;

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

A collection of selected ListItems representing table list items selected by the user.

See also

• selectionMode

Since

ArcGIS Maps SDK for JavaScript 4.29

Specifies the selection mode. Selected items are available in the selectedItems property.

Value	Description
multiple	Allows any number of items to be selected at once. This is useful when you want to apply an operation to multiple items at the same time.
none	Disables selection. Use this when you want to prevent selecting items.
single	Allows only one item to be selected at a time. If another item is selected, the previous selection is cleared. This is useful when you want to ensure that a maximum of one item is selected at a time.
single-persist	Allows only one item to be selected at a time and prevents de-selection. Once an item is selected, it remains selected until another item is selected. This is useful when you want to ensure that there is always exactly one selected item.

See also

• selectedItems

tableListElement.selectionMode = "multiple";

Since

ArcGIS Maps SDK for JavaScript 5.0

Indicates whether to display a close button in the header.

Since

ArcGIS Maps SDK for JavaScript 5.0

Indicates whether to display a collapse button in the header.

Since

ArcGIS Maps SDK for JavaScript 5.0

Indicates whether to display layers with load errors.

Since

ArcGIS Maps SDK for JavaScript 5.0

Indicates whether to display a filter input box when then number of list items is equal to or greater than the value set in TableList#minFilterItems, allowing users to filter tables by their title.

Since

ArcGIS Maps SDK for JavaScript 5.0

Indicates whether to display the table list heading. The heading text is "Table List". The heading level can be set with the TableList#headingLevel.

Since

ArcGIS Maps SDK for JavaScript 5.0

Indicates whether temporary table indicators will be displayed for tables with Layer#persistenceEnabled set to false. A temporary icon will be displayed on the near side of the table title.

The current state of the component.

The collection of table ListItems displayed within the component.

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 arcgis-table-list component will be associated with a map or scene component rather than using the view property.

Creates a promise that resolves once the component is fully loaded.

const arcgisTableList = document.querySelector("arcgis-table-list");
document.body.append(arcgisTableList);
await arcgisTableList.componentOnReady();
console.log("arcgis-table-list is ready to go!");

Permanently destroy the component.