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

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

File diff suppressed because it is too large Load Diff

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

@ -1,164 +1,184 @@
{ {
"data": [ "data":[
{ {
"id": 1000, "id":1000,
"name": "James Butt", "name":"James Butt",
"country": { "country":{
"name": "Algeria", "name":"Algeria",
"code": "dz" "code":"dz"
}, },
"company": "Benton, John B Jr", "company":"Benton, John B Jr",
"date": "2015-09-13", "date":"2015-09-13",
"status": "unqualified", "status":"unqualified",
"activity": 17, "verified":true,
"representative": { "activity":17,
"name": "Ioni Bowcher", "representative":{
"image": "ionibowcher.png" "name":"Ioni Bowcher",
} "image":"ionibowcher.png"
},
"balance":70663
}, },
{ {
"id": 1001, "id":1001,
"name": "Josephine Darakjy", "name":"Josephine Darakjy",
"country": { "country":{
"name": "Egypt", "name":"Egypt",
"code": "eg" "code":"eg"
}, },
"company": "Chanay, Jeffrey A Esq", "company":"Chanay, Jeffrey A Esq",
"date": "2019-02-09", "date":"2019-02-09",
"status": "proposal", "status":"proposal",
"activity": 0, "verified":true,
"representative": { "activity":0,
"name": "Amy Elsner", "representative":{
"image": "amyelsner.png" "name":"Amy Elsner",
} "image":"amyelsner.png"
},
"balance":82429
}, },
{ {
"id": 1002, "id":1002,
"name": "Art Venere", "name":"Art Venere",
"country": { "country":{
"name": "Panama", "name":"Panama",
"code": "pa" "code":"pa"
}, },
"company": "Chemel, James L Cpa", "company":"Chemel, James L Cpa",
"date": "2017-05-13", "date":"2017-05-13",
"status": "qualified", "status":"qualified",
"activity": 63, "verified":false,
"representative": { "activity":63,
"name": "Asiya Javayant", "representative":{
"image": "asiyajavayant.png" "name":"Asiya Javayant",
} "image":"asiyajavayant.png"
},
"balance":28334
}, },
{ {
"id": 1003, "id":1003,
"name": "Lenna Paprocki", "name":"Lenna Paprocki",
"country": { "country":{
"name": "Slovenia", "name":"Slovenia",
"code": "si" "code":"si"
}, },
"company": "Feltz Printing Service", "company":"Feltz Printing Service",
"date": "2020-09-15", "date":"2020-09-15",
"status": "new", "status":"new",
"activity": 37, "verified":false,
"representative": { "activity":37,
"name": "Xuxue Feng", "representative":{
"image": "xuxuefeng.png" "name":"Xuxue Feng",
} "image":"xuxuefeng.png"
},
"balance":88521
}, },
{ {
"id": 1004, "id":1004,
"name": "Donette Foller", "name":"Donette Foller",
"country": { "country":{
"name": "South Africa", "name":"South Africa",
"code": "za" "code":"za"
}, },
"company": "Printing Dimensions", "company":"Printing Dimensions",
"date": "2016-05-20", "date":"2016-05-20",
"status": "proposal", "status":"proposal",
"activity": 33, "verified":true,
"representative": { "activity":33,
"name": "Asiya Javayant", "representative":{
"image": "asiyajavayant.png" "name":"Asiya Javayant",
} "image":"asiyajavayant.png"
},
"balance":93905
}, },
{ {
"id": 1005, "id":1005,
"name": "Simona Morasca", "name":"Simona Morasca",
"country": { "country":{
"name": "Egypt", "name":"Egypt",
"code": "eg" "code":"eg"
}, },
"company": "Chapman, Ross E Esq", "company":"Chapman, Ross E Esq",
"date": "2018-02-16", "date":"2018-02-16",
"status": "qualified", "status":"qualified",
"activity": 68, "verified":false,
"representative": { "activity":68,
"name": "Ivan Magalhaes", "representative":{
"image": "ivanmagalhaes.png" "name":"Ivan Magalhaes",
} "image":"ivanmagalhaes.png"
},
"balance":50041
}, },
{ {
"id": 1006, "id":1006,
"name": "Mitsue Tollner", "name":"Mitsue Tollner",
"country": { "country":{
"name": "Paraguay", "name":"Paraguay",
"code": "py" "code":"py"
}, },
"company": "Morlong Associates", "company":"Morlong Associates",
"date": "2018-02-19", "date":"2018-02-19",
"status": "renewal", "status":"renewal",
"activity": 54, "verified":true,
"representative": { "activity":54,
"name": "Ivan Magalhaes", "representative":{
"image": "ivanmagalhaes.png" "name":"Ivan Magalhaes",
} "image":"ivanmagalhaes.png"
},
"balance":58706
}, },
{ {
"id": 1007, "id":1007,
"name": "Leota Dilliard", "name":"Leota Dilliard",
"country": { "country":{
"name": "Serbia", "name":"Serbia",
"code": "rs" "code":"rs"
}, },
"company": "Commercial Press", "company":"Commercial Press",
"date": "2019-08-13", "date":"2019-08-13",
"status": "renewal", "status":"renewal",
"activity": 69, "verified":true,
"representative": { "activity":69,
"name": "Onyama Limba", "representative":{
"image": "onyamalimba.png" "name":"Onyama Limba",
} "image":"onyamalimba.png"
},
"balance":26640
}, },
{ {
"id": 1008, "id":1008,
"name": "Sage Wieser", "name":"Sage Wieser",
"country": { "country":{
"name": "Egypt", "name":"Egypt",
"code": "eg" "code":"eg"
}, },
"company": "Truhlar And Truhlar Attys", "company":"Truhlar And Truhlar Attys",
"date": "2018-11-21", "date":"2018-11-21",
"status": "unqualified", "status":"unqualified",
"activity": 76, "verified":true,
"representative": { "activity":76,
"name": "Ivan Magalhaes", "representative":{
"image": "ivanmagalhaes.png" "name":"Ivan Magalhaes",
} "image":"ivanmagalhaes.png"
},
"balance":65369
}, },
{ {
"id": 1009, "id":1009,
"name": "Kris Marrier", "name":"Kris Marrier",
"country": { "country":{
"name": "Mexico", "name":"Mexico",
"code": "mx" "code":"mx"
}, },
"company": "King, Christopher A Esq", "company":"King, Christopher A Esq",
"date": "2015-07-07", "date":"2015-07-07",
"status": "proposal", "status":"proposal",
"activity": 3, "verified":false,
"representative": { "activity":3,
"name": "Onyama Limba", "representative":{
"image": "onyamalimba.png" "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="content-section implementation">
<div class="card"> <div class="card">
<h5>Vertical</h5> <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="name" header="Name"></Column>
<Column field="country.name" header="Country"></Column> <Column field="country.name" header="Country"></Column>
<Column field="representative.name" header="Representative"></Column> <Column field="representative.name" header="Representative"></Column>
@ -27,7 +27,7 @@
</div> </div>
<Dialog header="Flex Scroll" v-model:visible="dialogVisible" :style="{width: '75vw'}" :maximizable="true" :modal="true" :contentStyle="{height: '300px'}"> <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="name" header="Name"></Column>
<Column field="country.name" header="Country"></Column> <Column field="country.name" header="Country"></Column>
<Column field="representative.name" header="Representative"></Column> <Column field="representative.name" header="Representative"></Column>
@ -40,7 +40,7 @@
<div class="card"> <div class="card">
<h5>Horizontal and Vertical with Footer</h5> <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="id" header="Id" footer="Id" :style="{width:'200px'}"></Column>
<Column field="name" header="Name" footer="Name" :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="country.name" header="Country" footer="Country" :style="{width:'200px'}"></Column>
@ -75,13 +75,11 @@
<div class="card"> <div class="card">
<h5>Frozen Columns</h5> <h5>Frozen Columns</h5>
<DataTable :value="customers" :scrollable="true" scrollHeight="400px" :loading="loading" scrollDirection="both"> <ToggleButton v-model="idFrozen" onIcon="pi pi-lock" offIcon="pi pi-lock-open" onLabel="Unfreeze Id" offLabel="Freeze Id" style="width: 10rem" />
<Column field="name" header="Name" :style="{width:'200px'}" frozen>
<template #body="slotProps"> <DataTable :value="customers2" :scrollable="true" scrollHeight="400px" :loading="loading" scrollDirection="both" class="p-mt-3">
<span class="p-text-bold">{{slotProps.data.name}}</span> <Column field="name" header="Name" :style="{width:'200px'}" frozen></Column>
</template> <Column field="id" header="Id" :style="{width:'100px'}" :frozen="idFrozen"></Column>
</Column>
<Column field="id" header="Id" :style="{width:'200px'}"></Column>
<Column field="name" header="Name" :style="{width:'200px'}"></Column> <Column field="name" header="Name" :style="{width:'200px'}"></Column>
<Column field="country.name" header="Country" :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="date" header="Date" :style="{width:'200px'}"></Column>
@ -154,12 +152,14 @@ import LiveEditor from '../liveeditor/LiveEditor';
export default { export default {
data() { data() {
return { return {
customers: null, customers1: null,
customers2: null,
customersGrouped: null, customersGrouped: null,
lockedCustomers: [], lockedCustomers: [],
unlockedCustomers: null, unlockedCustomers: null,
loading: false, loading: false,
dialogVisible: false dialogVisible: false,
idFrozen: false
} }
}, },
customerService: null, customerService: null,
@ -170,9 +170,10 @@ export default {
this.loading = true; this.loading = true;
this.customerService.getCustomersLarge().then(data => { this.customerService.getCustomersLarge().then(data => {
this.customers = data; this.customers1 = data;
this.loading = false; 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.unlockedCustomers = data);
this.customerService.getCustomersMedium().then(data => this.customersGrouped = data); this.customerService.getCustomersMedium().then(data => this.customersGrouped = data);
@ -243,4 +244,8 @@ export default {
::v-deep(.p-datatable-frozen-tbody) { ::v-deep(.p-datatable-frozen-tbody) {
font-weight: bold; font-weight: bold;
} }
::v-deep(.p-datatable-scrollable .p-frozen-column) {
font-weight: bold;
}
</style> </style>