vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Updated docs of DataView

pull/12/head
cagataycivici 2019-05-24 12:29:52 +03:00
parent bd3bb4e35e
commit f66e2b45f4
3 changed files with 308 additions and 275 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/dataview/DataView.vue
View File

@ -15,8 +15,8 @@
<div class="p-dataview-content"> <div class="p-dataview-content">
<div class="p-grid"> <div class="p-grid">
<template v-for="(item,index) of items"> <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.list && layout === 'list'" name="list" :data="item" :index="index"></slot>
<slot v-if="$scopedSlots.gridItem && layout === 'grid'" name="gridItem" :data="item" :index="index"></slot> <slot v-if="$scopedSlots.grid && layout === 'grid'" name="grid" :data="item" :index="index"></slot>
</template> </template>
<div v-if="isEmpty" class="p-col-12">{{emptyMessage}}</div> <div v-if="isEmpty" class="p-col-12">{{emptyMessage}}</div>
</div> </div>
@ -98,6 +98,10 @@
sortOrder: { sortOrder: {
type: Number, type: Number,
default: null default: null
},
lazy: {
type: Boolean,
default: false
} }
}, },
data() { data() {

4
src/views/dataview/DataViewDemo.vue
View File

@ -20,7 +20,7 @@
</div> </div>
</div> </div>
</template> </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-col-12 car-details" style="padding: 2em; border-bottom: 1px solid #d9d9d9">
<div class="p-grid"> <div class="p-grid">
<div class="p-col-12 p-md-3"> <div class="p-col-12 p-md-3">
@ -43,7 +43,7 @@
</div> </div>
</div> </div>
</template> </template>
<template #gridItem="slotProps"> <template #grid="slotProps">
<div style="padding: .5em" class="p-col-12 p-md-3"> <div style="padding: .5em" class="p-col-12 p-md-3">
<Panel :header="slotProps.data.vin" style="text-align: center"> <Panel :header="slotProps.data.vin" style="text-align: center">
<img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/> <img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/>

571
src/views/dataview/DataViewDoc.vue
View File

@ -11,28 +11,30 @@ 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> <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"> <CodeHighlight lang="js">
<template v-pre> <template v-pre>
data() { export default {
return { data() {
cars: null, return {
} cars: null,
}, }
carService: null, },
created() { carService: null,
this.carService = new CarService(); created() {
}, this.carService = new CarService();
mounted() { },
this.carService.getCarsLarge().then(data => this.cars = data); mounted() {
this.carService.getCarsLarge().then(data => this.cars = data);
}
} }
</template> </template>
</CodeHighlight> </CodeHighlight>
<h3>Layouts</h3> <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 <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 "gridItem".</p> 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> <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> <CodeHighlight>
<template v-pre> <template v-pre>
&lt;template #listItem="slotProps" &gt; &lt;template #list="slotProps" &gt;
&lt;div class="p-col-12 car-details" style="padding: 2em; border-bottom: 1px solid #d9d9d9"&gt; &lt;div class="p-col-12 car-details" style="padding: 2em; border-bottom: 1px solid #d9d9d9"&gt;
&lt;div class="p-grid"&gt; &lt;div class="p-grid"&gt;
&lt;div class="p-col-12 p-md-3"&gt; &lt;div class="p-col-12 p-md-3"&gt;
@ -51,7 +53,7 @@ mounted() {
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;template #gridItem="slotProps"&gt; &lt;template #grid="slotProps"&gt;
&lt;div style="padding: .5em" class="p-col-12 p-md-3"&gt; &lt;div style="padding: .5em" class="p-col-12 p-md-3"&gt;
&lt;Panel :header="slotProps.data.vin" style="text-align: center"&gt; &lt;Panel :header="slotProps.data.vin" style="text-align: center"&gt;
&lt;img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/&gt; &lt;img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/&gt;
@ -65,9 +67,10 @@ mounted() {
</CodeHighlight> </CodeHighlight>
<h3>Sections</h3> <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> <CodeHighlight>
&lt;template #header&gt;List of Cars&lt;/template&gt; &lt;template #header&gt;Header Content&lt;/template&gt;
&lt;template #footer&gt;Footer Content&lt;/template&gt;
</CodeHighlight> </CodeHighlight>
<h3>DataViewLayoutOptions</h3> <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 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. you can create your own that updates the layout property of the DataView.
</p> </p>
<CodeHighlight>
&lt;template #header&gt;
&lt;DataViewLayoutOptions :layout="layout" @change="changeMode"&gt;&lt;/DataViewLayoutOptions&gt;
&lt;/template&gt;
&lt;template #footer&gt; <CodeHighlight>
&lt;DataViewLayoutOptions :layout="layout" @change="changeMode"&gt;&lt;/DataViewLayoutOptions&gt; <template v-pre>
&lt;/template&gt; &lt;DataView :value="cars" :layout="layout"&gt;
&lt;template #header&gt;
&lt;DataViewLayoutOptions v-model="layout"&gt;&lt;/DataViewLayoutOptions&gt;
&lt;/template&gt;
&lt;template #list="slotProps" &gt;
&lt;div&gt;Vin: &lt;b&gt;{{slotProps.data.vin}}&lt;/b&gt;&lt;/div&gt;
&lt;/template&gt;
&lt;template #grid="slotProps"&gt;
&lt;div&gt;Vin: &lt;b&gt;{{slotProps.data.vin}}&lt;/b&gt;&lt;/div&gt;
&lt;/template&gt;
&lt;/DataView&gt;
</template>
</CodeHighlight> </CodeHighlight>
<h3>Paginator</h3> <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 <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> <CodeHighlight>
<template v-pre> <template v-pre>
&lt;DataView :value="cars" :layout="layout" paginatorPosition='both' :paginator="true" :rows="20"&gt; &lt;DataView :value="cars" :layout="layout" paginatorPosition='both' :paginator="true" :rows="20"&gt;
@ -97,13 +107,10 @@ mounted() {
&lt;template #paginatorRight&gt; &lt;template #paginatorRight&gt;
&lt;Button type="button" icon="pi pi-search" /&gt; &lt;Button type="button" icon="pi pi-search" /&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;template #header&gt; &lt;template #list="slotProps" &gt;
List of Cars
&lt;/template&gt;
&lt;template #listItem="slotProps" &gt;
&lt;div&gt;Vin: &lt;b&gt;{{slotProps.data.vin}}&lt;/b&gt;&lt;/div&gt; &lt;div&gt;Vin: &lt;b&gt;{{slotProps.data.vin}}&lt;/b&gt;&lt;/div&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;template #gridItem="slotProps"&gt; &lt;template #grid="slotProps"&gt;
&lt;div&gt;Vin: &lt;b&gt;{{slotProps.data.vin}}&lt;/b&gt;&lt;/div&gt; &lt;div&gt;Vin: &lt;b&gt;{{slotProps.data.vin}}&lt;/b&gt;&lt;/div&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/DataView&gt; &lt;/DataView&gt;
@ -111,221 +118,247 @@ mounted() {
</CodeHighlight> </CodeHighlight>
<h3>Sorting</h3> <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> Here is an example that uses a dropdown where simply updating the sortField-sortOrder bindings of the DataView initiates sorting.</p>
<CodeHighlight> <CodeHighlight>
<template v-pre> <template v-pre>
&lt;DataView :value="cars" :layout="layout" :sortOrder="sortOrder" :sortField="sortField"&gt; &lt;DataView :value="cars" :layout="layout" :sortOrder="sortOrder" :sortField="sortField"&gt;
&lt;template #paginatorLeft&gt; &lt;template #header&gt;
&lt;Button type="button" icon="pi pi-refresh"/&gt; &lt;div class="p-grid p-nogutter"&gt;
&lt;/template&gt; &lt;div class="p-col-6" style="text-align: left"&gt;
&lt;template #paginatorRight&gt; &lt;Dropdown v-model="sortKey" :options="sortOptions" optionLabel="label" placeholder="Sort By" @change="onSortChange($event)"/&gt;
&lt;Button type="button" icon="pi pi-search" /&gt; &lt;/div&gt;
&lt;/template&gt; &lt;div class="p-col-6" style="text-align: right"&gt;
&lt;template #header&gt; &lt;DataViewLayoutOptions v-model="layout" /&gt;
List of Cars &lt;/div&gt;
&lt;/template&gt; &lt;/div&gt;
&lt;template #listItem="slotProps" &gt; &lt;/template&gt;
&lt;template #list="slotProps" &gt;
&lt;div&gt;Vin: &lt;b&gt;{{slotProps.data.vin}}&lt;/b&gt;&lt;/div&gt; &lt;div&gt;Vin: &lt;b&gt;{{slotProps.data.vin}}&lt;/b&gt;&lt;/div&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;template #gridItem="slotProps"&gt; &lt;template #grid="slotProps"&gt;
&lt;div&gt;Vin: &lt;b&gt;{{slotProps.data.vin}}&lt;/b&gt;&lt;/div&gt; &lt;div&gt;Vin: &lt;b&gt;{{slotProps.data.vin}}&lt;/b&gt;&lt;/div&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/DataView&gt; &lt;/DataView&gt;
</template> </template>
</CodeHighlight> </CodeHighlight>
<h3>Properties of DataViewLayoutOptions</h3> <CodeHighlight lang="js">
<div class="doc-tablewrapper"> <template v-pre>
<table class="doc-table"> export default {
<thead> data() {
<tr> return {
<th>Name</th> cars: null,
<th>Type</th> layout: 'list',
<th>Default</th> sortKey: null,
<th>Description</th> sortOrder: null,
</tr> sortField: null,
</thead> sortOptions: [
<tbody> {label: 'Newest First', value: '!year'},
<tr> {label: 'Oldest First', value: 'year'},
<td>layout</td> {label: 'Brand', value: 'brand'}
<td>string</td> ]
<td>list</td> }
<td>Layout of the items, valid values are "list" and "grid".</td> },
</tr> carService: null,
</tbody> created() {
</table> this.carService = new CarService();
</div> },
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> if (value.indexOf('!') === 0) {
<div class="doc-tablewrapper"> this.sortOrder = -1;
<table class="doc-table"> this.sortField = value.substring(1, value.length);
<thead> this.sortKey = sortValue;
<tr> }
<th>Name</th> else {
<th>Parameters</th> this.sortOrder = 1;
<th>Description</th> this.sortField = value;
</tr> this.sortKey = sortValue;
</thead> }
<tbody> }
<tr> }
<td>change</td> }
<td>event.originalEvent: browser event <br/> </template>
event.value = layout mode e.g. "list" or "grid" </CodeHighlight>
</td>
<td>Callback to invoke when layout mode is changed.</td>
</tr>
</tbody>
</table>
</div>
<h3>Properties</h3> <h3>Properties</h3>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Type</th> <th>Type</th>
<th>Default</th> <th>Default</th>
<th>Description</th> <th>Description</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>value</td> <td>value</td>
<td>array</td> <td>array</td>
<td>null</td> <td>null</td>
<td>An array of objects to display.</td> <td>An array of objects to display.</td>
</tr> </tr>
<tr> <tr>
<td>layout</td> <td>layout</td>
<td>string</td> <td>string</td>
<td>list</td> <td>list</td>
<td>Layout of the items, valid values are "list" and "grid".</td> <td>Layout of the items, valid values are "list" and "grid".</td>
</tr> </tr>
<tr> <tr>
<td>rows</td> <td>rows</td>
<td>number</td> <td>number</td>
<td>null</td> <td>0</td>
<td>Number of rows to display per page.</td> <td>Number of rows to display per page.</td>
</tr> </tr>
<tr> <tr>
<td>first</td> <td>first</td>
<td>number</td> <td>number</td>
<td>0</td> <td>0</td>
<td>Index of the first record to render.</td> <td>Index of the first record to render.</td>
</tr> </tr>
<tr> <tr>
<td>totalRecords</td> <td>totalRecords</td>
<td>number</td> <td>number</td>
<td>null</td> <td>null</td>
<td>Number of total records, defaults to length of value when not defined.</td> <td>Number of total records, defaults to length of value when not defined.</td>
</tr> </tr>
<tr> <tr>
<td>paginator</td> <td>paginator</td>
<td>boolean</td> <td>boolean</td>
<td>false</td> <td>false</td>
<td>When specified as true, enables the pagination.</td> <td>When specified as true, enables the pagination.</td>
</tr> </tr>
<tr> <tr>
<td>paginatorPosition</td> <td>paginatorPosition</td>
<td>string</td> <td>string</td>
<td>bottom</td> <td>bottom</td>
<td>Position of the paginator, options are "top","bottom" or "both".</td> <td>Position of the paginator, options are "top","bottom" or "both".</td>
</tr> </tr>
<tr> <tr>
<td>alwaysShowPaginator</td> <td>alwaysShowPaginator</td>
<td>boolean</td> <td>boolean</td>
<td>true</td> <td>true</td>
<td>Whether to show it even there is only one page.</td> <td>Whether to show it even there is only one page.</td>
</tr> </tr>
<tr> <tr>
<td>paginatorTemplate</td> <td>paginatorTemplate</td>
<td>string</td> <td>string</td>
<td>FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown</td> <td>FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown</td>
<td>Template of the paginator.</td> <td>Template of the paginator.</td>
</tr> </tr>
<tr> <tr>
<td>pageLinkSize</td> <td>pageLinkSize</td>
<td>number</td> <td>number</td>
<td>5</td> <td>5</td>
<td>Number of page links to display.</td> <td>Number of page links to display.</td>
</tr> </tr>
<tr> <tr>
<td>rowsPerPageOptions</td> <td>rowsPerPageOptions</td>
<td>array</td> <td>array</td>
<td>null</td> <td>null</td>
<td>Array of integer values to display inside rows per page dropdown.</td> <td>Array of integer values to display inside rows per page dropdown.</td>
</tr> </tr>
<tr> <tr>
<td>currentPageReportTemplate</td> <td>currentPageReportTemplate</td>
<td>string</td> <td>string</td>
<td>({currentPage} of {totalPages})</td> <td>({currentPage} of {totalPages})</td>
<td>Template of the current page report element.</td> <td>Template of the current page report element.</td>
</tr> </tr>
<tr> <tr>
<td>emptyMessage</td> <td>emptyMessage</td>
<td>string</td> <td>string</td>
<td>No records found.</td> <td>No records found.</td>
<td>Text to display when there is no data.</td> <td>Text to display when there is no data.</td>
</tr> </tr>
<tr> <tr>
<td>sortField</td> <td>sortField</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Name of the field to sort data by default.</td> <td>Name of the field to sort data by default.</td>
</tr> </tr>
<tr> <tr>
<td>sortOrder</td> <td>sortOrder</td>
<td>number</td> <td>number</td>
<td>null</td> <td>null</td>
<td>Order to sort the data by default.</td> <td>Order to sort the data by default.</td>
</tr> </tr>
<tr> <tr>
<td>lazy</td> <td>lazy</td>
<td>boolean</td> <td>boolean</td>
<td>false</td> <td>false</td>
<td>Defines if data is loaded and interacted with in lazy manner.</td> <td>Defines if data is loaded and interacted with in lazy manner.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </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> <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> <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"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Element</th> <th>Element</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>p-dataview</td> <td>p-dataview</td>
<td>Container element.</td> <td>Container element.</td>
</tr> </tr>
<tr> <tr>
<td>p-dataview-list</td> <td>p-dataview-list</td>
<td>Container element in list layout.</td> <td>Container element in list layout.</td>
</tr> </tr>
<tr> <tr>
<td>p-dataview-grid</td> <td>p-dataview-grid</td>
<td>Container element in grid layout.</td> <td>Container element in grid layout.</td>
</tr> </tr>
<tr> <tr>
<td>p-dataview-header</td> <td>p-dataview-header</td>
<td>Header section.</td> <td>Header section.</td>
</tr> </tr>
<tr> <tr>
<td>p-dataview-footer</td> <td>p-dataview-footer</td>
<td>Footer section.</td> <td>Footer section.</td>
</tr> </tr>
<tr> <tr>
<td>p-dataview-content</td> <td>p-dataview-content</td>
<td>Container of items.</td> <td>Container of items.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
@ -340,70 +373,67 @@ mounted() {
</a> </a>
<CodeHighlight> <CodeHighlight>
<template v-pre> <template v-pre>
&lt;template&gt; &lt;div&gt;
&lt;div&gt; &lt;div class="content-section introduction"&gt;
&lt;div class="content-section introduction"&gt; &lt;div class="feature-intro"&gt;
&lt;div class="feature-intro"&gt; &lt;h1&gt;DataView&lt;/h1&gt;
&lt;h1&gt;DataView&lt;/h1&gt; &lt;p&gt;DataView displays data in grid or list layout with pagination and sorting features.&lt;/p&gt;
&lt;p&gt;DataView displays data in grid or list layout with pagination and sorting features.&lt;/p&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt;
&lt;div class="content-section implementation dataview-demo"&gt; &lt;div class="content-section implementation dataview-demo"&gt;
&lt;h3 class="first"&gt;Default&lt;/h3&gt; &lt;h3 class="first"&gt;Default&lt;/h3&gt;
&lt;DataView :value="cars" :layout="layout" paginatorPosition='both' :paginator="true" :rows="20" :sortOrder="sortOrder" :sortField="sortField"&gt; &lt;DataView :value="cars" :layout="layout" paginatorPosition='both' :paginator="true" :rows="20" :sortOrder="sortOrder" :sortField="sortField"&gt;
&lt;template #header&gt; &lt;template #header&gt;
&lt;div class="p-grid p-nogutter"&gt; &lt;div class="p-grid p-nogutter"&gt;
&lt;div class="p-col-6" style="text-align: left"&gt; &lt;div class="p-col-6" style="text-align: left"&gt;
&lt;Dropdown v-model="sortKey" :options="sortOptions" optionLabel="label" placeholder="Sort By" @change="onSortChange($event)"/&gt; &lt;Dropdown v-model="sortKey" :options="sortOptions" optionLabel="label" placeholder="Sort By" @change="onSortChange($event)"/&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div class="p-col-6" style="text-align: right"&gt; &lt;div class="p-col-6" style="text-align: right"&gt;
&lt;DataViewLayoutOptions v-model="layout" /&gt; &lt;DataViewLayoutOptions v-model="layout" /&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;template #listItem="slotProps" &gt; &lt;template #list="slotProps" &gt;
&lt;div class="p-col-12 car-details" style="padding: 2em; border-bottom: 1px solid #d9d9d9"&gt; &lt;div class="p-col-12 car-details" style="padding: 2em; border-bottom: 1px solid #d9d9d9"&gt;
&lt;div class="p-grid"&gt; &lt;div class="p-grid"&gt;
&lt;div class="p-col-12 p-md-3"&gt; &lt;div class="p-col-12 p-md-3"&gt;
&lt;img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/&gt; &lt;img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div class="p-col-12 p-md-8 car-details"&gt; &lt;div class="p-col-12 p-md-8 car-details"&gt;
&lt;div class="p-grid"&gt; &lt;div class="p-grid"&gt;
&lt;div class="p-col-12"&gt;Vin: &lt;b&gt;{{slotProps.data.vin}}&lt;/b&gt;&lt;/div&gt; &lt;div class="p-col-12"&gt;Vin: &lt;b&gt;{{slotProps.data.vin}}&lt;/b&gt;&lt;/div&gt;
&lt;div class="p-col-12"&gt;Year: &lt;b&gt;{{slotProps.data.year}}&lt;/b&gt;&lt;/div&gt; &lt;div class="p-col-12"&gt;Year: &lt;b&gt;{{slotProps.data.year}}&lt;/b&gt;&lt;/div&gt;
&lt;div class="p-col-12"&gt;Brand: &lt;b&gt;{{slotProps.data.brand}}&lt;/b&gt;&lt;/div&gt; &lt;div class="p-col-12"&gt;Brand: &lt;b&gt;{{slotProps.data.brand}}&lt;/b&gt;&lt;/div&gt;
&lt;div class="p-col-12"&gt;Color: &lt;b&gt;{{slotProps.data.color}}&lt;/b&gt;&lt;/div&gt; &lt;div class="p-col-12"&gt;Color: &lt;b&gt;{{slotProps.data.color}}&lt;/b&gt;&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div class="p-col-12 p-md-1 search-icon" style="margin-top: 40px"&gt; &lt;div class="p-col-12 p-md-1 search-icon" style="margin-top: 40px"&gt;
&lt;Button icon="pi pi-search"&gt;&lt;/Button&gt; &lt;Button icon="pi pi-search"&gt;&lt;/Button&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;template #gridItem="slotProps"&gt; &lt;template #grid="slotProps"&gt;
&lt;div style="padding: .5em" class="p-col-12 p-md-3"&gt; &lt;div style="padding: .5em" class="p-col-12 p-md-3"&gt;
&lt;Panel :header="slotProps.data.vin" style="text-align: center"&gt; &lt;Panel :header="slotProps.data.vin" style="text-align: center"&gt;
&lt;img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/&gt; &lt;img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/&gt;
&lt;div class="car-detail"&gt;{{slotProps.data.year}} - {{slotProps.data.color}}&lt;/div&gt; &lt;div class="car-detail"&gt;{{slotProps.data.year}} - {{slotProps.data.color}}&lt;/div&gt;
&lt;hr class="ui-widget-content" style="border-top: 0" /&gt; &lt;hr class="ui-widget-content" style="border-top: 0" /&gt;
&lt;Button icon="pi pi-search"&gt;&lt;/Button&gt; &lt;Button icon="pi pi-search"&gt;&lt;/Button&gt;
&lt;/Panel&gt; &lt;/Panel&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/DataView&gt; &lt;/DataView&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/template&gt;
</template> </template>
</CodeHighlight> </CodeHighlight>
<CodeHighlight lang="javascript"> <CodeHighlight lang="javascript">
<script>
import CarService from '../../service/CarService'; import CarService from '../../service/CarService';
export default { export default {
@ -446,7 +476,6 @@ export default {
} }
} }
} }
</script>
</CodeHighlight> </CodeHighlight>
<CodeHighlight lang="css"> <CodeHighlight lang="css">