P
CUI v1.20.1177
Documentation and examples in using Complex Table with PCUI
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons" rel="stylesheet" />
<link href="~/PCUIAssets/Vue/Plugins/vuetify.min.css" rel="stylesheet" />
<link href="~/PCUIAssets/PCUI/Components/StandardView/css/StandardView.min.css" rel="stylesheet" />
<link href="~/PCUIAssets/PCUI/Elements/LoadingBars/css/LoadingBars.min.css" rel="stylesheet" />
<link href="~/PCUIAssets/PCUI/Components/Tables/css/Tables.min.css" rel="stylesheet" />
<script src="~/PCUIAssets/PCUI/Components/Tables/Plugins/BabelPolyfill.min.js"></script>
<script src="~/PCUIAssets/Vue/Plugins/vuetify.min.js"></script>
<script src="~/PCUIAssets/PCUI/Components/StandardView/js/StandardView.js"><script>
<script src="~/PCUIAssets/PCUI/Elements/LoadingBars/js/LoadingBars.js"></script>
<script src="~/PCUIAssets/PCUI/Components/Tables/js/ComplexTable.js"></script>
<div class="pcui">
<div id="default-complex-table">
<div class="sample-table-container">
<pcui_complex_table v-bind:headers="headers"
v-bind:rows="rows">
</pcui_complex_table>
</div>
</div>
</div>
.sample-table-container {
height: 470px;
border: 1px solid #eeeeee;
}
new Vue({
el: '#default-complex-table',
data: {
headers: [
{
text: 'Job',
value: 'job',
width: '100px'
},
{
text: 'Status',
value: 'status'
},
{
text: 'Job location',
value: 'jobLocation'
},
{
text: 'Job start',
value: 'jobStart'
},
{
text: 'Action',
value: 'action',
width: '120px'
}
],
rows: [
{
job: {
type: 'text',
text: 'Job One'
},
action: {
type: 'text',
text: 'Default'
},
status: {
type: 'text',
text: '30 / 100 complete'
},
jobStart: {
type: 'date',
text: '2019-12-12 18:09:00',
dateText: '12 Dec 2019, 6:09 PM'
},
jobLocation: {
type: 'text',
text: 'Locked'
},
identifier: '1'
},
{
job: {
type: 'text',
text: 'Job Two'
},
action: {
type: 'text',
text: 'Default'
},
status: {
type: 'text',
text: '12 / 100 complete'
},
jobStart: {
type: 'date',
dateText: '11 Nov 2019, 9:47 AM',
text: '2019-11-11 09:47:00'
},
jobLocation: {
type: 'text',
text: 'Locked'
},
identifier: '2'
},
{
job: {
type: 'text',
text: 'Job Three'
},
action: {
type: 'text',
text: 'Default'
},
status: {
type: 'text',
text: '0 / 100 complete'
},
jobStart: {
type: 'date',
dateText: '30 June 2019, 12:20 PM',
text: '2019-06-30 12:20:00'
},
jobLocation: {
type: 'text',
text: 'Locked'
},
identifier: '3'
},
{
job: {
type: 'text',
text: 'Job One'
},
action: {
type: 'text',
text: 'Default'
},
status: {
type: 'text',
text: '100 / 100 complete'
},
jobStart: {
type: 'date',
dateText: '30 June 2019, 12:17 PM',
text: '2019-06-30 12:17:00'
},
jobLocation: {
type: 'text',
text: 'Error'
},
identifier: '4'
},
{
job: {
type: 'text',
text: 'Job Two'
},
action: {
type: 'text',
text: 'Default'
},
status: {
type: 'text',
text: '12 / 100 complete'
},
jobStart: {
type: 'date',
dateText: '11 Nov 2019, 9:47 AM',
text: '2019-11-11 09:47:00'
},
jobLocation: {
type: 'text',
text: 'Error'
},
identifier: '5'
},
{
job: {
type: 'text',
text: 'Job Three'
},
action: {
type: 'text',
text: 'Default'
},
status: {
type: 'text',
text: '0 / 100 complete'
},
jobStart: {
type: 'date',
dateText: '30 June 2019, 12:20 PM',
text: '2019-06-30 12:20:00'
},
jobLocation: {
type: 'text',
text: 'Error'
},
identifier: '6'
},
{
job: {
type: 'text',
text: 'Job One'
},
action: {
type: 'text',
text: 'Default'
},
status: {
type: 'text',
text: '100 / 100 complete'
},
jobStart: {
type: 'date',
dateText: '30 June 2019, 12:17 PM',
text: '2019-06-30 12:17:00'
},
jobLocation: {
type: 'text',
text: 'Email'
},
identifier: '7'
},
{
job: {
type: 'text',
text: 'Job Two'
},
action: {
type: 'text',
text: 'Default'
},
status: {
type: 'text',
text: '12 / 100 complete'
},
jobStart: {
type: 'date',
dateText: '11 Nov 2019, 9:47 AM',
text: '2019-11-11 09:47:00'
},
jobLocation: {
type: 'text',
text: 'Email'
},
identifier: '8'
},
{
job: {
type: 'text',
text: 'Job Three'
},
action: {
type: 'text',
text: 'Default'
},
status: {
type: 'text',
text: '0 / 100 complete'
},
jobStart: {
type: 'date',
dateText: '30 June 2019, 12:20 PM',
text: '2019-06-30 12:20:00'
},
jobLocation: {
type: 'text',
text: 'Email'
},
identifier: '9'
},
{
job: {
type: 'text',
text: 'Job One'
},
action: {
type: 'text',
text: 'Default'
},
status: {
type: 'text',
text: '100 / 100 complete'
},
jobStart: {
type: 'date',
dateText: '30 June 2019, 12:17 PM',
text: '2019-06-30 12:17:00'
},
jobLocation: {
type: 'text',
text: 'Warning'
},
identifier: '10'
},
{
job: {
type: 'text',
text: 'Job Two'
},
action: {
type: 'text',
text: 'Default'
},
status: {
type: 'text',
text: '12 / 100 complete'
},
jobStart: {
type: 'date',
dateText: '11 Nov 2019, 9:47 AM',
text: '2019-11-11 09:47:00'
},
jobLocation: {
type: 'text',
text: 'Warning'
},
identifier: '11'
},
{
job: {
type: 'text',
text: 'Job Three'
},
action: {
type: 'text',
text: 'Default'
},
status: {
type: 'text',
text: '0 / 100 complete'
},
jobStart: {
type: 'date',
dateText: '30 June 2019, 12:20 PM',
text: '2019-06-30 12:20:00'
},
jobLocation: {
type: 'text',
text: 'Warning'
},
identifier: '12'
},
{
job: {
type: 'text',
text: 'Job One'
},
action: {
type: 'text',
text: 'Default'
},
status: {
type: 'text',
text: '100 / 100 complete'
},
jobStart: {
type: 'date',
dateText: '30 June 2019, 12:17 PM',
text: '2019-06-30 12:17:00'
},
jobLocation: {
type: 'text',
text: 'Notification'
},
identifier: '13'
},
{
job: {
type: 'text',
text: 'Job Two'
},
action: {
type: 'text',
text: 'Default'
},
status: {
type: 'text',
text: '12 / 100 complete'
},
jobStart: {
type: 'date',
dateText: '11 Nov 2019, 9:47 AM',
text: '2019-11-11 09:47:00'
},
jobLocation: {
type: 'text',
text: 'Notification'
},
identifier: '14'
},
{
job: {
type: 'text',
text: 'Job Three'
},
action: {
type: 'text',
text: 'Default'
},
status: {
type: 'text',
text: '0 / 100 complete'
},
jobStart: {
type: 'date',
dateText: '30 June 2019, 12:20 PM',
text: '2019-06-30 12:20:00'
},
jobLocation: {
type: 'text',
text: 'Notification'
},
identifier: '15'
}
]
},
components: {
pcui_complex_table: PCUIComplexTableComponent
}
});
<div class="pcui">
<div id="single-selection-complex-table">
<div class="sample-table-container">
<pcui_complex_table v-bind:headers="headers"
v-bind:rows="rows"
use-selection="true">
</pcui_complex_table>
</div>
</div>
</div>
.sample-table-container {
height: 470px;
border: 1px solid #eeeeee;
}
new Vue({
el: '#single-selection-complex-table',
data: {
headers: [
{
text: 'Job',
value: 'job',
width: '100px'
},
{
text: 'Status',
value: 'status'
},
{
text: 'Job location',
value: 'jobLocation'
},
{
text: 'Job start',
value: 'jobStart'
},
{
text: 'Action',
value: 'action',
width: '120px'
}
],
rows: [
{
job: {
type: 'text',
text: 'Job One'
},
action: {
type: 'text',
text: 'Default'
},
status: {
type: 'text',
text: '30 / 100 complete'
},
jobStart: {
type: 'date',
text: '2019-12-12 18:09:00',
dateText: '12 Dec 2019, 6:09 PM'
},
jobLocation: {
type: 'text',
text: 'Locked'
},
identifier: '1'
},
{
job: {
type: 'text',
text: 'Job Two'
},
action: {
type: 'text',
text: 'Default'
},
status: {
type: 'text',
text: '12 / 100 complete'
},
jobStart: {
type: 'date',
dateText: '11 Nov 2019, 9:47 AM',
text: '2019-11-11 09:47:00'
},
jobLocation: {
type: 'text',
text: 'Locked'
},
identifier: '2'
},
{
job: {
type: 'text',
text: 'Job Three'
},
action: {
type: 'text',
text: 'Default'
},
status: {
type: 'text',
text: '0 / 100 complete'
},
jobStart: {
type: 'date',
dateText: '30 June 2019, 12:20 PM',
text: '2019-06-30 12:20:00'
},
jobLocation: {
type: 'text',
text: 'Locked'
},
identifier: '3'
},
{
job: {
type: 'text',
text: 'Job One'
},
action: {
type: 'text',
text: 'Default'
},
status: {
type: 'text',
text: '100 / 100 complete'
},
jobStart: {
type: 'date',
dateText: '30 June 2019, 12:17 PM',
text: '2019-06-30 12:17:00'
},
jobLocation: {
type: 'text',
text: 'Error'
},
identifier: '4'
},
{
job: {
type: 'text',
text: 'Job Two'
},
action: {
type: 'text',
text: 'Default'
},
status: {
type: 'text',
text: '12 / 100 complete'
},
jobStart: {
type: 'date',
dateText: '11 Nov 2019, 9:47 AM',
text: '2019-11-11 09:47:00'
},
jobLocation: {
type: 'text',
text: 'Error'
},
identifier: '5'
},
{
job: {
type: 'text',
text: 'Job Three'
},
action: {
type: 'text',
text: 'Default'
},
status: {
type: 'text',
text: '0 / 100 complete'
},
jobStart: {
type: 'date',
dateText: '30 June 2019, 12:20 PM',
text: '2019-06-30 12:20:00'
},
jobLocation: {
type: 'text',
text: 'Error'
},
identifier: '6'
},
{
job: {
type: 'text',
text: 'Job One'
},
action: {
type: 'text',
text: 'Default'
},
status: {
type: 'text',
text: '100 / 100 complete'
},
jobStart: {
type: 'date',
dateText: '30 June 2019, 12:17 PM',
text: '2019-06-30 12:17:00'
},
jobLocation: {
type: 'text',
text: 'Email'
},
identifier: '7'
},
{
job: {
type: 'text',
text: 'Job Two'
},
action: {
type: 'text',
text: 'Default'
},
status: {
type: 'text',
text: '12 / 100 complete'
},
jobStart: {
type: 'date',
dateText: '11 Nov 2019, 9:47 AM',
text: '2019-11-11 09:47:00'
},
jobLocation: {
type: 'text',
text: 'Email'
},
identifier: '8'
},
{
job: {
type: 'text',
text: 'Job Three'
},
action: {
type: 'text',
text: 'Default'
},
status: {
type: 'text',
text: '0 / 100 complete'
},
jobStart: {
type: 'date',
dateText: '30 June 2019, 12:20 PM',
text: '2019-06-30 12:20:00'
},
jobLocation: {
type: 'text',
text: 'Email'
},
identifier: '9'
},
{
job: {
type: 'text',
text: 'Job One'
},
action: {
type: 'text',
text: 'Default'
},
status: {
type: 'text',
text: '100 / 100 complete'
},
jobStart: {
type: 'date',
dateText: '30 June 2019, 12:17 PM',
text: '2019-06-30 12:17:00'
},
jobLocation: {
type: 'text',
text: 'Warning'
},
identifier: '10'
},
{
job: {
type: 'text',
text: 'Job Two'
},
action: {
type: 'text',
text: 'Default'
},
status: {
type: 'text',
text: '12 / 100 complete'
},
jobStart: {
type: 'date',
dateText: '11 Nov 2019, 9:47 AM',
text: '2019-11-11 09:47:00'
},
jobLocation: {
type: 'text',
text: 'Warning'
},
identifier: '11'
},
{
job: {
type: 'text',
text: 'Job Three'
},
action: {
type: 'text',
text: 'Default'
},
status: {
type: 'text',
text: '0 / 100 complete'
},
jobStart: {
type: 'date',
dateText: '30 June 2019, 12:20 PM',
text: '2019-06-30 12:20:00'
},
jobLocation: {
type: 'text',
text: 'Warning'
},
identifier: '12'
},
{
job: {
type: 'text',
text: 'Job One'
},
action: {
type: 'text',
text: 'Default'
},
status: {
type: 'text',
text: '100 / 100 complete'
},
jobStart: {
type: 'date',
dateText: '30 June 2019, 12:17 PM',
text: '2019-06-30 12:17:00'
},
jobLocation: {
type: 'text',
text: 'Notification'
},
identifier: '13'
},
{
job: {
type: 'text',
text: 'Job Two'
},
action: {
type: 'text',
text: 'Default'
},
status: {
type: 'text',
text: '12 / 100 complete'
},
jobStart: {
type: 'date',
dateText: '11 Nov 2019, 9:47 AM',
text: '2019-11-11 09:47:00'
},
jobLocation: {
type: 'text',
text: 'Notification'
},
identifier: '14'
},
{
job: {
type: 'text',
text: 'Job Three'
},
action: {
type: 'text',
text: 'Default'
},
status: {
type: 'text',
text: '0 / 100 complete'
},
jobStart: {
type: 'date',
dateText: '30 June 2019, 12:20 PM',
text: '2019-06-30 12:20:00'
},
jobLocation: {
type: 'text',
text: 'Notification'
},
identifier: '15'
}
]
},
components: {
pcui_complex_table: PCUIComplexTableComponent
}
});
<div class="pcui">
<div id="multiple-selection-complex-table">
<div class="sample-table-container">
<pcui_complex_table v-bind:headers="headers"
v-bind:rows="rows"
has-checkbox="true">
</pcui_complex_table>
</div>
</div>
</div>
.sample-table-container {
height: 470px;
border: 1px solid #eeeeee;
}
new Vue({
el: '#multiple-selection-complex-table',
data: {
headers: [
{
text: 'Job',
value: 'job',
width: '100px'
},
{
text: 'Status',
value: 'status'
},
{
text: 'Job location',
value: 'jobLocation'
},
{
text: 'Job start',
value: 'jobStart'
},
{
text: 'Action',
value: 'action',
width: '120px'
}
],
rows: [
{
job: {
type: 'text',
text: 'Job One'
},
action: {
type: 'text',
text: 'Default'
},
status: {
type: 'text',
text: '30 / 100 complete'
},
jobStart: {
type: 'date',
text: '2019-12-12 18:09:00',
dateText: '12 Dec 2019, 6:09 PM'
},
jobLocation: {
type: 'text',
text: 'Locked'
},
identifier: '1'
},
{
job: {
type: 'text',
text: 'Job Two'
},
action: {
type: 'text',
text: 'Default'
},
status: {
type: 'text',
text: '12 / 100 complete'
},
jobStart: {
type: 'date',
dateText: '11 Nov 2019, 9:47 AM',
text: '2019-11-11 09:47:00'
},
jobLocation: {
type: 'text',
text: 'Locked'
},
identifier: '2'
},
{
job: {
type: 'text',
text: 'Job Three'
},
action: {
type: 'text',
text: 'Default'
},
status: {
type: 'text',
text: '0 / 100 complete'
},
jobStart: {
type: 'date',
dateText: '30 June 2019, 12:20 PM',
text: '2019-06-30 12:20:00'
},
jobLocation: {
type: 'text',
text: 'Locked'
},
identifier: '3'
},
{
job: {
type: 'text',
text: 'Job One'
},
action: {
type: 'text',
text: 'Default'
},
status: {
type: 'text',
text: '100 / 100 complete'
},
jobStart: {
type: 'date',
dateText: '30 June 2019, 12:17 PM',
text: '2019-06-30 12:17:00'
},
jobLocation: {
type: 'text',
text: 'Error'
},
identifier: '4'
},
{
job: {
type: 'text',
text: 'Job Two'
},
action: {
type: 'text',
text: 'Default'
},
status: {
type: 'text',
text: '12 / 100 complete'
},
jobStart: {
type: 'date',
dateText: '11 Nov 2019, 9:47 AM',
text: '2019-11-11 09:47:00'
},
jobLocation: {
type: 'text',
text: 'Error'
},
identifier: '5'
},
{
job: {
type: 'text',
text: 'Job Three'
},
action: {
type: 'text',
text: 'Default'
},
status: {
type: 'text',
text: '0 / 100 complete'
},
jobStart: {
type: 'date',
dateText: '30 June 2019, 12:20 PM',
text: '2019-06-30 12:20:00'
},
jobLocation: {
type: 'text',
text: 'Error'
},
identifier: '6'
},
{
job: {
type: 'text',
text: 'Job One'
},
action: {
type: 'text',
text: 'Default'
},
status: {
type: 'text',
text: '100 / 100 complete'
},
jobStart: {
type: 'date',
dateText: '30 June 2019, 12:17 PM',
text: '2019-06-30 12:17:00'
},
jobLocation: {
type: 'text',
text: 'Email'
},
identifier: '7'
},
{
job: {
type: 'text',
text: 'Job Two'
},
action: {
type: 'text',
text: 'Default'
},
status: {
type: 'text',
text: '12 / 100 complete'
},
jobStart: {
type: 'date',
dateText: '11 Nov 2019, 9:47 AM',
text: '2019-11-11 09:47:00'
},
jobLocation: {
type: 'text',
text: 'Email'
},
identifier: '8'
},
{
job: {
type: 'text',
text: 'Job Three'
},
action: {
type: 'text',
text: 'Default'
},
status: {
type: 'text',
text: '0 / 100 complete'
},
jobStart: {
type: 'date',
dateText: '30 June 2019, 12:20 PM',
text: '2019-06-30 12:20:00'
},
jobLocation: {
type: 'text',
text: 'Email'
},
identifier: '9'
},
{
job: {
type: 'text',
text: 'Job One'
},
action: {
type: 'text',
text: 'Default'
},
status: {
type: 'text',
text: '100 / 100 complete'
},
jobStart: {
type: 'date',
dateText: '30 June 2019, 12:17 PM',
text: '2019-06-30 12:17:00'
},
jobLocation: {
type: 'text',
text: 'Warning'
},
identifier: '10'
},
{
job: {
type: 'text',
text: 'Job Two'
},
action: {
type: 'text',
text: 'Default'
},
status: {
type: 'text',
text: '12 / 100 complete'
},
jobStart: {
type: 'date',
dateText: '11 Nov 2019, 9:47 AM',
text: '2019-11-11 09:47:00'
},
jobLocation: {
type: 'text',
text: 'Warning'
},
identifier: '11'
},
{
job: {
type: 'text',
text: 'Job Three'
},
action: {
type: 'text',
text: 'Default'
},
status: {
type: 'text',
text: '0 / 100 complete'
},
jobStart: {
type: 'date',
dateText: '30 June 2019, 12:20 PM',
text: '2019-06-30 12:20:00'
},
jobLocation: {
type: 'text',
text: 'Warning'
},
identifier: '12'
},
{
job: {
type: 'text',
text: 'Job One'
},
action: {
type: 'text',
text: 'Default'
},
status: {
type: 'text',
text: '100 / 100 complete'
},
jobStart: {
type: 'date',
dateText: '30 June 2019, 12:17 PM',
text: '2019-06-30 12:17:00'
},
jobLocation: {
type: 'text',
text: 'Notification'
},
identifier: '13'
},
{
job: {
type: 'text',
text: 'Job Two'
},
action: {
type: 'text',
text: 'Default'
},
status: {
type: 'text',
text: '12 / 100 complete'
},
jobStart: {
type: 'date',
dateText: '11 Nov 2019, 9:47 AM',
text: '2019-11-11 09:47:00'
},
jobLocation: {
type: 'text',
text: 'Notification'
},
identifier: '14'
},
{
job: {
type: 'text',
text: 'Job Three'
},
action: {
type: 'text',
text: 'Default'
},
status: {
type: 'text',
text: '0 / 100 complete'
},
jobStart: {
type: 'date',
dateText: '30 June 2019, 12:20 PM',
text: '2019-06-30 12:20:00'
},
jobLocation: {
type: 'text',
text: 'Notification'
},
identifier: '15'
}
]
},
components: {
pcui_complex_table: PCUIComplexTableComponent
}
});
<div class="pcui">
<div id="multiple-column-sort-complex-table">
<div class="sample-table-container">
<pcui_complex_table v-bind:headers="headers"
v-bind:rows="rows"
sort-multiple-columns="true">
</pcui_complex_table>
</div>
</div>
</div>
.sample-table-container {
height: 470px;
border: 1px solid #eeeeee;
}
new Vue({
el: '#multiple-column-sort-complex-table',
data: {
headers: [
{
text: 'Job',
value: 'job',
width: '100px'
},
{
text: 'Status',
value: 'status'
},
{
text: 'Job location',
value: 'jobLocation'
},
{
text: 'Job start',
value: 'jobStart'
},
{
text: 'Action',
value: 'action',
width: '120px'
}
],
rows: [
{
job: {
type: 'text',
text: 'Job One'
},
action: {
type: 'text',
text: 'Default'
},
status: {
type: 'text',
text: '30 / 100 complete'
},
jobStart: {
type: 'date',
text: '2019-12-12 18:09:00',
dateText: '12 Dec 2019, 6:09 PM'
},
jobLocation: {
type: 'text',
text: 'Locked'
},
identifier: '1'
},
{
job: {
type: 'text',
text: 'Job Two'
},
action: {
type: 'text',
text: 'Default'
},
status: {
type: 'text',
text: '12 / 100 complete'
},
jobStart: {
type: 'date',
dateText: '11 Nov 2019, 9:47 AM',
text: '2019-11-11 09:47:00'
},
jobLocation: {
type: 'text',
text: 'Locked'
},
identifier: '2'
},
{
job: {
type: 'text',
text: 'Job Three'
},
action: {
type: 'text',
text: 'Default'
},
status: {
type: 'text',
text: '0 / 100 complete'
},
jobStart: {
type: 'date',
dateText: '30 June 2019, 12:20 PM',
text: '2019-06-30 12:20:00'
},
jobLocation: {
type: 'text',
text: 'Locked'
},
identifier: '3'
},
{
job: {
type: 'text',
text: 'Job One'
},
action: {
type: 'text',
text: 'Default'
},
status: {
type: 'text',
text: '100 / 100 complete'
},
jobStart: {
type: 'date',
dateText: '30 June 2019, 12:17 PM',
text: '2019-06-30 12:17:00'
},
jobLocation: {
type: 'text',
text: 'Error'
},
identifier: '4'
},
{
job: {
type: 'text',
text: 'Job Two'
},
action: {
type: 'text',
text: 'Default'
},
status: {
type: 'text',
text: '12 / 100 complete'
},
jobStart: {
type: 'date',
dateText: '11 Nov 2019, 9:47 AM',
text: '2019-11-11 09:47:00'
},
jobLocation: {
type: 'text',
text: 'Error'
},
identifier: '5'
},
{
job: {
type: 'text',
text: 'Job Three'
},
action: {
type: 'text',
text: 'Default'
},
status: {
type: 'text',
text: '0 / 100 complete'
},
jobStart: {
type: 'date',
dateText: '30 June 2019, 12:20 PM',
text: '2019-06-30 12:20:00'
},
jobLocation: {
type: 'text',
text: 'Error'
},
identifier: '6'
},
{
job: {
type: 'text',
text: 'Job One'
},
action: {
type: 'text',
text: 'Default'
},
status: {
type: 'text',
text: '100 / 100 complete'
},
jobStart: {
type: 'date',
dateText: '30 June 2019, 12:17 PM',
text: '2019-06-30 12:17:00'
},
jobLocation: {
type: 'text',
text: 'Email'
},
identifier: '7'
},
{
job: {
type: 'text',
text: 'Job Two'
},
action: {
type: 'text',
text: 'Default'
},
status: {
type: 'text',
text: '12 / 100 complete'
},
jobStart: {
type: 'date',
dateText: '11 Nov 2019, 9:47 AM',
text: '2019-11-11 09:47:00'
},
jobLocation: {
type: 'text',
text: 'Email'
},
identifier: '8'
},
{
job: {
type: 'text',
text: 'Job Three'
},
action: {
type: 'text',
text: 'Default'
},
status: {
type: 'text',
text: '0 / 100 complete'
},
jobStart: {
type: 'date',
dateText: '30 June 2019, 12:20 PM',
text: '2019-06-30 12:20:00'
},
jobLocation: {
type: 'text',
text: 'Email'
},
identifier: '9'
},
{
job: {
type: 'text',
text: 'Job One'
},
action: {
type: 'text',
text: 'Default'
},
status: {
type: 'text',
text: '100 / 100 complete'
},
jobStart: {
type: 'date',
dateText: '30 June 2019, 12:17 PM',
text: '2019-06-30 12:17:00'
},
jobLocation: {
type: 'text',
text: 'Warning'
},
identifier: '10'
},
{
job: {
type: 'text',
text: 'Job Two'
},
action: {
type: 'text',
text: 'Default'
},
status: {
type: 'text',
text: '12 / 100 complete'
},
jobStart: {
type: 'date',
dateText: '11 Nov 2019, 9:47 AM',
text: '2019-11-11 09:47:00'
},
jobLocation: {
type: 'text',
text: 'Warning'
},
identifier: '11'
},
{
job: {
type: 'text',
text: 'Job Three'
},
action: {
type: 'text',
text: 'Default'
},
status: {
type: 'text',
text: '0 / 100 complete'
},
jobStart: {
type: 'date',
dateText: '30 June 2019, 12:20 PM',
text: '2019-06-30 12:20:00'
},
jobLocation: {
type: 'text',
text: 'Warning'
},
identifier: '12'
},
{
job: {
type: 'text',
text: 'Job One'
},
action: {
type: 'text',
text: 'Default'
},
status: {
type: 'text',
text: '100 / 100 complete'
},
jobStart: {
type: 'date',
dateText: '30 June 2019, 12:17 PM',
text: '2019-06-30 12:17:00'
},
jobLocation: {
type: 'text',
text: 'Notification'
},
identifier: '13'
},
{
job: {
type: 'text',
text: 'Job Two'
},
action: {
type: 'text',
text: 'Default'
},
status: {
type: 'text',
text: '12 / 100 complete'
},
jobStart: {
type: 'date',
dateText: '11 Nov 2019, 9:47 AM',
text: '2019-11-11 09:47:00'
},
jobLocation: {
type: 'text',
text: 'Notification'
},
identifier: '14'
},
{
job: {
type: 'text',
text: 'Job Three'
},
action: {
type: 'text',
text: 'Default'
},
status: {
type: 'text',
text: '0 / 100 complete'
},
jobStart: {
type: 'date',
dateText: '30 June 2019, 12:20 PM',
text: '2019-06-30 12:20:00'
},
jobLocation: {
type: 'text',
text: 'Notification'
},
identifier: '15'
}
]
},
components: {
pcui_complex_table: PCUIComplexTableComponent
}
});
<div class="pcui">
<div id="cells-with-elements-complex-table">
<div class="sample-table-container">
<pcui_complex_table v-bind:headers="headers"
v-bind:rows="rows"
has-checkbox="true">
</pcui_complex_table>
</div>
</div>
</div>
.sample-table-container {
height: 470px;
border: 1px solid #eeeeee;
}
new Vue({
el: '#cells-with-elements-complex-table',
data: {
headers: [
{
text: 'Job',
value: 'job',
width: '100px'
},
{
text: 'Status',
value: 'status'
},
{
text: 'Job location',
value: 'jobLocation'
},
{
text: 'Job start',
value: 'jobStart'
},
{
text: 'Action',
value: 'action',
width: '120px'
}
],
rows: [
{
job: {
type: 'text',
text: 'Job One',
},
action: {
type: 'button',
text: 'Default',
},
status: {
type: 'progress',
text: 30,
theme: 'success',
progressText: '30 / 100 complete',
progressValue: '30%'
},
jobStart: {
type: 'date',
text: '2019-12-12 18:09:00',
dateText: '12 Dec 2019, 6:09 PM',
},
jobLocation: {
type: 'with-icon',
text: 'Locked',
iconClass: 'fa fa-lock',
iconTheme: 'secondary'
},
identifier: '1'
},
{
job: {
type: 'text',
text: 'Job Two'
},
action: {
type: 'button',
text: 'Default'
},
status: {
type: 'progress',
text: 12,
theme: 'warning',
progressText: '12 / 100 complete',
progressValue: '12%'
},
jobStart: {
type: 'date',
dateText: '11 Nov 2019, 9:47 AM',
text: '2019-11-11 09:47:00'
},
jobLocation: {
type: 'with-icon',
text: 'Locked',
iconClass: 'fa fa-lock',
iconTheme: 'secondary'
},
identifier: '2'
},
{
job: {
type: 'text',
text: 'Job Three'
},
action: {
type: 'button',
text: 'Default'
},
status: {
type: 'progress',
text: 0,
theme: 'danger',
progressText: '0 / 100 complete',
progressValue: '0%'
},
jobStart: {
type: 'date',
dateText: '30 June 2019, 12:20 PM',
text: '2019-06-30 12:20:00'
},
jobLocation: {
type: 'with-icon',
text: 'Locked',
iconClass: 'fa fa-lock',
iconTheme: 'secondary'
},
identifier: '3'
},
{
job: {
type: 'text',
text: 'Job One'
},
action: {
type: 'button',
text: 'Default'
},
status: {
type: 'progress',
text: 100,
theme: 'info',
progressText: '100 / 100 complete',
progressValue: '100%'
},
jobStart: {
type: 'date',
dateText: '30 June 2019, 12:17 PM',
text: '2019-06-30 12:17:00'
},
jobLocation: {
type: 'with-icon',
text: 'Error',
theme: 'danger',
iconClass: 'fa fa-exclamation-circle'
},
identifier: '4'
},
{
job: {
type: 'text',
text: 'Job Two'
},
action: {
type: 'button',
text: 'Default'
},
status: {
type: 'progress',
text: 12,
theme: 'warning',
progressText: '12 / 100 complete',
progressValue: '12%'
},
jobStart: {
type: 'date',
dateText: '11 Nov 2019, 9:47 AM',
text: '2019-11-11 09:47:00'
},
jobLocation: {
type: 'with-icon',
text: 'Error',
theme: 'danger',
iconClass: 'fa fa-exclamation-circle'
},
identifier: '5'
},
{
job: {
type: 'text',
text: 'Job Three'
},
action: {
type: 'button',
text: 'Default'
},
status: {
type: 'progress',
text: 0,
theme: 'danger',
progressText: '0 / 100 complete',
progressValue: '0%'
},
jobStart: {
type: 'date',
dateText: '30 June 2019, 12:20 PM',
text: '2019-06-30 12:20:00'
},
jobLocation: {
type: 'with-icon',
text: 'Error',
theme: 'danger',
iconClass: 'fa fa-exclamation-circle'
},
identifier: '6'
},
{
job: {
type: 'text',
text: 'Job One'
},
action: {
type: 'button',
text: 'Default'
},
status: {
type: 'progress',
text: 100,
theme: 'info',
progressText: '100 / 100 complete',
progressValue: '100%'
},
jobStart: {
type: 'date',
dateText: '30 June 2019, 12:17 PM',
text: '2019-06-30 12:17:00'
},
jobLocation: {
type: 'with-icon',
text: 'Email',
iconClass: 'ion-email',
iconTheme: 'info',
iconSize: '20px'
},
identifier: '7'
},
{
job: {
type: 'text',
text: 'Job Two'
},
action: {
type: 'button',
text: 'Default'
},
status: {
type: 'progress',
text: 12,
theme: 'warning',
progressText: '12 / 100 complete',
progressValue: '12%'
},
jobStart: {
type: 'date',
dateText: '11 Nov 2019, 9:47 AM',
text: '2019-11-11 09:47:00'
},
jobLocation: {
type: 'with-icon',
text: 'Email',
iconClass: 'ion-email',
iconTheme: 'info',
iconSize: '20px'
},
identifier: '8'
},
{
job: {
type: 'text',
text: 'Job Three'
},
action: {
type: 'button',
text: 'Default'
},
status: {
type: 'progress',
text: 0,
theme: 'danger',
progressText: '0 / 100 complete',
progressValue: '0%'
},
jobStart: {
type: 'date',
dateText: '30 June 2019, 12:20 PM',
text: '2019-06-30 12:20:00'
},
jobLocation: {
type: 'with-icon',
text: 'Email',
iconClass: 'ion-email',
iconTheme: 'info',
iconSize: '20px'
},
identifier: '9'
},
{
job: {
type: 'text',
text: 'Job One'
},
action: {
type: 'button',
text: 'Default'
},
status: {
type: 'progress',
text: 100,
theme: 'info',
progressText: '100 / 100 complete',
progressValue: '100%'
},
jobStart: {
type: 'date',
dateText: '30 June 2019, 12:17 PM',
text: '2019-06-30 12:17:00'
},
jobLocation: {
type: 'with-icon',
text: 'Warning',
theme: 'warning',
iconClass: 'fa fa-exclamation-triangle'
},
identifier: '10'
},
{
job: {
type: 'text',
text: 'Job Two'
},
action: {
type: 'button',
text: 'Default'
},
status: {
type: 'progress',
text: 12,
theme: 'warning',
progressText: '12 / 100 complete',
progressValue: '12%'
},
jobStart: {
type: 'date',
dateText: '11 Nov 2019, 9:47 AM',
text: '2019-11-11 09:47:00'
},
jobLocation: {
type: 'with-icon',
text: 'Warning',
theme: 'warning',
iconClass: 'fa fa-exclamation-triangle'
},
identifier: '11'
},
{
job: {
type: 'text',
text: 'Job Three'
},
action: {
type: 'button',
text: 'Default'
},
status: {
type: 'progress',
text: 0,
theme: 'danger',
progressText: '0 / 100 complete',
progressValue: '0%'
},
jobStart: {
type: 'date',
dateText: '30 June 2019, 12:20 PM',
text: '2019-06-30 12:20:00'
},
jobLocation: {
type: 'with-icon',
text: 'Warning',
theme: 'warning',
iconClass: 'fa fa-exclamation-triangle'
},
identifier: '12'
},
{
job: {
type: 'text',
text: 'Job One'
},
action: {
type: 'button',
text: 'Default'
},
status: {
type: 'progress',
text: 100,
theme: 'info',
progressText: '100 / 100 complete',
progressValue: '100%'
},
jobStart: {
type: 'date',
dateText: '30 June 2019, 12:17 PM',
text: '2019-06-30 12:17:00'
},
jobLocation: {
type: 'with-icon',
text: 'Notification',
theme: 'success',
iconClass: 'fas fa-bell'
},
identifier: '13'
},
{
job: {
type: 'text',
text: 'Job Two'
},
action: {
type: 'button',
text: 'Default'
},
status: {
type: 'progress',
text: 12,
theme: 'warning',
progressText: '12 / 100 complete',
progressValue: '12%'
},
jobStart: {
type: 'date',
dateText: '11 Nov 2019, 9:47 AM',
text: '2019-11-11 09:47:00'
},
jobLocation: {
type: 'with-icon',
text: 'Notification',
theme: 'success',
iconClass: 'fas fa-bell'
},
identifier: '14'
},
{
job: {
type: 'text',
text: 'Job Three'
},
action: {
type: 'button',
text: 'Default'
},
status: {
type: 'progress',
text: 0,
theme: 'danger',
progressText: '0 / 100 complete',
progressValue: '0%'
},
jobStart: {
type: 'date',
dateText: '30 June 2019, 12:20 PM',
text: '2019-06-30 12:20:00'
},
jobLocation: {
type: 'with-icon',
text: 'Notification',
theme: 'success',
iconClass: 'fas fa-bell'
},
identifier: '15'
}
]
},
components: {
pcui_complex_table: PCUIComplexTableComponent
}
});
<div class="pcui">
<div id="lazy-loading-complex-table">
<div class="sample-table-container">
<div class="table-loading-spinner" style="display: none;">
<pcui_spinner size="60"></pcui_spinner>
</div>
<pcui_complex_table v-bind:headers="headers"
v-bind:rows="rows"
v-bind:on-scroll="onScroll"
has-checkbox="true"
ref="lazy-loading-table">
</pcui_complex_table>
</div>
</div>
</div>
.sample-table-container {
height: 470px;
border: 1px solid #eeeeee;
}
new Vue({
el: '#lazy-loading-complex-table',
data: {
headers: [
{
text: 'Job',
value: 'job',
width: '100px'
},
{
text: 'Status',
value: 'status'
},
{
text: 'Job location',
value: 'jobLocation'
},
{
text: 'Job start',
value: 'jobStart'
},
{
text: 'Action',
value: 'action',
width: '120px'
}
],
rows: [
{
job: {
type: 'text',
text: 'Job One',
tooltip: 'Job One'
},
action: {
type: 'button',
text: 'Default',
tooltip: 'Default'
},
status: {
type: 'progress',
text: 30,
tooltip: '30 / 100 complete',
theme: 'success',
progressText: '30 / 100 complete',
progressValue: '30%'
},
jobStart: {
type: 'date',
text: '2019-12-12 18:09:00',
dateText: '12 Dec 2019, 6:09 PM',
tooltip: '12 Dec 2019, 6:09 PM'
},
jobLocation: {
type: 'with-icon',
text: 'Locked',
tooltip: 'Locked',
iconClass: 'fa fa-lock',
iconTheme: 'secondary'
},
identifier: '1'
},
{
job: {
type: 'text',
text: 'Job Two'
},
action: {
type: 'button',
text: 'Default'
},
status: {
type: 'progress',
text: 12,
theme: 'warning',
progressText: '12 / 100 complete',
progressValue: '12%'
},
jobStart: {
type: 'date',
dateText: '11 Nov 2019, 9:47 AM',
text: '2019-11-11 09:47:00'
},
jobLocation: {
type: 'with-icon',
text: 'Locked',
iconClass: 'fa fa-lock',
iconTheme: 'secondary'
},
identifier: '2'
},
{
job: {
type: 'text',
text: 'Job Three'
},
action: {
type: 'button',
text: 'Default'
},
status: {
type: 'progress',
text: 0,
theme: 'danger',
progressText: '0 / 100 complete',
progressValue: '0%'
},
jobStart: {
type: 'date',
dateText: '30 June 2019, 12:20 PM',
text: '2019-06-30 12:20:00'
},
jobLocation: {
type: 'with-icon',
text: 'Locked',
iconClass: 'fa fa-lock',
iconTheme: 'secondary'
},
identifier: '3'
},
{
job: {
type: 'text',
text: 'Job One'
},
action: {
type: 'button',
text: 'Default'
},
status: {
type: 'progress',
text: 100,
theme: 'info',
progressText: '100 / 100 complete',
progressValue: '100%'
},
jobStart: {
type: 'date',
dateText: '30 June 2019, 12:17 PM',
text: '2019-06-30 12:17:00'
},
jobLocation: {
type: 'with-icon',
text: 'Error',
theme: 'danger',
iconClass: 'fa fa-exclamation-circle'
},
identifier: '4'
},
{
job: {
type: 'text',
text: 'Job Two'
},
action: {
type: 'button',
text: 'Default'
},
status: {
type: 'progress',
text: 12,
theme: 'warning',
progressText: '12 / 100 complete',
progressValue: '12%'
},
jobStart: {
type: 'date',
dateText: '11 Nov 2019, 9:47 AM',
text: '2019-11-11 09:47:00'
},
jobLocation: {
type: 'with-icon',
text: 'Error',
theme: 'danger',
iconClass: 'fa fa-exclamation-circle'
},
identifier: '5'
},
{
job: {
type: 'text',
text: 'Job Three'
},
action: {
type: 'button',
text: 'Default'
},
status: {
type: 'progress',
text: 0,
theme: 'danger',
progressText: '0 / 100 complete',
progressValue: '0%'
},
jobStart: {
type: 'date',
dateText: '30 June 2019, 12:20 PM',
text: '2019-06-30 12:20:00'
},
jobLocation: {
type: 'with-icon',
text: 'Error',
theme: 'danger',
iconClass: 'fa fa-exclamation-circle'
},
identifier: '6'
},
{
job: {
type: 'text',
text: 'Job One'
},
action: {
type: 'button',
text: 'Default'
},
status: {
type: 'progress',
text: 100,
theme: 'info',
progressText: '100 / 100 complete',
progressValue: '100%'
},
jobStart: {
type: 'date',
dateText: '30 June 2019, 12:17 PM',
text: '2019-06-30 12:17:00'
},
jobLocation: {
type: 'with-icon',
text: 'Email',
iconClass: 'ion-email',
iconTheme: 'info',
iconSize: '20px'
},
identifier: '7'
},
{
job: {
type: 'text',
text: 'Job Two'
},
action: {
type: 'button',
text: 'Default'
},
status: {
type: 'progress',
text: 12,
theme: 'warning',
progressText: '12 / 100 complete',
progressValue: '12%'
},
jobStart: {
type: 'date',
dateText: '11 Nov 2019, 9:47 AM',
text: '2019-11-11 09:47:00'
},
jobLocation: {
type: 'with-icon',
text: 'Email',
iconClass: 'ion-email',
iconTheme: 'info',
iconSize: '20px'
},
identifier: '8'
},
{
job: {
type: 'text',
text: 'Job Three'
},
action: {
type: 'button',
text: 'Default'
},
status: {
type: 'progress',
text: 0,
theme: 'danger',
progressText: '0 / 100 complete',
progressValue: '0%'
},
jobStart: {
type: 'date',
dateText: '30 June 2019, 12:20 PM',
text: '2019-06-30 12:20:00'
},
jobLocation: {
type: 'with-icon',
text: 'Email',
iconClass: 'ion-email',
iconTheme: 'info',
iconSize: '20px'
},
identifier: '9'
},
{
job: {
type: 'text',
text: 'Job One'
},
action: {
type: 'button',
text: 'Default'
},
status: {
type: 'progress',
text: 100,
theme: 'info',
progressText: '100 / 100 complete',
progressValue: '100%'
},
jobStart: {
type: 'date',
dateText: '30 June 2019, 12:17 PM',
text: '2019-06-30 12:17:00'
},
jobLocation: {
type: 'with-icon',
text: 'Warning',
theme: 'warning',
iconClass: 'fa fa-exclamation-triangle'
},
identifier: '10'
},
{
job: {
type: 'text',
text: 'Job Two'
},
action: {
type: 'button',
text: 'Default'
},
status: {
type: 'progress',
text: 12,
theme: 'warning',
progressText: '12 / 100 complete',
progressValue: '12%'
},
jobStart: {
type: 'date',
dateText: '11 Nov 2019, 9:47 AM',
text: '2019-11-11 09:47:00'
},
jobLocation: {
type: 'with-icon',
text: 'Warning',
theme: 'warning',
iconClass: 'fa fa-exclamation-triangle'
},
identifier: '11'
},
{
job: {
type: 'text',
text: 'Job Three'
},
action: {
type: 'button',
text: 'Default'
},
status: {
type: 'progress',
text: 0,
theme: 'danger',
progressText: '0 / 100 complete',
progressValue: '0%'
},
jobStart: {
type: 'date',
dateText: '30 June 2019, 12:20 PM',
text: '2019-06-30 12:20:00'
},
jobLocation: {
type: 'with-icon',
text: 'Warning',
theme: 'warning',
iconClass: 'fa fa-exclamation-triangle'
},
identifier: '12'
},
{
job: {
type: 'text',
text: 'Job One'
},
action: {
type: 'button',
text: 'Default'
},
status: {
type: 'progress',
text: 100,
theme: 'info',
progressText: '100 / 100 complete',
progressValue: '100%'
},
jobStart: {
type: 'date',
dateText: '30 June 2019, 12:17 PM',
text: '2019-06-30 12:17:00'
},
jobLocation: {
type: 'with-icon',
text: 'Notification',
theme: 'success',
iconClass: 'fas fa-bell'
},
identifier: '13'
},
{
job: {
type: 'text',
text: 'Job Two'
},
action: {
type: 'button',
text: 'Default'
},
status: {
type: 'progress',
text: 12,
theme: 'warning',
progressText: '12 / 100 complete',
progressValue: '12%'
},
jobStart: {
type: 'date',
dateText: '11 Nov 2019, 9:47 AM',
text: '2019-11-11 09:47:00'
},
jobLocation: {
type: 'with-icon',
text: 'Notification',
theme: 'success',
iconClass: 'fas fa-bell'
},
identifier: '14'
},
{
job: {
type: 'text',
text: 'Job Three'
},
action: {
type: 'button',
text: 'Default'
},
status: {
type: 'progress',
text: 0,
theme: 'danger',
progressText: '0 / 100 complete',
progressValue: '0%'
},
jobStart: {
type: 'date',
dateText: '30 June 2019, 12:20 PM',
text: '2019-06-30 12:20:00'
},
jobLocation: {
type: 'with-icon',
text: 'Notification',
theme: 'success',
iconClass: 'fas fa-bell'
},
identifier: '15'
}
],
lazyLoadingRows: [
{
job: {
type: 'text',
text: 'Job One',
tooltip: 'Job One'
},
action: {
type: 'button',
text: 'Default',
tooltip: 'Default'
},
status: {
type: 'progress',
text: 30,
tooltip: '30 / 100 complete',
theme: 'success',
progressText: '30 / 100 complete',
progressValue: '30%'
},
jobStart: {
type: 'date',
text: '2019-12-12 18:09:00',
dateText: '12 Dec 2019, 6:09 PM',
tooltip: '12 Dec 2019, 6:09 PM'
},
jobLocation: {
type: 'with-icon',
text: 'Locked',
tooltip: 'Locked',
iconClass: 'fa fa-lock',
iconTheme: 'secondary'
},
identifier: '16'
},
{
job: {
type: 'text',
text: 'Job Two'
},
action: {
type: 'button',
text: 'Default'
},
status: {
type: 'progress',
text: 12,
theme: 'warning',
progressText: '12 / 100 complete',
progressValue: '12%'
},
jobStart: {
type: 'date',
dateText: '11 Nov 2019, 9:47 AM',
text: '2019-11-11 09:47:00'
},
jobLocation: {
type: 'with-icon',
text: 'Locked',
iconClass: 'fa fa-lock',
iconTheme: 'secondary'
},
identifier: '17'
},
{
job: {
type: 'text',
text: 'Job Three'
},
action: {
type: 'button',
text: 'Default'
},
status: {
type: 'progress',
text: 0,
theme: 'danger',
progressText: '0 / 100 complete',
progressValue: '0%'
},
jobStart: {
type: 'date',
dateText: '30 June 2019, 12:20 PM',
text: '2019-06-30 12:20:00'
},
jobLocation: {
type: 'with-icon',
text: 'Locked',
iconClass: 'fa fa-lock',
iconTheme: 'secondary'
},
identifier: '18'
},
{
job: {
type: 'text',
text: 'Job One'
},
action: {
type: 'button',
text: 'Default'
},
status: {
type: 'progress',
text: 100,
theme: 'info',
progressText: '100 / 100 complete',
progressValue: '100%'
},
jobStart: {
type: 'date',
dateText: '30 June 2019, 12:17 PM',
text: '2019-06-30 12:17:00'
},
jobLocation: {
type: 'with-icon',
text: 'Error',
theme: 'danger',
iconClass: 'fa fa-exclamation-circle'
},
identifier: '19'
},
{
job: {
type: 'text',
text: 'Job Two'
},
action: {
type: 'button',
text: 'Default'
},
status: {
type: 'progress',
text: 12,
theme: 'warning',
progressText: '12 / 100 complete',
progressValue: '12%'
},
jobStart: {
type: 'date',
dateText: '11 Nov 2019, 9:47 AM',
text: '2019-11-11 09:47:00'
},
jobLocation: {
type: 'with-icon',
text: 'Error',
theme: 'danger',
iconClass: 'fa fa-exclamation-circle'
},
identifier: '20'
},
{
job: {
type: 'text',
text: 'Job Three'
},
action: {
type: 'button',
text: 'Default'
},
status: {
type: 'progress',
text: 0,
theme: 'danger',
progressText: '0 / 100 complete',
progressValue: '0%'
},
jobStart: {
type: 'date',
dateText: '30 June 2019, 12:20 PM',
text: '2019-06-30 12:20:00'
},
jobLocation: {
type: 'with-icon',
text: 'Error',
theme: 'danger',
iconClass: 'fa fa-exclamation-circle'
},
identifier: '21'
},
{
job: {
type: 'text',
text: 'Job One'
},
action: {
type: 'button',
text: 'Default'
},
status: {
type: 'progress',
text: 100,
theme: 'info',
progressText: '100 / 100 complete',
progressValue: '100%'
},
jobStart: {
type: 'date',
dateText: '30 June 2019, 12:17 PM',
text: '2019-06-30 12:17:00'
},
jobLocation: {
type: 'with-icon',
text: 'Email',
iconClass: 'ion-email',
iconTheme: 'info',
iconSize: '20px'
},
identifier: '22'
},
{
job: {
type: 'text',
text: 'Job Two'
},
action: {
type: 'button',
text: 'Default'
},
status: {
type: 'progress',
text: 12,
theme: 'warning',
progressText: '12 / 100 complete',
progressValue: '12%'
},
jobStart: {
type: 'date',
dateText: '11 Nov 2019, 9:47 AM',
text: '2019-11-11 09:47:00'
},
jobLocation: {
type: 'with-icon',
text: 'Email',
iconClass: 'ion-email',
iconTheme: 'info',
iconSize: '20px'
},
identifier: '23'
},
{
job: {
type: 'text',
text: 'Job Three'
},
action: {
type: 'button',
text: 'Default'
},
status: {
type: 'progress',
text: 0,
theme: 'danger',
progressText: '0 / 100 complete',
progressValue: '0%'
},
jobStart: {
type: 'date',
dateText: '30 June 2019, 12:20 PM',
text: '2019-06-30 12:20:00'
},
jobLocation: {
type: 'with-icon',
text: 'Email',
iconClass: 'ion-email',
iconTheme: 'info',
iconSize: '20px'
},
identifier: '24'
},
{
job: {
type: 'text',
text: 'Job One'
},
action: {
type: 'button',
text: 'Default'
},
status: {
type: 'progress',
text: 100,
theme: 'info',
progressText: '100 / 100 complete',
progressValue: '100%'
},
jobStart: {
type: 'date',
dateText: '30 June 2019, 12:17 PM',
text: '2019-06-30 12:17:00'
},
jobLocation: {
type: 'with-icon',
text: 'Warning',
theme: 'warning',
iconClass: 'fa fa-exclamation-triangle'
},
identifier: '25'
},
{
job: {
type: 'text',
text: 'Job Two'
},
action: {
type: 'button',
text: 'Default'
},
status: {
type: 'progress',
text: 12,
theme: 'warning',
progressText: '12 / 100 complete',
progressValue: '12%'
},
jobStart: {
type: 'date',
dateText: '11 Nov 2019, 9:47 AM',
text: '2019-11-11 09:47:00'
},
jobLocation: {
type: 'with-icon',
text: 'Warning',
theme: 'warning',
iconClass: 'fa fa-exclamation-triangle'
},
identifier: '26'
},
{
job: {
type: 'text',
text: 'Job Three'
},
action: {
type: 'button',
text: 'Default'
},
status: {
type: 'progress',
text: 0,
theme: 'danger',
progressText: '0 / 100 complete',
progressValue: '0%'
},
jobStart: {
type: 'date',
dateText: '30 June 2019, 12:20 PM',
text: '2019-06-30 12:20:00'
},
jobLocation: {
type: 'with-icon',
text: 'Warning',
theme: 'warning',
iconClass: 'fa fa-exclamation-triangle'
},
identifier: '27'
},
{
job: {
type: 'text',
text: 'Job One'
},
action: {
type: 'button',
text: 'Default'
},
status: {
type: 'progress',
text: 100,
theme: 'info',
progressText: '100 / 100 complete',
progressValue: '100%'
},
jobStart: {
type: 'date',
dateText: '30 June 2019, 12:17 PM',
text: '2019-06-30 12:17:00'
},
jobLocation: {
type: 'with-icon',
text: 'Notification',
theme: 'success',
iconClass: 'fas fa-bell'
},
identifier: '28'
},
{
job: {
type: 'text',
text: 'Job Two'
},
action: {
type: 'button',
text: 'Default'
},
status: {
type: 'progress',
text: 12,
theme: 'warning',
progressText: '12 / 100 complete',
progressValue: '12%'
},
jobStart: {
type: 'date',
dateText: '11 Nov 2019, 9:47 AM',
text: '2019-11-11 09:47:00'
},
jobLocation: {
type: 'with-icon',
text: 'Notification',
theme: 'success',
iconClass: 'fas fa-bell'
},
identifier: '29'
},
{
job: {
type: 'text',
text: 'Job Three'
},
action: {
type: 'button',
text: 'Default'
},
status: {
type: 'progress',
text: 0,
theme: 'danger',
progressText: '0 / 100 complete',
progressValue: '0%'
},
jobStart: {
type: 'date',
dateText: '30 June 2019, 12:20 PM',
text: '2019-06-30 12:20:00'
},
jobLocation: {
type: 'with-icon',
text: 'Notification',
theme: 'success',
iconClass: 'fas fa-bell'
},
identifier: '30'
}
],
allDataIsLoaded: false,
isLazyLoading: false
},
components: {
pcui_complex_table: PCUIComplexTableComponent,
pcui_spinner: PCUISpinnerPlugin
},
methods: {
onScroll: function (event, atBottom) {
if (atBottom === true && this.allDataIsLoaded === false && this.isLazyLoading === false) {
this.lazyLoadData();
}
},
lazyLoadData: function () {
var self = this;
self.isLazyLoading = true;
self.$refs['lazy-loading-table'].showFooterRow('lazy-loading-spinner');
setTimeout(function () {
self.$refs['lazy-loading-table'].addRows(self.lazyLoadingRows);
self.allDataIsLoaded = true;
setTimeout(function () {
self.$refs['lazy-loading-table'].showFooterRow('all-results');
}, 100);
}, 1000);
}
}
});