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...

Header

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.

Name	Type	Description	Required	Default
state	DataViewState	DataView 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.

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