DataViewは、ページネーションとソート機能を備えたグリッドまたはリストレイアウトでデータを表示します。
import { DataView, DataViewLayoutOptions } from 'primereact/dataview';
DataViewには、コンテンツを返すためにコレクション内のオブジェクトを受け取るlistTemplateとともに表示するvalueが必要です。
<DataView value={products} listTemplate={listTemplate} />
ページネーションは、paginatorおよびrowsプロパティで有効になります。ページネーターのカスタマイズの詳細については、Paginatorを参照してください。
<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()} />
データの読み込み中。ビジー状態を示すために、Skeletonコンポーネントを使用できます。
<DataView value={products} itemTemplate={itemTemplate} layout={layout} header={header()} />