DataView

DataView is a pattern used for rendering and controlling a set of data. It is deeply related to the Page pattern, acting as the view of the PageContent.

Import

import { DataView, DataViewControls, useDataViewState } from '@vtex/admin-ui'

Anatomy

DataView
|__ DataViewControls
|   |__ Search
|   |__ Toolbar
|   |   |__ Button
|   |__ Pagination
|   |__ (Other controls)
|
|__ (Data rendering section)

State

The useDataViewState handles the DataView behavior.

Loading...

Controls

The DataViewControls arranges all the components that control or changes the displayed data. These components can be buttons, search forms, pagination, menus, and so on.

Loading...

Rendering Data

The useDataViewState keeps track of ready, loading, empty, error, and not-found states. It also has default illustrations for empty, error, and not-found so that you only need to handle the ready and loading states.

Loading...

With Skeleton

Example of a skeleton collection.

Loading...

Types

DataView props

All props of JSX div element.

Name	Type	Description	Required	Default
state	DataViewState	DataView state	✅	-

DataViewControls props

All props of JSX div element.

useDataViewState params

The params configure the initial state. The default values represent the ready state.

Name	Type	Description	Required	Default
loading	boolean	Whether is loading	🚫	false
error	Object	Whether is error	🚫	null
empty	Object	Whether is empty	🚫	null
notFound	Object	Whether is not-found	🚫	null

useDataViewState return

Name	Type	Description
status	ready, loading, error, not-found, or empty	Current view status
statusObject	{ loading: boolean, empty: Object, notFound: Object, error: Object }	Detailed view status
setStatus	React.Dispatch<{type: status }>	Sets the view status