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.

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

Key	Function
`Arrow down`	Navigates to a `calcite-table-cell` or `calcite-table-header` in the next `calcite-table-row`.
`Arrow up`	Navigates to a `calcite-table-cell` or `calcite-table-header` in the previous `calcite-table-row`.
`Page Up`	Navigates to a `calcite-table-cell` or `calcite-table-header` in the first visible `calcite-table-row`.
`Page Down`	Navigates to a `calcite-table-cell` or `calcite-table-header` in the last visible `calcite-table-row`.
`Home`	Navigates to the first `calcite-table-cell` or `calcite-table-header` in the current `calcite-table-row`.
`End`	Navigates to the last `calcite-table-cell` or `calcite-table-header` in the current `calcite-table-row`.
`Control` and `Home`	Navigates to the first `calcite-table-cell` or `calcite-table-header` in the first `calcite-table-row`.
`Control` and `End`	Navigates to the last `calcite-table-cell` or `calcite-table-header` in the last `calcite-table-row`.

Calcite Design SystemComponents

Table

Was this page helpful?

Calcite Design SystemComponents

Table

Overview

Usage

Sample

Best Practices

Recommendations

Selection modes

Pagination

Accessibility

Keyboard navigation

API reference

Properties

Slots

Events

Was this page helpful?