Updated docs of DataView
cagataycivici
parent
bd3bb4e35e
commit
f66e2b45f4
|
|
@ -15,8 +15,8 @@
|
|||
<div class="p-dataview-content">
|
||||
<div class="p-grid">
|
||||
<template v-for="(item,index) of items">
|
||||
<slot v-if="$scopedSlots.listItem && layout === 'list'" name="listItem" :data="item" :index="index"></slot>
|
||||
<slot v-if="$scopedSlots.gridItem && layout === 'grid'" name="gridItem" :data="item" :index="index"></slot>
|
||||
<slot v-if="$scopedSlots.list && layout === 'list'" name="list" :data="item" :index="index"></slot>
|
||||
<slot v-if="$scopedSlots.grid && layout === 'grid'" name="grid" :data="item" :index="index"></slot>
|
||||
</template>
|
||||
<div v-if="isEmpty" class="p-col-12">{{emptyMessage}}</div>
|
||||
</div>
|
||||
|
|
@ -98,6 +98,10 @@
|
|||
sortOrder: {
|
||||
type: Number,
|
||||
default: null
|
||||
},
|
||||
lazy: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #listItem="slotProps" >
|
||||
<template #list="slotProps" >
|
||||
<div class="p-col-12 car-details" style="padding: 2em; border-bottom: 1px solid #d9d9d9">
|
||||
<div class="p-grid">
|
||||
<div class="p-col-12 p-md-3">
|
||||
|
|
@ -43,7 +43,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #gridItem="slotProps">
|
||||
<template #grid="slotProps">
|
||||
<div style="padding: .5em" class="p-col-12 p-md-3">
|
||||
<Panel :header="slotProps.data.vin" style="text-align: center">
|
||||
<img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/>
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ import DataView from 'primevue/dataview';
|
|||
<p>DataView requires a collection of items as its value and one or more templates depending on the layout mode e.g. list and grid. Throughout the samples, a car interface having vin, brand, year and color properties are used to define an object to be displayed by the dataview. Cars are loaded by a CarService that connects to a server to fetch the cars.</p>
|
||||
<CodeHighlight lang="js">
|
||||
<template v-pre>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
cars: null,
|
||||
|
|
@ -23,16 +24,17 @@ created() {
|
|||
mounted() {
|
||||
this.carService.getCarsLarge().then(data => this.cars = data);
|
||||
}
|
||||
}
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
<h3>Layouts</h3>
|
||||
<p>DataView has two layout modes; "list" and "grid" where a separate template is used to render an item in each mode. In list mode name of the template is "listItem" whereas
|
||||
in grid mode it is "gridItem".</p>
|
||||
<p>DataView has two layout modes; <i>list</i> and <i>grid</i> where a separate template is used to render an item in each mode. In list mode name of the template is "list" whereas
|
||||
in grid mode it is "grid".</p>
|
||||
<p>Note that there is no restriction to use both layouts at the same time, you may configure only one layout using the layout property with the corresponding template.</p>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<template #listItem="slotProps" >
|
||||
<template #list="slotProps" >
|
||||
<div class="p-col-12 car-details" style="padding: 2em; border-bottom: 1px solid #d9d9d9">
|
||||
<div class="p-grid">
|
||||
<div class="p-col-12 p-md-3">
|
||||
|
|
@ -51,7 +53,7 @@ mounted() {
|
|||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #gridItem="slotProps">
|
||||
<template #grid="slotProps">
|
||||
<div style="padding: .5em" class="p-col-12 p-md-3">
|
||||
<Panel :header="slotProps.data.vin" style="text-align: center">
|
||||
<img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/>
|
||||
|
|
@ -65,9 +67,10 @@ mounted() {
|
|||
</CodeHighlight>
|
||||
|
||||
<h3>Sections</h3>
|
||||
<p>Header and Footer are the two sections that are capable of displaying custom content.</p>
|
||||
<p>Header and Footer are the two templates that are capable of displaying custom content.</p>
|
||||
<CodeHighlight>
|
||||
<template #header>List of Cars</template>
|
||||
<template #header>Header Content</template>
|
||||
<template #footer>Footer Content</template>
|
||||
</CodeHighlight>
|
||||
|
||||
<h3>DataViewLayoutOptions</h3>
|
||||
|
|
@ -75,19 +78,26 @@ mounted() {
|
|||
to display a buttonset to choose the layout mode in DataView. Location of the DataViewLayoutOptions should be inside the DataView component. If you prefer a different UI element
|
||||
you can create your own that updates the layout property of the DataView.
|
||||
</p>
|
||||
<CodeHighlight>
|
||||
<template #header>
|
||||
<DataViewLayoutOptions :layout="layout" @change="changeMode"></DataViewLayoutOptions>
|
||||
</template>
|
||||
|
||||
<template #footer>
|
||||
<DataViewLayoutOptions :layout="layout" @change="changeMode"></DataViewLayoutOptions>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<DataView :value="cars" :layout="layout">
|
||||
<template #header>
|
||||
<DataViewLayoutOptions v-model="layout"></DataViewLayoutOptions>
|
||||
</template>
|
||||
<template #list="slotProps" >
|
||||
<div>Vin: <b>{{slotProps.data.vin}}</b></div>
|
||||
</template>
|
||||
<template #grid="slotProps">
|
||||
<div>Vin: <b>{{slotProps.data.vin}}</b></div>
|
||||
</template>
|
||||
</DataView>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
<h3>Paginator</h3>
|
||||
<p>Pagination is enabled by setting paginator property to true, rows attribute defines the number of rows per page and pageLinks specify the the number
|
||||
of page links to display. To customize the left and right side of the paginators, use "paginatorLeft" and "paginatorRight" templates.</p>
|
||||
of page links to display. To customize the left and right side of the paginators, use <i>paginatorLeft</i> and <i>paginatorRight</i> templates.</p>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<DataView :value="cars" :layout="layout" paginatorPosition='both' :paginator="true" :rows="20">
|
||||
|
|
@ -97,13 +107,10 @@ mounted() {
|
|||
<template #paginatorRight>
|
||||
<Button type="button" icon="pi pi-search" />
|
||||
</template>
|
||||
<template #header>
|
||||
List of Cars
|
||||
</template>
|
||||
<template #listItem="slotProps" >
|
||||
<template #list="slotProps" >
|
||||
<div>Vin: <b>{{slotProps.data.vin}}</b></div>
|
||||
</template>
|
||||
<template #gridItem="slotProps">
|
||||
<template #grid="slotProps">
|
||||
<div>Vin: <b>{{slotProps.data.vin}}</b></div>
|
||||
</template>
|
||||
</DataView>
|
||||
|
|
@ -111,73 +118,75 @@ mounted() {
|
|||
</CodeHighlight>
|
||||
|
||||
<h3>Sorting</h3>
|
||||
<p>sortField and sortOrder properties are available for sorting functionality, for flexibility there is no built-in UI available so that a custom UI can be used for the sorting element.
|
||||
<p><i>sortField</i> and <i>sortOrder</i> properties are available for the sorting functionality, for flexibility there is no built-in UI available so that a custom UI can be used for the sorting element.
|
||||
Here is an example that uses a dropdown where simply updating the sortField-sortOrder bindings of the DataView initiates sorting.</p>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<DataView :value="cars" :layout="layout" :sortOrder="sortOrder" :sortField="sortField">
|
||||
<template #paginatorLeft>
|
||||
<Button type="button" icon="pi pi-refresh"/>
|
||||
</template>
|
||||
<template #paginatorRight>
|
||||
<Button type="button" icon="pi pi-search" />
|
||||
</template>
|
||||
<template #header>
|
||||
List of Cars
|
||||
<div class="p-grid p-nogutter">
|
||||
<div class="p-col-6" style="text-align: left">
|
||||
<Dropdown v-model="sortKey" :options="sortOptions" optionLabel="label" placeholder="Sort By" @change="onSortChange($event)"/>
|
||||
</div>
|
||||
<div class="p-col-6" style="text-align: right">
|
||||
<DataViewLayoutOptions v-model="layout" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #listItem="slotProps" >
|
||||
<template #list="slotProps" >
|
||||
<div>Vin: <b>{{slotProps.data.vin}}</b></div>
|
||||
</template>
|
||||
<template #gridItem="slotProps">
|
||||
<template #grid="slotProps">
|
||||
<div>Vin: <b>{{slotProps.data.vin}}</b></div>
|
||||
</template>
|
||||
</DataView>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
<h3>Properties of DataViewLayoutOptions</h3>
|
||||
<div class="doc-tablewrapper">
|
||||
<table class="doc-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Type</th>
|
||||
<th>Default</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>layout</td>
|
||||
<td>string</td>
|
||||
<td>list</td>
|
||||
<td>Layout of the items, valid values are "list" and "grid".</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<CodeHighlight lang="js">
|
||||
<template v-pre>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
cars: null,
|
||||
layout: 'list',
|
||||
sortKey: null,
|
||||
sortOrder: null,
|
||||
sortField: null,
|
||||
sortOptions: [
|
||||
{label: 'Newest First', value: '!year'},
|
||||
{label: 'Oldest First', value: 'year'},
|
||||
{label: 'Brand', value: 'brand'}
|
||||
]
|
||||
}
|
||||
},
|
||||
carService: null,
|
||||
created() {
|
||||
this.carService = new CarService();
|
||||
},
|
||||
mounted() {
|
||||
this.carService.getCarsLarge().then(data => this.cars = data);
|
||||
},
|
||||
methods: {
|
||||
onSortChange(event){
|
||||
const value = event.value.value;
|
||||
const sortValue = event.value;
|
||||
|
||||
<h3>Events of DataViewLayoutOptions</h3>
|
||||
<div class="doc-tablewrapper">
|
||||
<table class="doc-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Parameters</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>change</td>
|
||||
<td>event.originalEvent: browser event <br/>
|
||||
event.value = layout mode e.g. "list" or "grid"
|
||||
</td>
|
||||
<td>Callback to invoke when layout mode is changed.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
if (value.indexOf('!') === 0) {
|
||||
this.sortOrder = -1;
|
||||
this.sortField = value.substring(1, value.length);
|
||||
this.sortKey = sortValue;
|
||||
}
|
||||
else {
|
||||
this.sortOrder = 1;
|
||||
this.sortField = value;
|
||||
this.sortKey = sortValue;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
<h3>Properties</h3>
|
||||
<div class="doc-tablewrapper">
|
||||
|
|
@ -206,7 +215,7 @@ mounted() {
|
|||
<tr>
|
||||
<td>rows</td>
|
||||
<td>number</td>
|
||||
<td>null</td>
|
||||
<td>0</td>
|
||||
<td>Number of rows to display per page.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
|
|
@ -291,6 +300,30 @@ mounted() {
|
|||
</table>
|
||||
</div>
|
||||
|
||||
<h3>Events</h3>
|
||||
<div class="doc-tablewrapper">
|
||||
<table class="doc-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Parameters</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>page</td>
|
||||
<td>event.page: New page number <br/>
|
||||
event.first: Index of first record <br/>
|
||||
event.rows: Number of rows to display in new page <br/>
|
||||
event.pageCount: Total number of pages
|
||||
</td>
|
||||
<td>Callback to invoke when page changes, the event object contains information about the new state.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<h3>Styling</h3>
|
||||
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
|
||||
<div class="doc-tablewrapper">
|
||||
|
|
@ -340,7 +373,6 @@ mounted() {
|
|||
</a>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
|
|
@ -362,7 +394,7 @@ mounted() {
|
|||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #listItem="slotProps" >
|
||||
<template #list="slotProps" >
|
||||
<div class="p-col-12 car-details" style="padding: 2em; border-bottom: 1px solid #d9d9d9">
|
||||
<div class="p-grid">
|
||||
<div class="p-col-12 p-md-3">
|
||||
|
|
@ -385,7 +417,7 @@ mounted() {
|
|||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #gridItem="slotProps">
|
||||
<template #grid="slotProps">
|
||||
<div style="padding: .5em" class="p-col-12 p-md-3">
|
||||
<Panel :header="slotProps.data.vin" style="text-align: center">
|
||||
<img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/>
|
||||
|
|
@ -398,12 +430,10 @@ mounted() {
|
|||
</DataView>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
<CodeHighlight lang="javascript">
|
||||
<script>
|
||||
import CarService from '../../service/CarService';
|
||||
|
||||
export default {
|
||||
|
|
@ -446,7 +476,6 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</CodeHighlight>
|
||||
|
||||
<CodeHighlight lang="css">
|
||||
|
|
|
|||
Loading…
Reference in New Issue