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

Updated scrollable table demos

pull/973/head
Cagatay Civici 2021-02-10 16:54:15 +03:00
parent 560add9d67
commit 6bf28c0452
3 changed files with 1100 additions and 975 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1702
public/demo/data/customers-medium.json
View File

File diff suppressed because it is too large Load Diff

342
public/demo/data/customers-small.json
View File

@ -1,164 +1,184 @@
{
"data": [
{
"id": 1000,
"name": "James Butt",
"country": {
"name": "Algeria",
"code": "dz"
},
"company": "Benton, John B Jr",
"date": "2015-09-13",
"status": "unqualified",
"activity": 17,
"representative": {
"name": "Ioni Bowcher",
"image": "ionibowcher.png"
}
},
{
"id": 1001,
"name": "Josephine Darakjy",
"country": {
"name": "Egypt",
"code": "eg"
},
"company": "Chanay, Jeffrey A Esq",
"date": "2019-02-09",
"status": "proposal",
"activity": 0,
"representative": {
"name": "Amy Elsner",
"image": "amyelsner.png"
}
},
{
"id": 1002,
"name": "Art Venere",
"country": {
"name": "Panama",
"code": "pa"
},
"company": "Chemel, James L Cpa",
"date": "2017-05-13",
"status": "qualified",
"activity": 63,
"representative": {
"name": "Asiya Javayant",
"image": "asiyajavayant.png"
}
},
{
"id": 1003,
"name": "Lenna Paprocki",
"country": {
"name": "Slovenia",
"code": "si"
},
"company": "Feltz Printing Service",
"date": "2020-09-15",
"status": "new",
"activity": 37,
"representative": {
"name": "Xuxue Feng",
"image": "xuxuefeng.png"
}
},
{
"id": 1004,
"name": "Donette Foller",
"country": {
"name": "South Africa",
"code": "za"
},
"company": "Printing Dimensions",
"date": "2016-05-20",
"status": "proposal",
"activity": 33,
"representative": {
"name": "Asiya Javayant",
"image": "asiyajavayant.png"
}
},
{
"id": 1005,
"name": "Simona Morasca",
"country": {
"name": "Egypt",
"code": "eg"
},
"company": "Chapman, Ross E Esq",
"date": "2018-02-16",
"status": "qualified",
"activity": 68,
"representative": {
"name": "Ivan Magalhaes",
"image": "ivanmagalhaes.png"
}
},
{
"id": 1006,
"name": "Mitsue Tollner",
"country": {
"name": "Paraguay",
"code": "py"
},
"company": "Morlong Associates",
"date": "2018-02-19",
"status": "renewal",
"activity": 54,
"representative": {
"name": "Ivan Magalhaes",
"image": "ivanmagalhaes.png"
}
},
{
"id": 1007,
"name": "Leota Dilliard",
"country": {
"name": "Serbia",
"code": "rs"
},
"company": "Commercial Press",
"date": "2019-08-13",
"status": "renewal",
"activity": 69,
"representative": {
"name": "Onyama Limba",
"image": "onyamalimba.png"
}
},
{
"id": 1008,
"name": "Sage Wieser",
"country": {
"name": "Egypt",
"code": "eg"
},
"company": "Truhlar And Truhlar Attys",
"date": "2018-11-21",
"status": "unqualified",
"activity": 76,
"representative": {
"name": "Ivan Magalhaes",
"image": "ivanmagalhaes.png"
}
},
{
"id": 1009,
"name": "Kris Marrier",
"country": {
"name": "Mexico",
"code": "mx"
},
"company": "King, Christopher A Esq",
"date": "2015-07-07",
"status": "proposal",
"activity": 3,
"representative": {
"name": "Onyama Limba",
"image": "onyamalimba.png"
}
}
"data":[
{
"id":1000,
"name":"James Butt",
"country":{
"name":"Algeria",
"code":"dz"
},
"company":"Benton, John B Jr",
"date":"2015-09-13",
"status":"unqualified",
"verified":true,
"activity":17,
"representative":{
"name":"Ioni Bowcher",
"image":"ionibowcher.png"
},
"balance":70663
},
{
"id":1001,
"name":"Josephine Darakjy",
"country":{
"name":"Egypt",
"code":"eg"
},
"company":"Chanay, Jeffrey A Esq",
"date":"2019-02-09",
"status":"proposal",
"verified":true,
"activity":0,
"representative":{
"name":"Amy Elsner",
"image":"amyelsner.png"
},
"balance":82429
},
{
"id":1002,
"name":"Art Venere",
"country":{
"name":"Panama",
"code":"pa"
},
"company":"Chemel, James L Cpa",
"date":"2017-05-13",
"status":"qualified",
"verified":false,
"activity":63,
"representative":{
"name":"Asiya Javayant",
"image":"asiyajavayant.png"
},
"balance":28334
},
{
"id":1003,
"name":"Lenna Paprocki",
"country":{
"name":"Slovenia",
"code":"si"
},
"company":"Feltz Printing Service",
"date":"2020-09-15",
"status":"new",
"verified":false,
"activity":37,
"representative":{
"name":"Xuxue Feng",
"image":"xuxuefeng.png"
},
"balance":88521
},
{
"id":1004,
"name":"Donette Foller",
"country":{
"name":"South Africa",
"code":"za"
},
"company":"Printing Dimensions",
"date":"2016-05-20",
"status":"proposal",
"verified":true,
"activity":33,
"representative":{
"name":"Asiya Javayant",
"image":"asiyajavayant.png"
},
"balance":93905
},
{
"id":1005,
"name":"Simona Morasca",
"country":{
"name":"Egypt",
"code":"eg"
},
"company":"Chapman, Ross E Esq",
"date":"2018-02-16",
"status":"qualified",
"verified":false,
"activity":68,
"representative":{
"name":"Ivan Magalhaes",
"image":"ivanmagalhaes.png"
},
"balance":50041
},
{
"id":1006,
"name":"Mitsue Tollner",
"country":{
"name":"Paraguay",
"code":"py"
},
"company":"Morlong Associates",
"date":"2018-02-19",
"status":"renewal",
"verified":true,
"activity":54,
"representative":{
"name":"Ivan Magalhaes",
"image":"ivanmagalhaes.png"
},
"balance":58706
},
{
"id":1007,
"name":"Leota Dilliard",
"country":{
"name":"Serbia",
"code":"rs"
},
"company":"Commercial Press",
"date":"2019-08-13",
"status":"renewal",
"verified":true,
"activity":69,
"representative":{
"name":"Onyama Limba",
"image":"onyamalimba.png"
},
"balance":26640
},
{
"id":1008,
"name":"Sage Wieser",
"country":{
"name":"Egypt",
"code":"eg"
},
"company":"Truhlar And Truhlar Attys",
"date":"2018-11-21",
"status":"unqualified",
"verified":true,
"activity":76,
"representative":{
"name":"Ivan Magalhaes",
"image":"ivanmagalhaes.png"
},
"balance":65369
},
{
"id":1009,
"name":"Kris Marrier",
"country":{
"name":"Mexico",
"code":"mx"
},
"company":"King, Christopher A Esq",
"date":"2015-07-07",
"status":"proposal",
"verified":false,
"activity":3,
"representative":{
"name":"Onyama Limba",
"image":"onyamalimba.png"
},
"balance":63451
}
]
}

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

@ -10,7 +10,7 @@
<div class="content-section implementation">
<div class="card">
<h5>Vertical</h5>
<DataTable :value="customers" :scrollable="true" scrollHeight="400px" :loading="loading">
<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>
@ -27,7 +27,7 @@
</div>
<Dialog header="Flex Scroll" v-model:visible="dialogVisible" :style="{width: '75vw'}" :maximizable="true" :modal="true" :contentStyle="{height: '300px'}">
<DataTable :value="customers" :scrollable="true" scrollHeight="flex">
<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>
@ -40,7 +40,7 @@
<div class="card">
<h5>Horizontal and Vertical with Footer</h5>
<DataTable :value="customers" :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:'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>
@ -75,13 +75,11 @@
<div class="card">
<h5>Frozen Columns</h5>
<DataTable :value="customers" :scrollable="true" scrollHeight="400px" :loading="loading" scrollDirection="both">
<Column field="name" header="Name" :style="{width:'200px'}" frozen>
<template #body="slotProps">
<span class="p-text-bold">{{slotProps.data.name}}</span>
</template>
</Column>
<Column field="id" header="Id" :style="{width:'200px'}"></Column>
<ToggleButton v-model="idFrozen" onIcon="pi pi-lock" offIcon="pi pi-lock-open" onLabel="Unfreeze Id" offLabel="Freeze Id" style="width: 10rem" />
<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>
@ -154,12 +152,14 @@ import LiveEditor from '../liveeditor/LiveEditor';
export default {
data() {
return {
customers: null,
customers1: null,
customers2: null,
customersGrouped: null,
lockedCustomers: [],
unlockedCustomers: null,
loading: false,
dialogVisible: false
dialogVisible: false,
idFrozen: false
}
},
customerService: null,
@ -170,9 +170,10 @@ export default {
this.loading = true;
this.customerService.getCustomersLarge().then(data => {
this.customers = data;
this.customers1 = data;
this.loading = false;
});
this.customerService.getCustomersMedium().then(data => this.customers2 = data);
this.customerService.getCustomersMedium().then(data => this.unlockedCustomers = data);
this.customerService.getCustomersMedium().then(data => this.customersGrouped = data);
@ -243,4 +244,8 @@ export default {
::v-deep(.p-datatable-frozen-tbody) {
font-weight: bold;
}
::v-deep(.p-datatable-scrollable .p-frozen-column) {
font-weight: bold;
}
</style>