DataView

An unstyled data container component for building list and grid layouts with full control over presentation.

Build fully custom data presentation layouts with complete control over structure and styling.

Bamboo Watch

Accessories

$65

Black Watch

Accessories

$72

Blue Band

Fitness

$79

Blue T-Shirt

Clothing

$29

Gaming Set

Electronics

$299

basic-demo

Pre-styled Versions

Choose a pre-styled library to use DataView with ready-made designs.

Styled

Theme-based styling with CSS variables

Tailwind

Utility-first styling with Tailwind CSS

For hook-based usage without components, see the Headless API.

Features#

Compound component API with sub-components: Root, Header, Content, Footer, Empty
Layout state management with controlled and uncontrolled modes
Locale-aware sort utility for ordering data by field
Layout value reflected in data-layout attribute for CSS-driven layout switching

Usage#

import { DataView } from 'primereact/dataview';

<DataView.Root>
    <DataView.Header></DataView.Header>
    <DataView.Content></DataView.Content>
    <DataView.Footer></DataView.Footer>
    <DataView.Empty></DataView.Empty>
</DataView.Root>

Behavior#

Polymorphic Rendering#

Use as on any sub-component to change the rendered HTML element.

<DataView.Root as="section"></DataView.Root>
<DataView.Content as="ul"></DataView.Content>

Default elements: Root=div, Header=div, Content=div, Footer=div, Empty=div.

Render Function Children#

Root accepts a render function as children, providing access to the component instance.

<DataView.Root>{(instance) => <span>Layout: {instance.state.layout}</span>}</DataView.Root>

Pass Through#

Some parts may not be visible in the preview depending on the component's current state.

/* Select a part to see its CSS selector for custom styling */

API#

DataViewRoot#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: DataViewRootInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: DataViewRootInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`DataViewRootInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<DataViewRootPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: DataViewRootInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`layout`	`string`	—
The controlled layout value.
`defaultLayout`	`string`	—
The default layout value for uncontrolled mode.
`onLayoutChange`	`(event: useDataViewLayoutChangeEvent) => void`	—
Callback invoked when the layout changes.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"dataview"`
`data-part`	`"root"`
`data-layout`	Current layout value

Defines passthrough(pt) options of DataViewRoot component.

label	type	description
root	DataViewRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.

DataViewHeader#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: DataViewHeaderInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: DataViewHeaderInstance) => string)`	—
The class name to apply to the component.
`as`	`ReactNode`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`DataViewHeaderInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<DataViewHeaderPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: DataViewHeaderInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"dataview"`
`data-part`	`"header"`

Defines passthrough(pt) options of DataViewHeader component.

label	type	description
root	DataViewHeaderPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.

DataViewContent#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: DataViewContentInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: DataViewContentInstance) => string)`	—
The class name to apply to the component.
`as`	`ReactNode`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`DataViewContentInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<DataViewContentPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: DataViewContentInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"dataview"`
`data-part`	`"content"`

Defines passthrough(pt) options of DataViewContent component.

label	type	description
root	DataViewContentPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.

DataViewFooter#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: DataViewFooterInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: DataViewFooterInstance) => string)`	—
The class name to apply to the component.
`as`	`ReactNode`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`DataViewFooterInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<DataViewFooterPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: DataViewFooterInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"dataview"`
`data-part`	`"footer"`

Defines passthrough(pt) options of DataViewFooter component.

label	type	description
root	DataViewFooterPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.

DataViewEmpty#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: DataViewEmptyInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: DataViewEmptyInstance) => string)`	—
The class name to apply to the component.
`as`	`ReactNode`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`DataViewEmptyInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<DataViewEmptyPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: DataViewEmptyInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"dataview"`
`data-part`	`"empty"`

Defines passthrough(pt) options of DataViewEmpty component.

label	type	description
root	DataViewEmptyPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.

Accessibility#

DataView uses semantic div containers. Add role and aria-label attributes as needed for the specific data layout.

<DataView.Root aria-label="Product list">
    <DataView.Content role="list"></DataView.Content>
</DataView.Root>

Keyboard Support#

Not applicable. DataView is a presentational container — keyboard interaction depends on the content rendered inside.