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

Add column widths

pull/1047/head
Cagatay Civici 2021-03-02 00:13:18 +03:00
parent 200c095944
commit a8972fa01b
2 changed files with 9 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/views/overlaypanel/OverlayPanelDemo.vue
View File

@ -13,13 +13,13 @@
<OverlayPanel ref="op" appendTo="body" :showCloseIcon="true" id="overlay_panel" style="width: 450px"> <OverlayPanel ref="op" appendTo="body" :showCloseIcon="true" id="overlay_panel" style="width: 450px">
<DataTable :value="products" v-model:selection="selectedProduct" selectionMode="single" :paginator="true" :rows="5" @row-select="onProductSelect" responsiveLayout="scroll"> <DataTable :value="products" v-model:selection="selectedProduct" selectionMode="single" :paginator="true" :rows="5" @row-select="onProductSelect" responsiveLayout="scroll">
<Column field="name" header="Name" sortable></Column> <Column field="name" header="Name" sortable style="width: 50%"></Column>
<Column header="Image"> <Column header="Image" style="width: 20%">
<template #body="slotProps"> <template #body="slotProps">
<img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image" class="product-image" /> <img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image" class="product-image" />
</template> </template>
</Column> </Column>
<Column field="price" header="Price" sortable> <Column field="price" header="Price" sortable style="width: 30%">
<template #body="slotProps"> <template #body="slotProps">
{{formatCurrency(slotProps.data.price)}} {{formatCurrency(slotProps.data.price)}}
</template> </template>

12
src/views/overlaypanel/OverlayPanelDoc.vue
View File

@ -162,13 +162,13 @@ toggle(event) {
&lt;OverlayPanel ref="op" appendTo="body" :showCloseIcon="true" id="overlay_panel" style="width: 450px"&gt; &lt;OverlayPanel ref="op" appendTo="body" :showCloseIcon="true" id="overlay_panel" style="width: 450px"&gt;
&lt;DataTable :value="products" v-model:selection="selectedProduct" selectionMode="single" :paginator="true" :rows="5" @row-select="onProductSelect" responsiveLayout="scroll"&gt; &lt;DataTable :value="products" v-model:selection="selectedProduct" selectionMode="single" :paginator="true" :rows="5" @row-select="onProductSelect" responsiveLayout="scroll"&gt;
&lt;Column field="name" header="Name" sortable&gt;&lt;/Column&gt; &lt;Column field="name" header="Name" sortable style="width: 50%"&gt;&lt;/Column&gt;
&lt;Column header="Image"&gt; &lt;Column header="Image" style="width: 20%"&gt;
&lt;template #body="slotProps"&gt; &lt;template #body="slotProps"&gt;
&lt;img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image" class="product-image" /&gt; &lt;img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image" class="product-image" /&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/Column&gt; &lt;/Column&gt;
&lt;Column field="price" header="Price" sortable&gt; &lt;Column field="price" header="Price" sortable style="width: 30%"&gt;
&lt;template #body="slotProps"&gt; &lt;template #body="slotProps"&gt;
{{formatCurrency(slotProps.data.price)}} {{formatCurrency(slotProps.data.price)}}
&lt;/template&gt; &lt;/template&gt;
@ -231,13 +231,13 @@ export default {
<OverlayPanel ref="op" appendTo="body" :showCloseIcon="true" id="overlay_panel" style="width: 450px"> <OverlayPanel ref="op" appendTo="body" :showCloseIcon="true" id="overlay_panel" style="width: 450px">
<DataTable :value="products" v-model:selection="selectedProduct" selectionMode="single" :paginator="true" :rows="5" @rowSelect="onProductSelect"> <DataTable :value="products" v-model:selection="selectedProduct" selectionMode="single" :paginator="true" :rows="5" @rowSelect="onProductSelect">
<Column field="name" header="Name" sortable></Column> <Column field="name" header="Name" sortable style="width: 50%"></Column>
<Column header="Image"> <Column header="Image"style="width: 20%">
<template #body="slotProps"> <template #body="slotProps">
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.data.image" class="product-image" /> <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.data.image" class="product-image" />
</template> </template>
</Column> </Column>
<Column field="price" header="Price" sortable> <Column field="price" header="Price" sortable style="width: 30%">
<template #body="slotProps"> <template #body="slotProps">
{{formatCurrency(slotProps.data.price)}} {{formatCurrency(slotProps.data.price)}}
</template> </template>