This library is still in development and is available only for internal usage at VTEX.
Skip to main content

DataView

Version: 0.134.0

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.

Usage

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

function Example() {
const state = useDataViewState()

return (
<DataView state={state}>
<DataViewHeader>
<Flex>
<Search />
<DataViewActions>{actions}</DataViewActions>
</Flex>

{filters}
</DataViewHeader>

{content}
</DataView>
)
}

Initial State

The useDataViewState handles the DataView behavior.

Loading...

The DataViewHeader arranges all the components that control or changes the displayed data. These components can be buttons, search forms, pagination, menus, filters, 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.

NameTypeDescriptionRequiredDefault
stateDataViewStateDataView state-

DataViewHeader props

All props of JSX div element.

DataViewActions props

All props of JSX div element.

useDataViewState params

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

NameTypeDescriptionRequiredDefault
loadingbooleanWhether is loading🚫false
errorObjectWhether is error🚫null
emptyObjectWhether is empty🚫null
notFoundObjectWhether is not-found🚫null

useDataViewState return

NameTypeDescription
statusready, loading, error, not-found, or emptyCurrent view status
statusObject{ loading: boolean, empty: Object, notFound: Object, error: Object }Detailed view status
setStatusReact.Dispatch<{type: status }>Sets the view status