arcgis-table-list-next | References | ArcGIS Maps SDK for JavaScript

ESM

import "@arcgis/map-components/components/arcgis-table-list-next";

Inheritance: ArcgisTableListNext→HTMLElement

Since: ArcGIS Maps SDK for JavaScript 5.2

beta

The Table List (next) component is the successor to the Table List component, provided to you early for testing and feedback. In version 6.0, the implementation of arcgis-table-list will be updated under the hood to that of arcgis-table-list-next, and this component will be removed. To update at version 6.0, simply remove -next from the component name.

The Table List (next) component provides a way to display a list of tables associated with a map or table collection. It is the direct component migration of the TableList widget and is provided early for testing and feedback.

Demo

Properties

Property	Attribute	Type
autoDestroyDisabled	auto-destroy-disabled	boolean
closed	closed	boolean
collapsed reflected	collapsed	boolean
dragEnabled	drag-enabled	boolean
filterPlaceholder	filter-placeholder	string
filterPredicate		FilterPredicate \| undefined
filterText	filter-text	string
headingLevel	heading-level	HeadingLevel
hideNoFilterResultsNotice	hide-no-filter-results-notice	boolean
hideNoItemsNotice	hide-no-items-notice	boolean
hideStatusIndicators	hide-status-indicators	boolean
icon	icon	IconName
label	label	string \| undefined
listItemCreatedFunction		TableItemModifier \| undefined
listModeDisabled	list-mode-disabled	boolean
map		WebMap \| WebScene \| null \| undefined
messageOverrides		Record<string, unknown> \| undefined
minDragEnabledItems	min-drag-enabled-items	number
minFilterItems	min-filter-items	number
referenceElement	reference-element	ArcgisReferenceElement \| string \| undefined
selectedItems		Collection<TableItem>
selectionMode	selection-mode	List["selectionMode"]
showCloseButton	show-close-button	boolean
showCollapseButton	show-collapse-button	boolean
showErrors	show-errors	boolean
showFilter	show-filter	boolean
showHeading	show-heading	boolean
showTemporaryTableIndicators	show-temporary-table-indicators	boolean
state readonly		State
tableItems readonly		Collection<TableItem>
view		LinkChartView \| MapView \| SceneView \| undefined

autoDestroyDisabled

Property

Type: 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

Example

<arcgis-table-list-next auto-destroy-disabled></arcgis-table-list-next>

tableListNextElement.autoDestroyDisabled = true;

closed

Property

Type: boolean

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

Attribute: closed
Default value: false

Example

<arcgis-table-list-next closed></arcgis-table-list-next>

tableListNextElement.closed = true;

collapsed

reflected Property

Type: boolean

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

Attribute: collapsed
Default value: false

Example

<arcgis-table-list-next collapsed></arcgis-table-list-next>

tableListNextElement.collapsed = true;

dragEnabled

Property

Type: boolean

Indicates whether items may be reordered within the list by dragging and dropping. MapImageLayer MapImageLayer#sublayers can be reordered only within their parent MapImageLayer and can not be dragged out as a separate layer. Drag and drop won't be enabled until the number of list items is equal to or greater than than the value set set in minDragEnabledItems.

Attribute: drag-enabled
Default value: false

Example

<arcgis-table-list-next drag-enabled></arcgis-table-list-next>

tableListNextElement.dragEnabled = true;

filterPlaceholder

Property

Type: string

Placeholder text used in the filter input when filtering is enabled.

Attribute: filter-placeholder
Default value: ""

Example

<arcgis-table-list-next filter-placeholder="Search..."></arcgis-table-list-next>

tableListNextElement.filterPlaceholder = "Search...";

filterPredicate

Property

Type: FilterPredicate | undefined

Specifies a function to determine whether a list item should be included in filter results.

Example

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

filterText

Property

Type: string

The value of the filter input text string when filtering is enabled.

Attribute: filter-text
Default value: ""

Example

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

headingLevel

Property

Type: HeadingLevel

Indicates the heading level to use for the heading of the component. By default, the heading is rendered as a <h2>. Depending on the component's placement in your app, you may need to adjust this heading for proper semantics. This is important for meeting accessibility standards.

See also

HTML heading elements

Attribute: heading-level
Default value: 2

Example

<arcgis-table-list-next heading-level="2"></arcgis-table-list-next>

tableListNextElement.headingLevel = 2;

hideNoFilterResultsNotice

Property

Type: boolean

Indicates whether to hide the notice that appears when no results are found after filtering.

Attribute: hide-no-filter-results-notice
Default value: false

Example

<arcgis-table-list-next hide-no-filter-results-notice></arcgis-table-list-next>

tableListNextElement.hideNoFilterResultsNotice = true;

hideNoItemsNotice

Property

Type: boolean

Indicates whether to hide the notice that appears when there are no items to display.

Attribute: hide-no-items-notice
Default value: false

Example

<arcgis-table-list-next hide-no-items-notice></arcgis-table-list-next>

tableListNextElement.hideNoItemsNotice = true;

hideStatusIndicators

Property

Type: boolean

Indicates whether to hide status indicators in the component.

Attribute: hide-status-indicators
Default value: false

Example

<arcgis-table-list-next hide-status-indicators></arcgis-table-list-next>

tableListNextElement.hideStatusIndicators = true;

icon

Property

Type: IconName

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"

label

Property

Type: string | undefined

The component's default label.

Attribute: label

listItemCreatedFunction

Property

Type: TableItemModifier | undefined

A function that executes each time a list item is created. Use this function to configure the list item, including its title, actions, and panels.

Example

tableListNextElement.listItemCreatedFunction = async (event) => {
  // Destructure the item from the event object
  const {item} = event;

  // Wait for the layer to load and the item title to become available
  await item.layer.when();

  // If the item's title matches "US Demographics", customize the list item
  if (item.title === "US Demographics") {
    // open the list item in the LayerList component
    item.open = true;
    // change the title to something more descriptive
    item.title = "Population by county";
    // set an action for zooming to the full extent of the layer
    item.actionsSections = [[{
      title: "Go to full extent",
      icon: "zoom-out-fixed",
      id: "full-extent"
    }]];
  }
};

listModeDisabled

Property

Type: boolean

Specifies whether to ignore the listMode property to display all layers. A common use case for listModeDisabled is when you want to use the component to manage and configure a layer's listMode value.

See also

listMode

Attribute: list-mode-disabled
Default value: false

Example

<arcgis-table-list-next list-mode-disabled></arcgis-table-list-next>

tableListNextElement.listModeDisabled = true;

map

Property

Type: WebMap | WebScene | null | undefined

A reference to a map containing the tables.

messageOverrides

Property

Type: Record<string, unknown> | undefined

Replace localized message strings with your own strings.

Note: Individual message keys may change between releases.

minDragEnabledItems

Property

Type: number

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

Attribute: min-drag-enabled-items
Default value: 2

Example

<arcgis-table-list-next min-drag-enabled-items="5"></arcgis-table-list-next>

tableListNextElement.minDragEnabledItems = 5;

minFilterItems

Property

Type: number

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

Attribute: min-filter-items
Default value: 10

Example

<arcgis-table-list-next min-filter-items="3"></arcgis-table-list-next>

tableListNextElement.minFilterItems = 3;

referenceElement

Property

Type: ArcgisReferenceElement | string | undefined

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

selectedItems

Property

Type: Collection<TableItem>

A collection of selected items in the list. This collection is updated when the user changes selection and is only populated when selectionMode is not set to "none".

See also

selectionMode

Example

reactiveUtils.watch(
  () => tableListNext.selectedItems?.at(0)?.layer,
  (layer) => {
    layer && handleLayerSelection(layer);
  },
);

selectionMode

Property

Type: List["selectionMode"]

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

Attribute: selection-mode
Default value: "none"

Example

<arcgis-table-list-next selection-mode="multiple"></arcgis-table-list-next>

tableListNextElement.selectionMode = "multiple";

showCloseButton

Property

Type: boolean

This property provides the ability to show or hide the close button. When the close button is shown, the ESC key can be used to close the component via keyboard when the focus is within the component.

Attribute: show-close-button
Default value: false

Example

<arcgis-table-list-next show-close-button></arcgis-table-list-next>

tableListNextElement.showCloseButton = true;

showCollapseButton

Property

Type: boolean

This property provides the ability to show or hide the collapse button.

Attribute: show-collapse-button
Default value: false

Example

<arcgis-table-list-next show-collapse-button></arcgis-table-list-next>

tableListNextElement.showCollapseButton = true;

showErrors

Property

Type: boolean

This property provides the ability to show or hide layer error indicators.

Attribute: show-errors
Default value: false

Example

<arcgis-table-list-next show-errors></arcgis-table-list-next>

tableListNextElement.showErrors = true;

showFilter

Property

Type: boolean

This property provides the ability to show or hide the filter input box when then number of list items is equal to or greater than the value set in minFilterItems, allowing users to filter layers by their title.

Attribute: show-filter
Default value: false

Example

<arcgis-table-list-next show-filter></arcgis-table-list-next>

tableListNextElement.showFilter = true;

showHeading

Property

Type: boolean

This property provides the ability to show or hide the heading.

Attribute: show-heading
Default value: false

Example

<arcgis-table-list-next show-heading></arcgis-table-list-next>

tableListNextElement.showHeading = true;

showTemporaryTableIndicators

Property

Type: boolean

This property provides the ability to show or hide the temporary table indicators for tables with Layer#persistenceEnabled set to false. A temporary icon will be displayed on the near side of the table title.

Attribute: show-temporary-table-indicators
Default value: false

Example

<arcgis-table-list-next show-temporary-table-indicators></arcgis-table-list-next>

tableListNextElement.showTemporaryTableIndicators = true;

state

readonly Property

Type: State

The current state of the component.

tableItems

readonly Property

Type: Collection<TableItem>

The collection of table items displayed within the component.

Example

tableListElement.tableItems.forEach(item => console.log(item.title));

view

Property

Type: LinkChartView | MapView | SceneView | undefined

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

Methods

Method	Signature
componentOnReady inherited	componentOnReady(): Promise<this>
destroy	destroy(): Promise<void>

componentOnReady

inherited Method

Signature: componentOnReady (): Promise<this>

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

Returns: Promise<this>

Example

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

destroy

Method

Signature: destroy (): Promise<void>

Permanently destroy the component.

Returns: Promise<void>

Events

Name	Type
arcgisClose	CustomEvent<void>
arcgisFilterChange	CustomEvent<void>
arcgisPropertyChange	CustomEvent<{ name: "state"; }>
arcgisReady	CustomEvent<void>
arcgisSelectedItemsChange	CustomEvent<void>
arcgisTableItemsChanged	CustomEvent<void>
arcgisTriggerAction	CustomEvent<TableListTriggerActionEvent>

arcgisClose

Event

arcgisClose: CustomEvent<void>

Emitted when the component's close button is clicked.

arcgisFilterChange

Event

arcgisFilterChange: CustomEvent<void>

Emitted when the value of the filterText input changes.

arcgisPropertyChange

Event

arcgisPropertyChange: CustomEvent<{ name: "state"; }>

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 for user interaction.

arcgisSelectedItemsChange

Event

arcgisSelectedItemsChange: CustomEvent<void>

Emitted when the collection of selectedItems changes.

arcgisTableItemsChanged

Event

arcgisTableItemsChanged: CustomEvent<void>

Emitted when the collection of tableItems changes.

arcgisTriggerAction

Event

arcgisTriggerAction: CustomEvent<TableListTriggerActionEvent>

Emitted when an action is triggered on the component.