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

Fine tuning for scrolling

pull/1047/head
Cagatay Civici 2021-02-26 14:37:43 +03:00
parent abc1297bf8
commit 6265c8a996
2 changed files with 97 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/views/datatable/DataTableDoc.vue
View File

@ -908,8 +908,13 @@ matchModes: [
</code></pre>
<h5>Column Widths of a Scrollable Table</h5>
<p>Scrollable table uses flex layout in vertical scrolling with auto size. As a result use flex property when giving
a width to a column. When horizontal scrolling is enabled, this is not a requirement as columns in horizontal scrolling do not have auto size.</p>
<p>Scrollable table uses flex layout so there are a couple of rules to consider when adjusting the widths of columns.</p>
<ul>
<li>Use min-width in vertical scrolling only so that when there is enough space columns may grow and for smaller screens a horizontal scrollbar is displayed to provide responsive design.</li>
<li>When horizontal scrolling is enabled, prefer width instead of min-width.
<li>In vertical scrolling only, use flex to disable grow and shrink while defining a initial width. When horizontal scrolling is enabled, this is not required as columns do not grow or shrink in horizontal scrolling.</li>
</ul>
<pre v-code><code><template v-pre>
&lt;Column field="vin" header="Vin" style="flex: 0 0 4rem"&gt;&lt;/Column&gt;
</template>
@ -949,7 +954,7 @@ matchModes: [
</code></pre>
<h6>Horizontal Scrolling</h6>
<p>For horizontal scrolling only, it is required to set <i>scrollDirection</i> to "horizontal" and give widths to columns.</p>
<p>For horizontal scrolling, it is required to set <i>scrollDirection</i> to "horizontal" and give fixed widths to columns.</p>
<pre v-code><code><template v-pre>
&lt;DataTable :value="customers" :scrollable="true" scrollDirection="horizontal"&gt;
&lt;Column field="id" header="Id" footer="Id" :style="{width:'200px'}"&gt;&lt;/Column&gt;
@ -966,7 +971,7 @@ matchModes: [
</code></pre>
<h6>Horizontal and Vertical Scrolling</h6>
<p>Set <i>scrollDirection</i> to "both" and give widths to columns to scroll both ways.</p>
<p>Set <i>scrollDirection</i> to "both" and give fixed widths to columns to scroll both ways.</p>
<pre v-code><code><template v-pre>
&lt;DataTable :value="customers" :scrollable="true" scrollHeight="400px" scrollDirection="both"&gt;
&lt;Column field="id" header="Id" footer="Id" :style="{width:'200px'}"&gt;&lt;/Column&gt;

176
src/views/datatable/DataTableScrollDemo.vue
View File

@ -11,10 +11,10 @@
<div class="card">
<h5>Vertical</h5>
<DataTable :value="customers1" :scrollable="true" scrollHeight="400px" :loading="loading">
<Column field="name" header="Name"></Column>
<Column field="country.name" header="Country"></Column>
<Column field="representative.name" header="Representative"></Column>
<Column field="status" header="Status"></Column>
<Column field="name" header="Name" style="min-width:200px"></Column>
<Column field="country.name" header="Country" style="min-width:200px"></Column>
<Column field="representative.name" header="Representative" style="min-width:200px"></Column>
<Column field="status" header="Status" style="min-width:200px"></Column>
</DataTable>
</div>
@ -28,10 +28,10 @@
<Dialog header="Flex Scroll" v-model:visible="dialogVisible" :style="{width: '75vw'}" :maximizable="true" :modal="true" :contentStyle="{height: '300px'}">
<DataTable :value="customers1" :scrollable="true" scrollHeight="flex">
<Column field="name" header="Name"></Column>
<Column field="country.name" header="Country"></Column>
<Column field="representative.name" header="Representative"></Column>
<Column field="status" header="Status"></Column>
<Column field="name" header="Name" style="min-width:200px"></Column>
<Column field="country.name" header="Country" style="min-width:200px"></Column>
<Column field="representative.name" header="Representative" style="min-width:200px"></Column>
<Column field="status" header="Status" style="min-width:200px"></Column>
</DataTable>
<template #footer>
<Button label="Ok" icon="pi pi-check" @click="closeDialog" />
@ -41,29 +41,29 @@
<div class="card">
<h5>Horizontal and Vertical with Footer</h5>
<DataTable :value="customers2" :scrollable="true" scrollHeight="400px" :loading="loading" scrollDirection="both">
<Column field="id" header="Id" footer="Id" :style="{width:'200px'}"></Column>
<Column field="name" header="Name" footer="Name" :style="{width:'200px'}"></Column>
<Column field="country.name" header="Country" footer="Country" :style="{width:'200px'}"></Column>
<Column field="date" header="Date" footer="Date" :style="{width:'200px'}"></Column>
<Column field="balance" header="Balance" footer="Balance" :style="{width:'200px'}">
<Column field="id" header="Id" footer="Id" style="width:100px"></Column>
<Column field="name" header="Name" footer="Name" style="width:200px"></Column>
<Column field="country.name" header="Country" footer="Country" style="width:200px"></Column>
<Column field="date" header="Date" footer="Date" style="width:200px"></Column>
<Column field="balance" header="Balance" footer="Balance" style="width:200px">
<template #body="{data}">
{{formatCurrency(data.balance)}}
</template>
</Column>
<Column field="company" header="Company" footer="Company" :style="{width:'200px'}"></Column>
<Column field="status" header="Status" footer="Status" :style="{width:'200px'}"></Column>
<Column field="activity" header="Activity" footer="Activity" :style="{width:'200px'}"></Column>
<Column field="representative.name" header="Representative" footer="Representative" :style="{width:'200px'}"></Column>
<Column field="company" header="Company" footer="Company" style="width:200px"></Column>
<Column field="status" header="Status" footer="Status" style="width:200px"></Column>
<Column field="activity" header="Activity" footer="Activity" style="width:200px"></Column>
<Column field="representative.name" header="Representative" footer="Representative" style="width:200px"></Column>
</DataTable>
</div>
<div class="card">
<h5>Frozen Rows</h5>
<DataTable :value="unlockedCustomers" :frozenValue="lockedCustomers" :scrollable="true" scrollHeight="400px" :loading="loading">
<Column field="name" header="Name"></Column>
<Column field="country.name" header="Country"></Column>
<Column field="representative.name" header="Representative"></Column>
<Column field="status" header="Status"></Column>
<Column field="name" header="Name" style="min-width:200px"></Column>
<Column field="country.name" header="Country" style="min-width:200px"></Column>
<Column field="representative.name" header="Representative" style="min-width:200px"></Column>
<Column field="status" header="Status" style="min-width:200px"></Column>
<Column style="flex: 0 0 4rem">
<template #body="{data,frozenRow,index}">
<Button type="button" :icon="frozenRow ? 'pi pi-lock-open' : 'pi pi-lock'" :disabled="frozenRow ? false : lockedCustomers.length >= 2"
@ -75,19 +75,19 @@
<div class="card">
<h5>Frozen Columns</h5>
<ToggleButton v-model="idFrozen" onIcon="pi pi-lock" offIcon="pi pi-lock-open" onLabel="Unfreeze Id" offLabel="Freeze Id" style="width: 10rem" />
<ToggleButton v-model="balanceFrozen" onIcon="pi pi-lock" offIcon="pi pi-lock-open" onLabel="Unfreeze Balance" offLabel="Freeze Balance" style="width: 12rem" />
<DataTable :value="customers2" :scrollable="true" scrollHeight="400px" :loading="loading" scrollDirection="both" class="p-mt-3">
<Column field="name" header="Name" :style="{width:'200px'}" frozen></Column>
<Column field="id" header="Id" :style="{width:'100px'}" :frozen="idFrozen"></Column>
<Column field="name" header="Name" :style="{width:'200px'}"></Column>
<Column field="country.name" header="Country" :style="{width:'200px'}"></Column>
<Column field="date" header="Date" :style="{width:'200px'}"></Column>
<Column field="company" header="Company" :style="{width:'200px'}"></Column>
<Column field="status" header="Status" :style="{width:'200px'}"></Column>
<Column field="activity" header="Activity" :style="{width:'200px'}"></Column>
<Column field="representative.name" header="Representative" :style="{width:'200px'}"></Column>
<Column field="balance" header="Balance" :style="{width:'200px'}" frozen alignFrozen="right">
<Column field="name" header="Name" style="width:160px" frozen></Column>
<Column field="id" header="Id" style="width:100px"></Column>
<Column field="name" header="Name" style="width:200px"></Column>
<Column field="country.name" header="Country" style="width:200px"></Column>
<Column field="date" header="Date" style="width:200px"></Column>
<Column field="company" header="Company" style="width:200px"></Column>
<Column field="status" header="Status" style="width:200px"></Column>
<Column field="activity" header="Activity" style="width:200px"></Column>
<Column field="representative.name" header="Representative" style="width:200px"></Column>
<Column field="balance" header="Balance" style="width:120px" alignFrozen="right" :frozen="balanceFrozen">
<template #body="{data}">
<span class="p-text-bold">{{formatCurrency(data.balance)}}</span>
</template>
@ -100,20 +100,20 @@
<DataTable :value="customersGrouped" rowGroupMode="subheader" groupRowsBy="representative.name"
sortMode="single" sortField="representative.name" :sortOrder="1" scrollable scrollHeight="400px">
<Column field="representative.name" header="Representative"></Column>
<Column field="name" header="Name"></Column>
<Column field="country" header="Country">
<Column field="name" header="Name" style="min-width:200px"></Column>
<Column field="country" header="Country" style="min-width:200px">
<template #body="slotProps">
<img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.data.country.code" width="30" />
<span class="image-text">{{slotProps.data.country.name}}</span>
</template>
</Column>
<Column field="company" header="Company"></Column>
<Column field="status" header="Status">
<Column field="company" header="Company" style="min-width:200px"></Column>
<Column field="status" header="Status" style="min-width:200px">
<template #body="slotProps">
<span :class="'customer-badge status-' + slotProps.data.status">{{slotProps.data.status}}</span>
</template>
</Column>
<Column field="date" header="Date"></Column>
<Column field="date" header="Date" style="min-width:200px"></Column>
<template #groupheader="slotProps">
<img :alt="slotProps.data.representative.name" :src="'demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" />
<span class="image-text">{{slotProps.data.representative.name}}</span>
@ -132,59 +132,59 @@
&lt;div class="card"&gt;
&lt;h5&gt;Vertical&lt;/h5&gt;
&lt;DataTable :value="customers1" :scrollable="true" scrollHeight="400px" :loading="loading"&gt;
&lt;Column field="name" header="Name"&gt;&lt;/Column&gt;
&lt;Column field="country.name" header="Country"&gt;&lt;/Column&gt;
&lt;Column field="representative.name" header="Representative"&gt;&lt;/Column&gt;
&lt;Column field="status" header="Status"&gt;&lt;/Column&gt;
&lt;Column field="name" header="Name" style="min-width:200px"&gt;&lt;/Column&gt;
&lt;Column field="country.name" header="Country" style="min-width:200px"&gt;&lt;/Column&gt;
&lt;Column field="representative.name" header="Representative" style="min-width:200px"&gt;&lt;/Column&gt;
&lt;Column field="status" header="Status" style="min-width:200px"&gt;&lt;/Column&gt;
&lt;/DataTable&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="card"&gt;
&lt;div class="card"&gt;
&lt;h5&gt;Flexible Scroll&lt;/h5&gt;
&lt;p&gt;Flex scroll feature makes the scrollable viewport section dynamic insteaf of a fixed value so that it can grow or shrink relative to the parent size of the table.
Click the button below to display a maximizable Dialog where data viewport adjusts itself according to the size changes.&lt;/p&gt;
&lt;Button label="Show" icon="pi pi-external-link" @click="openDialog" /&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;Dialog header="Flex Scroll" v-model:visible="dialogVisible" :style="{width: '75vw'}" :maximizable="true" :modal="true" :contentStyle="{height: '300px'}"&gt;
&lt;Dialog header="Flex Scroll" v-model:visible="dialogVisible" :style="{width: '75vw'}" :maximizable="true" :modal="true" :contentStyle="{height: '300px'}"&gt;
&lt;DataTable :value="customers1" :scrollable="true" scrollHeight="flex"&gt;
&lt;Column field="name" header="Name"&gt;&lt;/Column&gt;
&lt;Column field="country.name" header="Country"&gt;&lt;/Column&gt;
&lt;Column field="representative.name" header="Representative"&gt;&lt;/Column&gt;
&lt;Column field="status" header="Status"&gt;&lt;/Column&gt;
&lt;Column field="name" header="Name" style="min-width:200px"&gt;&lt;/Column&gt;
&lt;Column field="country.name" header="Country" style="min-width:200px"&gt;&lt;/Column&gt;
&lt;Column field="representative.name" header="Representative" style="min-width:200px"&gt;&lt;/Column&gt;
&lt;Column field="status" header="Status" style="min-width:200px"&gt;&lt;/Column&gt;
&lt;/DataTable&gt;
&lt;template #footer&gt;
&lt;Button label="Ok" icon="pi pi-check" @click="closeDialog" /&gt;
&lt;/template&gt;
&lt;/Dialog&gt;
&lt;/Dialog&gt;
&lt;div class="card"&gt;
&lt;div class="card"&gt;
&lt;h5&gt;Horizontal and Vertical with Footer&lt;/h5&gt;
&lt;DataTable :value="customers2" :scrollable="true" scrollHeight="400px" :loading="loading" scrollDirection="both"&gt;
&lt;Column field="id" header="Id" footer="Id" :style="{width:'200px'}"&gt;&lt;/Column&gt;
&lt;Column field="name" header="Name" footer="Name" :style="{width:'200px'}"&gt;&lt;/Column&gt;
&lt;Column field="country.name" header="Country" footer="Country" :style="{width:'200px'}"&gt;&lt;/Column&gt;
&lt;Column field="date" header="Date" footer="Date" :style="{width:'200px'}"&gt;&lt;/Column&gt;
&lt;Column field="balance" header="Balance" footer="Balance" :style="{width:'200px'}"&gt;
&lt;Column field="id" header="Id" footer="Id" style="width:100px"&gt;&lt;/Column&gt;
&lt;Column field="name" header="Name" footer="Name" style="width:200px"&gt;&lt;/Column&gt;
&lt;Column field="country.name" header="Country" footer="Country" style="width:200px"&gt;&lt;/Column&gt;
&lt;Column field="date" header="Date" footer="Date" style="width:200px"&gt;&lt;/Column&gt;
&lt;Column field="balance" header="Balance" footer="Balance" style="width:200px"&gt;
&lt;template #body="{data}"&gt;
{{formatCurrency(data.balance)}}
&lt;/template&gt;
&lt;/Column&gt;
&lt;Column field="company" header="Company" footer="Company" :style="{width:'200px'}"&gt;&lt;/Column&gt;
&lt;Column field="status" header="Status" footer="Status" :style="{width:'200px'}"&gt;&lt;/Column&gt;
&lt;Column field="activity" header="Activity" footer="Activity" :style="{width:'200px'}"&gt;&lt;/Column&gt;
&lt;Column field="representative.name" header="Representative" footer="Representative" :style="{width:'200px'}"&gt;&lt;/Column&gt;
&lt;Column field="company" header="Company" footer="Company" style="width:200px"&gt;&lt;/Column&gt;
&lt;Column field="status" header="Status" footer="Status" style="width:200px"&gt;&lt;/Column&gt;
&lt;Column field="activity" header="Activity" footer="Activity" style="width:200px"&gt;&lt;/Column&gt;
&lt;Column field="representative.name" header="Representative" footer="Representative" style="width:200px"&gt;&lt;/Column&gt;
&lt;/DataTable&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="card"&gt;
&lt;div class="card"&gt;
&lt;h5&gt;Frozen Rows&lt;/h5&gt;
&lt;DataTable :value="unlockedCustomers" :frozenValue="lockedCustomers" :scrollable="true" scrollHeight="400px" :loading="loading"&gt;
&lt;Column field="name" header="Name"&gt;&lt;/Column&gt;
&lt;Column field="country.name" header="Country"&gt;&lt;/Column&gt;
&lt;Column field="representative.name" header="Representative"&gt;&lt;/Column&gt;
&lt;Column field="status" header="Status"&gt;&lt;/Column&gt;
&lt;Column field="name" header="Name" style="min-width:200px"&gt;&lt;/Column&gt;
&lt;Column field="country.name" header="Country" style="min-width:200px"&gt;&lt;/Column&gt;
&lt;Column field="representative.name" header="Representative" style="min-width:200px"&gt;&lt;/Column&gt;
&lt;Column field="status" header="Status" style="min-width:200px"&gt;&lt;/Column&gt;
&lt;Column style="flex: 0 0 4rem"&gt;
&lt;template #body="{data,frozenRow,index}"&gt;
&lt;Button type="button" :icon="frozenRow ? 'pi pi-lock-open' : 'pi pi-lock'" :disabled="frozenRow ? false : lockedCustomers.length &gt;= 2"
@ -192,49 +192,49 @@
&lt;/template&gt;
&lt;/Column&gt;
&lt;/DataTable&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="card"&gt;
&lt;div class="card"&gt;
&lt;h5&gt;Frozen Columns&lt;/h5&gt;
&lt;ToggleButton v-model="idFrozen" onIcon="pi pi-lock" offIcon="pi pi-lock-open" onLabel="Unfreeze Id" offLabel="Freeze Id" style="width: 10rem" /&gt;
&lt;ToggleButton v-model="balanceFrozen" onIcon="pi pi-lock" offIcon="pi pi-lock-open" onLabel="Unfreeze Balance" offLabel="Freeze Balance" style="width: 12rem" /&gt;
&lt;DataTable :value="customers2" :scrollable="true" scrollHeight="400px" :loading="loading" scrollDirection="both" class="p-mt-3"&gt;
&lt;Column field="name" header="Name" :style="{width:'200px'}" frozen&gt;&lt;/Column&gt;
&lt;Column field="id" header="Id" :style="{width:'100px'}" :frozen="idFrozen"&gt;&lt;/Column&gt;
&lt;Column field="name" header="Name" :style="{width:'200px'}"&gt;&lt;/Column&gt;
&lt;Column field="country.name" header="Country" :style="{width:'200px'}"&gt;&lt;/Column&gt;
&lt;Column field="date" header="Date" :style="{width:'200px'}"&gt;&lt;/Column&gt;
&lt;Column field="company" header="Company" :style="{width:'200px'}"&gt;&lt;/Column&gt;
&lt;Column field="status" header="Status" :style="{width:'200px'}"&gt;&lt;/Column&gt;
&lt;Column field="activity" header="Activity" :style="{width:'200px'}"&gt;&lt;/Column&gt;
&lt;Column field="representative.name" header="Representative" :style="{width:'200px'}"&gt;&lt;/Column&gt;
&lt;Column field="balance" header="Balance" :style="{width:'200px'}" frozen alignFrozen="right"&gt;
&lt;Column field="name" header="Name" style="width:160px" frozen&gt;&lt;/Column&gt;
&lt;Column field="id" header="Id" style="width:100px"&gt;&lt;/Column&gt;
&lt;Column field="name" header="Name" style="width:200px"&gt;&lt;/Column&gt;
&lt;Column field="country.name" header="Country" style="width:200px"&gt;&lt;/Column&gt;
&lt;Column field="date" header="Date" style="width:200px"&gt;&lt;/Column&gt;
&lt;Column field="company" header="Company" style="width:200px"&gt;&lt;/Column&gt;
&lt;Column field="status" header="Status" style="width:200px"&gt;&lt;/Column&gt;
&lt;Column field="activity" header="Activity" style="width:200px"&gt;&lt;/Column&gt;
&lt;Column field="representative.name" header="Representative" style="width:200px"&gt;&lt;/Column&gt;
&lt;Column field="balance" header="Balance" style="width:120px" alignFrozen="right" :frozen="balanceFrozen"&gt;
&lt;template #body="{data}"&gt;
&lt;span class="p-text-bold"&gt;{{formatCurrency(data.balance)}}&lt;/span&gt;
&lt;/template&gt;
&lt;/Column&gt;
&lt;/DataTable&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="card"&gt;
&lt;div class="card"&gt;
&lt;h5&gt;Subheader Grouping&lt;/h5&gt;
&lt;DataTable :value="customersGrouped" rowGroupMode="subheader" groupRowsBy="representative.name"
sortMode="single" sortField="representative.name" :sortOrder="1" scrollable scrollHeight="400px"&gt;
&lt;Column field="representative.name" header="Representative"&gt;&lt;/Column&gt;
&lt;Column field="name" header="Name"&gt;&lt;/Column&gt;
&lt;Column field="country" header="Country"&gt;
&lt;Column field="name" header="Name" style="min-width:200px"&gt;&lt;/Column&gt;
&lt;Column field="country" header="Country" style="min-width:200px"&gt;
&lt;template #body="slotProps"&gt;
&lt;img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.data.country.code" width="30" /&gt;
&lt;span class="image-text"&gt;{{slotProps.data.country.name}}&lt;/span&gt;
&lt;/template&gt;
&lt;/Column&gt;
&lt;Column field="company" header="Company"&gt;&lt;/Column&gt;
&lt;Column field="status" header="Status"&gt;
&lt;Column field="company" header="Company" style="min-width:200px"&gt;&lt;/Column&gt;
&lt;Column field="status" header="Status" style="min-width:200px"&gt;
&lt;template #body="slotProps"&gt;
&lt;span :class="'customer-badge status-' + slotProps.data.status"&gt;{{slotProps.data.status}}&lt;/span&gt;
&lt;/template&gt;
&lt;/Column&gt;
&lt;Column field="date" header="Date"&gt;&lt;/Column&gt;
&lt;Column field="date" header="Date" style="min-width:200px"&gt;&lt;/Column&gt;
&lt;template #groupheader="slotProps"&gt;
&lt;img :alt="slotProps.data.representative.name" :src="'demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" /&gt;
&lt;span class="image-text"&gt;{{slotProps.data.representative.name}}&lt;/span&gt;
@ -243,7 +243,7 @@
&lt;td style="text-align: right" class="p-text-bold p-pr-6"&gt;Total Customers: {{calculateCustomerTotal(slotProps.data.representative.name)}}&lt;/td&gt;
&lt;/template&gt;
&lt;/DataTable&gt;
&lt;/div&gt;
&lt;/div&gt;
</template>
</code></pre>
@ -356,7 +356,7 @@ export default {
unlockedCustomers: null,
loading: false,
dialogVisible: false,
idFrozen: false
balanceFrozen: false
}
},
customerService: null,