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

Update DataTableScrollDemo.vue

pull/1544/head
mertsincan 2021-09-15 11:28:13 +03:00
parent 3151dd896c
commit 7806189b02
1 changed files with 65 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -42,19 +42,19 @@
<div class="card"> <div class="card">
<h5>Horizontal and Vertical with Footer</h5> <h5>Horizontal and Vertical with Footer</h5>
<DataTable :value="customers2" :scrollable="true" scrollHeight="400px" :loading="loading" scrollDirection="both"> <DataTable :value="customers2" :scrollable="true" scrollHeight="400px" :loading="loading" scrollDirection="both">
<Column field="id" header="Id" footer="Id" style="width:100px"></Column> <Column field="id" header="Id" footer="Id" style="flex-growl:1; flex-basis:100px"></Column>
<Column field="name" header="Name" footer="Name" style="width:200px"></Column> <Column field="name" header="Name" footer="Name" style="flex-growl:1; flex-basis:200px"></Column>
<Column field="country.name" header="Country" footer="Country" style="width:200px"></Column> <Column field="country.name" header="Country" footer="Country" style="flex-growl:1; flex-basis:200px"></Column>
<Column field="date" header="Date" footer="Date" style="width:200px"></Column> <Column field="date" header="Date" footer="Date" style="flex-growl:1; flex-basis:200px"></Column>
<Column field="balance" header="Balance" footer="Balance" style="width:200px"> <Column field="balance" header="Balance" footer="Balance" style="flex-growl:1; flex-basis:200px">
<template #body="{data}"> <template #body="{data}">
{{formatCurrency(data.balance)}} {{formatCurrency(data.balance)}}
</template> </template>
</Column> </Column>
<Column field="company" header="Company" footer="Company" style="width:200px"></Column> <Column field="company" header="Company" footer="Company" style="flex-growl:1; flex-basis:200px"></Column>
<Column field="status" header="Status" footer="Status" style="width:200px"></Column> <Column field="status" header="Status" footer="Status" style="flex-growl:1; flex-basis:200px"></Column>
<Column field="activity" header="Activity" footer="Activity" style="width:200px"></Column> <Column field="activity" header="Activity" footer="Activity" style="flex-growl:1; flex-basis:200px"></Column>
<Column field="representative.name" header="Representative" footer="Representative" style="width:200px"></Column> <Column field="representative.name" header="Representative" footer="Representative" style="flex-growl:1; flex-basis:200px"></Column>
</DataTable> </DataTable>
</div> </div>
@ -76,19 +76,19 @@
<div class="card"> <div class="card">
<h5>Frozen Columns</h5> <h5>Frozen Columns</h5>
<ToggleButton v-model="balanceFrozen" onIcon="pi pi-lock" offIcon="pi pi-lock-open" onLabel="Unfreeze Balance" offLabel="Freeze Balance" style="width: 12rem" /> <ToggleButton v-model="balanceFrozen" onIcon="pi pi-lock" offIcon="pi pi-lock-open" onLabel="Unfreeze Balance" offLabel="Freeze Balance" style="flex-growl:1; flex-basis: 12rem" />
<DataTable :value="customers2" :scrollable="true" scrollHeight="400px" :loading="loading" scrollDirection="both" class="p-mt-3"> <DataTable :value="customers2" :scrollable="true" scrollHeight="400px" :loading="loading" scrollDirection="both" class="p-mt-3">
<Column field="name" header="Name" style="width:160px" frozen></Column> <Column field="name" header="Name" style="flex-growl:1; flex-basis:160px" frozen></Column>
<Column field="id" header="Id" style="width:100px"></Column> <Column field="id" header="Id" style="flex-growl:1;flex-basis:100px"></Column>
<Column field="name" header="Name" style="width:200px"></Column> <Column field="name" header="Name" style="flex-growl:1; flex-basis:200px"></Column>
<Column field="country.name" header="Country" style="width:200px"></Column> <Column field="country.name" header="Country" style="flex-growl:1; flex-basis:200px"></Column>
<Column field="date" header="Date" style="width:200px"></Column> <Column field="date" header="Date" style="flex-growl:1; flex-basis:200px"></Column>
<Column field="company" header="Company" style="width:200px"></Column> <Column field="company" header="Company" style="flex-growl:1; flex-basis:200px"></Column>
<Column field="status" header="Status" style="width:200px"></Column> <Column field="status" header="Status" style="flex-growl:1; flex-basis:200px"></Column>
<Column field="activity" header="Activity" style="width:200px"></Column> <Column field="activity" header="Activity" style="flex-growl:1; flex-basis:200px"></Column>
<Column field="representative.name" header="Representative" style="width:200px"></Column> <Column field="representative.name" header="Representative" style="flex-growl:1; flex-basis:200px"></Column>
<Column field="balance" header="Balance" style="width:120px" alignFrozen="right" :frozen="balanceFrozen"> <Column field="balance" header="Balance" style="flex-growl:1; flex-basis:120px" alignFrozen="right" :frozen="balanceFrozen">
<template #body="{data}"> <template #body="{data}">
<span class="p-text-bold">{{formatCurrency(data.balance)}}</span> <span class="p-text-bold">{{formatCurrency(data.balance)}}</span>
</template> </template>
@ -180,19 +180,19 @@ export default {
<div class="card"> <div class="card">
<h5>Horizontal and Vertical with Footer</h5> <h5>Horizontal and Vertical with Footer</h5>
<DataTable :value="customers2" :scrollable="true" scrollHeight="400px" :loading="loading" scrollDirection="both"> <DataTable :value="customers2" :scrollable="true" scrollHeight="400px" :loading="loading" scrollDirection="both">
<Column field="id" header="Id" footer="Id" style="width:100px"></Column> <Column field="id" header="Id" footer="Id" style="flex-growl:1; flex-basis:100px"></Column>
<Column field="name" header="Name" footer="Name" style="width:200px"></Column> <Column field="name" header="Name" footer="Name" style="flex-growl:1; flex-basis:200px"></Column>
<Column field="country.name" header="Country" footer="Country" style="width:200px"></Column> <Column field="country.name" header="Country" footer="Country" style="flex-growl:1; flex-basis:200px"></Column>
<Column field="date" header="Date" footer="Date" style="width:200px"></Column> <Column field="date" header="Date" footer="Date" style="flex-growl:1; flex-basis:200px"></Column>
<Column field="balance" header="Balance" footer="Balance" style="width:200px"> <Column field="balance" header="Balance" footer="Balance" style="flex-growl:1; flex-basis:200px">
<template #body="{data}"> <template #body="{data}">
{{formatCurrency(data.balance)}} {{formatCurrency(data.balance)}}
</template> </template>
</Column> </Column>
<Column field="company" header="Company" footer="Company" style="width:200px"></Column> <Column field="company" header="Company" footer="Company" style="flex-growl:1; flex-basis:200px"></Column>
<Column field="status" header="Status" footer="Status" style="width:200px"></Column> <Column field="status" header="Status" footer="Status" style="flex-growl:1; flex-basis:200px"></Column>
<Column field="activity" header="Activity" footer="Activity" style="width:200px"></Column> <Column field="activity" header="Activity" footer="Activity" style="flex-growl:1; flex-basis:200px"></Column>
<Column field="representative.name" header="Representative" footer="Representative" style="width:200px"></Column> <Column field="representative.name" header="Representative" footer="Representative" style="flex-growl:1; flex-basis:200px"></Column>
</DataTable> </DataTable>
</div> </div>
@ -214,19 +214,19 @@ export default {
<div class="card"> <div class="card">
<h5>Frozen Columns</h5> <h5>Frozen Columns</h5>
<ToggleButton v-model="balanceFrozen" onIcon="pi pi-lock" offIcon="pi pi-lock-open" onLabel="Unfreeze Balance" offLabel="Freeze Balance" style="width: 12rem" /> <ToggleButton v-model="balanceFrozen" onIcon="pi pi-lock" offIcon="pi pi-lock-open" onLabel="Unfreeze Balance" offLabel="Freeze Balance" style="flex-growl:1; flex-basis: 12rem" />
<DataTable :value="customers2" :scrollable="true" scrollHeight="400px" :loading="loading" scrollDirection="both" class="p-mt-3"> <DataTable :value="customers2" :scrollable="true" scrollHeight="400px" :loading="loading" scrollDirection="both" class="p-mt-3">
<Column field="name" header="Name" style="width:160px" frozen></Column> <Column field="name" header="Name" style="flex-growl:1; flex-basis:160px" frozen></Column>
<Column field="id" header="Id" style="width:100px"></Column> <Column field="id" header="Id" style="flex-growl:1; flex-basis:100px"></Column>
<Column field="name" header="Name" style="width:200px"></Column> <Column field="name" header="Name" style="flex-growl:1; flex-basis:200px"></Column>
<Column field="country.name" header="Country" style="width:200px"></Column> <Column field="country.name" header="Country" style="flex-growl:1; flex-basis:200px"></Column>
<Column field="date" header="Date" style="width:200px"></Column> <Column field="date" header="Date" style="flex-growl:1; flex-basis:200px"></Column>
<Column field="company" header="Company" style="width:200px"></Column> <Column field="company" header="Company" style="flex-growl:1; flex-basis:200px"></Column>
<Column field="status" header="Status" style="width:200px"></Column> <Column field="status" header="Status" style="flex-growl:1; flex-basis:200px"></Column>
<Column field="activity" header="Activity" style="width:200px"></Column> <Column field="activity" header="Activity" style="flex-growl:1; flex-basis:200px"></Column>
<Column field="representative.name" header="Representative" style="width:200px"></Column> <Column field="representative.name" header="Representative" style="flex-growl:1; flex-basis:200px"></Column>
<Column field="balance" header="Balance" style="width:120px" alignFrozen="right" :frozen="balanceFrozen"> <Column field="balance" header="Balance" style="flex-growl:1; flex-basis:120px" alignFrozen="right" :frozen="balanceFrozen">
<template #body="{data}"> <template #body="{data}">
<span class="p-text-bold">{{formatCurrency(data.balance)}}</span> <span class="p-text-bold">{{formatCurrency(data.balance)}}</span>
</template> </template>
@ -364,7 +364,7 @@ export default {
::v-deep(.p-datatable-scrollable .p-frozen-column) { ::v-deep(.p-datatable-scrollable .p-frozen-column) {
font-weight: bold; font-weight: bold;
} }
</style> </style>
` `
}, },
'composition-api': { 'composition-api': {
@ -402,19 +402,19 @@ export default {
<div class="card"> <div class="card">
<h5>Horizontal and Vertical with Footer</h5> <h5>Horizontal and Vertical with Footer</h5>
<DataTable :value="customers2" :scrollable="true" scrollHeight="400px" :loading="loading" scrollDirection="both"> <DataTable :value="customers2" :scrollable="true" scrollHeight="400px" :loading="loading" scrollDirection="both">
<Column field="id" header="Id" footer="Id" style="width:100px"></Column> <Column field="id" header="Id" footer="Id" style="flex-growl:1; flex-basis:100px"></Column>
<Column field="name" header="Name" footer="Name" style="width:200px"></Column> <Column field="name" header="Name" footer="Name" style="flex-growl:1; flex-basis:200px"></Column>
<Column field="country.name" header="Country" footer="Country" style="width:200px"></Column> <Column field="country.name" header="Country" footer="Country" style="flex-growl:1; flex-basis:200px"></Column>
<Column field="date" header="Date" footer="Date" style="width:200px"></Column> <Column field="date" header="Date" footer="Date" style="flex-growl:1; flex-basis:200px"></Column>
<Column field="balance" header="Balance" footer="Balance" style="width:200px"> <Column field="balance" header="Balance" footer="Balance" style="flex-growl:1; flex-basis:200px">
<template #body="{data}"> <template #body="{data}">
{{formatCurrency(data.balance)}} {{formatCurrency(data.balance)}}
</template> </template>
</Column> </Column>
<Column field="company" header="Company" footer="Company" style="width:200px"></Column> <Column field="company" header="Company" footer="Company" style="flex-growl:1; flex-basis:200px"></Column>
<Column field="status" header="Status" footer="Status" style="width:200px"></Column> <Column field="status" header="Status" footer="Status" style="flex-growl:1; flex-basis:200px"></Column>
<Column field="activity" header="Activity" footer="Activity" style="width:200px"></Column> <Column field="activity" header="Activity" footer="Activity" style="flex-growl:1; flex-basis:200px"></Column>
<Column field="representative.name" header="Representative" footer="Representative" style="width:200px"></Column> <Column field="representative.name" header="Representative" footer="Representative" style="flex-growl:1; flex-basis:200px"></Column>
</DataTable> </DataTable>
</div> </div>
@ -436,19 +436,19 @@ export default {
<div class="card"> <div class="card">
<h5>Frozen Columns</h5> <h5>Frozen Columns</h5>
<ToggleButton v-model="balanceFrozen" onIcon="pi pi-lock" offIcon="pi pi-lock-open" onLabel="Unfreeze Balance" offLabel="Freeze Balance" style="width: 12rem" /> <ToggleButton v-model="balanceFrozen" onIcon="pi pi-lock" offIcon="pi pi-lock-open" onLabel="Unfreeze Balance" offLabel="Freeze Balance" style="flex-growl:1; flex-basis: 12rem" />
<DataTable :value="customers2" :scrollable="true" scrollHeight="400px" :loading="loading" scrollDirection="both" class="p-mt-3"> <DataTable :value="customers2" :scrollable="true" scrollHeight="400px" :loading="loading" scrollDirection="both" class="p-mt-3">
<Column field="name" header="Name" style="width:160px" frozen></Column> <Column field="name" header="Name" style="flex-growl:1; flex-basis:160px" frozen></Column>
<Column field="id" header="Id" style="width:100px"></Column> <Column field="id" header="Id" style="flex-growl:1; flex-basis:100px"></Column>
<Column field="name" header="Name" style="width:200px"></Column> <Column field="name" header="Name" style="flex-growl:1; flex-basis:200px"></Column>
<Column field="country.name" header="Country" style="width:200px"></Column> <Column field="country.name" header="Country" style="flex-growl:1; flex-basis:200px"></Column>
<Column field="date" header="Date" style="width:200px"></Column> <Column field="date" header="Date" style="flex-growl:1; flex-basis:200px"></Column>
<Column field="company" header="Company" style="width:200px"></Column> <Column field="company" header="Company" style="flex-growl:1; flex-basis:200px"></Column>
<Column field="status" header="Status" style="width:200px"></Column> <Column field="status" header="Status" style="flex-growl:1; flex-basis:200px"></Column>
<Column field="activity" header="Activity" style="width:200px"></Column> <Column field="activity" header="Activity" style="flex-growl:1; flex-basis:200px"></Column>
<Column field="representative.name" header="Representative" style="width:200px"></Column> <Column field="representative.name" header="Representative" style="flex-growl:1; flex-basis:200px"></Column>
<Column field="balance" header="Balance" style="width:120px" alignFrozen="right" :frozen="balanceFrozen"> <Column field="balance" header="Balance" style="flex-growl:1; flex-basis:120px" alignFrozen="right" :frozen="balanceFrozen">
<template #body="{data}"> <template #body="{data}">
<span class="p-text-bold">{{formatCurrency(data.balance)}}</span> <span class="p-text-bold">{{formatCurrency(data.balance)}}</span>
</template> </template>
@ -572,8 +572,8 @@ export default {
}); });
} }
return { customers1, customers2, customersGrouped, lockedCustomers, unlockedCustomers, return { customers1, customers2, customersGrouped, lockedCustomers, unlockedCustomers,
loading, dialogVisible, balanceFrozen, openDialog, closeDialog, formatCurrency, loading, dialogVisible, balanceFrozen, openDialog, closeDialog, formatCurrency,
calculateCustomerTotal, toggleLock } calculateCustomerTotal, toggleLock }
} }
} }
@ -587,7 +587,7 @@ export default {
::v-deep(.p-datatable-scrollable .p-frozen-column) { ::v-deep(.p-datatable-scrollable .p-frozen-column) {
font-weight: bold; font-weight: bold;
} }
</style> </style>
` `
} }
} }
@ -676,4 +676,4 @@ export default {
::v-deep(.p-datatable-scrollable .p-frozen-column) { ::v-deep(.p-datatable-scrollable .p-frozen-column) {
font-weight: bold; font-weight: bold;
} }
</style> </style>