Table

Table and related components Table Row, Table Header, and Table Cell provide a way to organize and present tabular data or content.

Overview

Table should be used to present tabular data, content, or information to a user.

Usage

  • Display tabular data to a user
  • Organize content by row and column

Sample

Best Practices

Table is an effective way of organizing complex data and content that may have many dimensions. For less complex displays of content collections that do not require row and column relationships, consider List.

Recommendations

It is important to slot Table Rows into the appropriate "table-header" or "table-footer" slot. Doing so ensures assistive technologies can accurately associate cells and their related context. While the "table-header" and "table-footer" slots are not required, Table Rows should be slotted appropriately when used.

Selection modes

Table offers "single" and "multiple" selectionMode values in addition to the default of "none". When enabled, Table displays the current number of selected Table Rows to a user, along with an affordance to clear their selection.

When selectionMode is not "none", the "selection-actions" slot will display alongside the provided selection interface. When used with pageSize, selected rows that are no longer in view will be indicated to a user.

Do use selectionMode when there are associated actions or workflows.
Do use selectionMode when displaying Table Rows that represent selectable entities a user may take action on.
Avoid using selectionMode when there are no associated user interactions.
Avoid using selectionMode with complex rowSpan and colSpan configurations.

Selection displays

When selectionMode is not "none", and selectionDisplay is "top" (the default configuration) - the Table component provides visual affordances for selection count and clearing selection to the user. When in this default display, the selection-actions slot can be useful to populate with related contextual actions.

There are times when this selectionDisplay and associated content slot may not be desirable; when applicable, the selectionDisplay property can be set to "none". This configuration can be useful where the selection count and clear selection affordances are not needed, such as when Tables contain a known and small number of rows, or when an interface should not allow a user to clear a selection. It can also facilitate the creation of alternative or unique selection interfaces for specific use cases.

Pagination

Enable pagination by providing a pageSize. When enabled, Table Rows slotted into the "table-header" or "table-footer" slot will remain visible to a user, while Table Rows slotted into the default slot are paginated.

When used with selectionMode other than "none", selected rows that are no longer in view will be indicated to a user.

Do use pageSize when there may be a large or overwhelming number of Table Rows.
Do use a pageSize of reasonable length.
Avoid using pageSize when there is an expectedly low number of Table Rows.
Avoid using an overly large pageSize value.
Note
The component offers an option for built-in pagination. However, at this time it does not provide lazy loading or virtualization. Calcite hopes to add more methods of providing data to the component in the future.

Accessibility

Keyboard navigation

KeyFunction
Arrow downNavigates to a calcite-table-cell or calcite-table-header in the next calcite-table-row.
Arrow upNavigates to a calcite-table-cell or calcite-table-header in the previous calcite-table-row.
Page UpNavigates to a calcite-table-cell or calcite-table-header in the first visible calcite-table-row.
Page DownNavigates to a calcite-table-cell or calcite-table-header in the last visible calcite-table-row.
HomeNavigates to the first calcite-table-cell or calcite-table-header in the current calcite-table-row.
EndNavigates to the last calcite-table-cell or calcite-table-header in the current calcite-table-row.
Control and HomeNavigates to the first calcite-table-cell or calcite-table-header in the first calcite-table-row.
Control and EndNavigates to the last calcite-table-cell or calcite-table-header in the last calcite-table-row.

API reference

Properties

PropertyAttributeDescriptionTypeDefault
borderedborderedWhen true, displays borders in the component.booleanfalse
captionrequiredcaptionSpecifies an accessible title for the component.string
groupSeparatorgroup-separatorWhen true, number values are displayed with a group separator corresponding to the language and country format.booleanfalse
interactionModeinteraction-modeWhen "interactive", allows focus and keyboard navigation of table-headers and table-cells. When "static", prevents focus and keyboard navigation of table-headers and table-cells when assistive technologies are not active. Selection affordances and slotted content within table-cells remain focusable."interactive" | "static""interactive"
layoutlayoutSpecifies the layout of the component."auto" | "fixed""auto"
messageOverridesUse this property to override individual strings used by the component.{ clear?: string; hiddenSelected?: string; page?: string; row?: string; selected?: string; }
numberednumberedWhen true, displays the position of the row in numeric form.booleanfalse
numberingSystemnumbering-systemSpecifies the Unicode numeral system used by the component for localization."arab" | "arabext" | "latn"
pageSizepage-sizeSpecifies the page size of the component. When true, renders calcite-pagination.number0
scalescaleSpecifies the size of the component."l" | "m" | "s""m"
selectedItemsread-onlySpecifies the component's selected items.Array<HTMLCalciteTableRowElement>
selectionDisplayselection-displaySpecifies the display of the selection interface when selection-mode is not "none". When "none", content slotted the selection-actions slot will not be displayed."none" | "top""top"
selectionModeselection-modeSpecifies the selection mode of the component, where: "multiple" allows any number of selections, "single" allows only one selection, and "none" does not allow any selections."multiple" | "none" | "single""none"
stripedstripedWhen true, displays striped styling in the component.booleanfalse

Slots

NameDescription
default (unnamed)A slot for adding calcite-table-row elements containing calcite-table-cell and/or calcite-table-header elements.
table-headerA slot for adding calcite-table-row elements containing calcite-table-header elements.
selection-actionsA slot for adding calcite-actions or other elements to display when selectionMode is not "none" and selectionDisplay is not "none".

Events

NameDescriptionBehavior
calciteTablePageChangeEmits when the component's page selection changes.bubblescomposed
calciteTableSelectEmits when the component's selected rows change.bubblescomposed

Methods

NameDescriptionSignature
componentOnReadyCreate a promise that resolves once component is fully loaded.componentOnReady(): Promise<void>

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.

You can no longer sign into this site. Go to your ArcGIS portal or the ArcGIS Location Platform dashboard to perform management tasks.

Your ArcGIS portal

Create, manage, and access API keys and OAuth 2.0 developer credentials, hosted layers, and data services.

Your ArcGIS Location Platform dashboard

Manage billing, monitor service usage, and access additional resources.

Learn more about these changes in the What's new in Esri Developers June 2024 blog post.

Close