useDataView

Hook that manages layout state and provides a locale-aware sort utility for data presentation.

5 products · list view

Bamboo Watch

Accessories

$65

Black Watch

Accessories

$72

Blue Band

Fitness

$79

Blue T-Shirt

Clothing

$29

Gaming Set

Electronics

$299

basic-demo

Usage#

import { useDataView } from '@primereact/headless/dataview';
 
const { rootProps, contentProps, headerProps, footerProps, emptyProps, state, sort } = useDataView();
 
return (
    <div {...rootProps}>
        <div {...headerProps}></div>
        <div {...contentProps}></div>
        <div {...footerProps}></div>
    </div>
);

useDataView manages layout switching and provides a locale-aware sort utility — see Primitive for a component-based API.

Features#

Returns spread-ready prop objects for root, content, header, footer, and empty sections
Supports controlled (layout) and uncontrolled (defaultLayout) layout modes
Provides sort(data, field, order) method with locale-aware comparison
Reflects current layout in data-layout attribute on root

Behavior#

Default Layout#

The default layout is 'list'. Set defaultLayout to change the initial value.

const { state } = useDataView({ defaultLayout: 'grid' });
 
state.layout; // 'grid'

Controlled Layout#

Pass layout and onLayoutChange to control the layout externally.

const [layout, setLayout] = React.useState('list');
const { state } = useDataView({ layout, onLayoutChange: (e) => setLayout(e.value) });

Sorting#

Use the sort method to sort an array by field name and direction.

const { sort } = useDataView();
 
const sorted = sort(products, 'price', 1); // ascending
const reversed = sort(products, 'price', -1); // descending

Custom Styling with Data Attributes#

The prop objects include data-scope="dataview" and data-part for styling. The root also includes data-layout.

[data-scope='dataview'][data-part='root'] {
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
}
 
[data-scope='dataview'][data-layout='grid'] [data-part='content'] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

API#

useDataView#

Name	Type	Default
`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.

Accessibility#

See DataView Primitive for WAI-ARIA compliance details and keyboard support.