DataView

DataView displays data in grid or list layout with pagination and sorting features.

No available options
PREVIEW

DataView requires a value to display along with a list slot for item content.

No available options
basic-demo

Pagination is enabled with the paginator and rows properties. Refer to the Paginator for more information about customizing the paginator.

No available options
pagination-demo

Built-in sorting is controlled by bindings sortField and sortOrder properties from a custom UI.

No available options
sorting-demo

DataView supports list and grid display modes defined with the layout property. The grid mode is not built-in for flexibility purposes and requires a library with CSS grid features like Tailwind.

No available options
layout-demo

While data is being loaded, Skeleton component may be used to indicate the busy state.

No available options
loading-demo

Screen Reader

The container element that wraps the layout options buttons has a group role whereas each button element uses button role and aria-pressed is updated depending on selection state. Values to describe the buttons are derived from the aria.listView and aria.gridView properties of the locale API respectively.

Refer to paginator accessibility documentation for the paginator of the component.

Keyboard Support

KeyFunction
tabMoves focus to the buttons.
spaceToggles the checked state of a button.
Theme Designer