数据视图

DataView 以网格或列表布局显示数据，并具有分页和排序功能。

导入#


import { DataView, DataViewLayoutOptions } from 'primereact/dataview';

基本用法#

DataView 需要一个 value 来显示，以及一个 listTemplate，它接收集合中的对象以返回内容。


<DataView value={products} listTemplate={listTemplate} />

分页#

通过 paginator 和 rows 属性启用分页。有关自定义分页器的更多信息，请参阅分页器。


<DataView value={products} itemTemplate={listTemplate} paginator rows={5} />

排序#

内置排序由自定义 UI 的 sortField 和 sortField 属性的绑定控制。


<DataView value={products} listTemplate={listTemplate} header={header()} sortField={sortField} sortOrder={sortOrder} />

布局#

DataView 支持使用 layout 属性定义的 list 和 grid 显示模式。辅助的 DataViewLayoutOptions 组件可用于在模式之间切换，但是此组件是可选的，您也可以使用自己的 UI 来切换模式。在 list 布局中，grid 布局还需要 PrimeFlex Grid 类来定义每个屏幕尺寸的网格显示方式。


<DataView value={products} itemTemplate={itemTemplate} layout={layout} header={header()} />

加载#

在加载数据时。可以使用骨架屏组件来指示繁忙状态。


<DataView value={products} itemTemplate={itemTemplate} layout={layout} header={header()} />

可访问性#

屏幕阅读器

包装布局选项按钮的容器元素具有 group 角色，而每个按钮元素使用 button 角色，并且 aria-pressed 会根据选择状态进行更新。用于描述按钮的值分别来自 locale API 的 aria.listView 和 aria.gridView 属性。

有关组件的分页器，请参阅分页器的可访问性文档。

键盘支持

按键	功能
tab	将焦点移动到按钮。
空格	切换按钮的选中状态。