P
CUI v1.20.1177
Documentation and examples in using Simple 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/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/Components/Tables/js/SimpleTable.js"></script>
<div class="pcui">
<div id="pull-to-refresh-simple-table">
<div class="sample-table-container">
<div class="table-loading-spinner" style="display: none;">
<pcui_spinner size="47"></pcui_spinner>
</div>
<pcui_simple_table v-bind:rows="rows"
v-bind:on-pull-to-refresh="onPullToRefresh"
pull-to-refresh-timeout="1000"
ref="pull-to-refresh-simple-table">
</pcui_simple_table>
</div>
</div>
</div>
.sample-table-container {
height: 470px;
border: 1px solid #eeeeee;
}
new Vue({
el: '#pull-to-refresh-simple-table',
data: {
rows: [
{
identifier: '1',
mainColumn: {
mainText: '304042',
additionalText: '3/28 High Street, Glenholme, Rotorua 3012',
subItems: [
{
type: 'progress',
theme: 'success',
text: '6/6 Ready for work',
value: '50'
},
{
type: 'text',
text: '10 Reference text goes here',
formatting: 'italic'
}
]
},
subColumns: [
{
type: 'text',
name: 'Created by',
text: 'Jacinta 01 BurnsdottirDieWalkurie-oftheSuperLongAndTruncatingStringwithEllipsesAppe'
},
{
type: 'text',
name: 'Created on',
text: '24 Oct 2017, 03:12pm'
},
{
type: 'text',
name: 'Job Start',
text: '11 Nov 2017'
},
{
type: 'button',
text: 'View'
}
]
},
{
identifier: '2',
mainColumn: {
mainText: '304045',
additionalText: '8 Bond Street, Te Aro, Wellington 6012',
subItems: [
{
type: 'progress',
theme: 'success',
text: '3/6 Ready for work',
value: '50'
},
{
type: 'text',
text: '01 Reference text goes here',
formatting: 'italic'
}
]
},
subColumns: [
{
type: 'text',
name: 'Created by',
text: 'Jacinta 09 BurnsdottirDieWalkurie-oftheSuperLongAndTruncatingStringwithEllipsesAppe'
},
{
type: 'text',
name: 'Created on',
text: '24 Oct 2017, 03:09pm'
},
{
type: 'text',
name: 'Job Start',
text: '02 Nov 2017'
},
{
type: 'button',
text: 'View'
}
]
},
{
identifier: '3',
mainColumn: {
mainText: '304044',
additionalText: '172 Queens Drive, Queens Park, Invercargill 9810',
subItems: [
{
type: 'progress',
theme: 'success',
text: '0/6 Ready for work',
value: '50'
},
{
type: 'text',
text: '09 Reference text goes here',
formatting: 'italic'
}
]
},
subColumns: [
{
type: 'text',
name: 'Created by',
text: 'Jacinta 04 BurnsdottirDieWalkurie-oftheSuperLongAndTruncatingStringwithEllipsesAppe'
},
{
type: 'text',
name: 'Created on',
text: '24 Oct 2017, 03:40pm'
},
{
type: 'text',
name: 'Job Start',
text: '10 Nov 2017'
},
{
type: 'button',
text: 'View'
}
]
},
{
identifier: '4',
mainColumn: {
mainText: '302893',
additionalText: '10 Bond Street, Te Aro, Wellington 6011',
subItems: [
{
type: 'progress',
theme: 'success',
text: '1/6 Ready for work',
value: '50'
},
{
type: 'text',
text: '04 Reference text goes here',
formatting: 'italic'
}
]
},
subColumns: [
{
type: 'text',
name: 'Created by',
text: 'Jacinta 02 BurnsdottirDieWalkurie-oftheSuperLongAndTruncatingStringwithEllipsesAppe'
},
{
type: 'text',
name: 'Created on',
text: '24 Oct 2017, 03:21pm'
},
{
type: 'text',
name: 'Job Start',
text: '30 Nov 2017'
},
{
type: 'button',
text: 'View'
}
]
},
{
identifier: '5',
mainColumn: {
mainText: '302892',
additionalText: '257/95 Wineberry Lane, Hairini, Tauranga 3112',
subItems: [
{
type: 'progress',
theme: 'success',
text: '4/6 Ready for work',
value: '50'
},
{
type: 'text',
text: '02 Reference text goes here',
formatting: 'italic'
}
]
},
subColumns: [
{
type: 'text',
name: 'Created by',
text: 'Jacinta 05 BurnsdottirDieWalkurie-oftheSuperLongAndTruncatingStringwithEllipsesAppe'
},
{
type: 'text',
name: 'Created on',
text: '24 Oct 2017, 03:22pm'
},
{
type: 'text',
name: 'Job Start',
text: '22 Nov 2017'
},
{
type: 'button',
text: 'View'
}
]
},
{
identifier: '6',
mainColumn: {
mainText: '304041',
additionalText: '257/95 Wineberry Lane, Hairini, Tauranga 3119',
subItems: [
{
type: 'progress',
theme: 'success',
text: '5/6 Ready for work',
value: '50'
},
{
type: 'text',
text: '05 Reference text goes here',
formatting: 'italic'
}
]
},
subColumns: [
{
type: 'text',
name: 'Created by',
text: 'Jacinta 03 BurnsdottirDieWalkurie-oftheSuperLongAndTruncatingStringwithEllipsesAppe'
},
{
type: 'text',
name: 'Created on',
text: '24 Oct 2017, 03:55pm'
},
{
type: 'text',
name: 'Job Start',
text: '05 Nov 2017'
},
{
type: 'button',
text: 'View'
}
]
},
{
identifier: '7',
mainColumn: {
mainText: '304040',
additionalText: '10 Bond Street, Te Aro, Wellington 6014',
subItems: [
{
type: 'progress',
theme: 'success',
text: '1/9 Ready for work',
value: '50'
},
{
type: 'text',
text: '03 Reference text goes here',
formatting: 'italic'
}
]
},
subColumns: [
{
type: 'text',
name: 'Created by',
text: 'Jacinta 07 BurnsdottirDieWalkurie-oftheSuperLongAndTruncatingStringwithEllipsesAppe'
},
{
type: 'text',
name: 'Created on',
text: '24 Oct 2017, 03:13pm'
},
{
type: 'text',
name: 'Job Start',
text: '04 Nov 2017'
},
{
type: 'button',
text: 'View'
}
]
},
{
identifier: '8',
mainColumn: {
mainText: '304039',
additionalText: '172 Queens Drive, Queens Park, Invercargill 9814',
subItems: [
{
type: 'progress',
theme: 'success',
text: '0/9 Ready for work',
value: '50'
},
{
type: 'text',
text: '07 Reference text goes here',
formatting: 'italic'
}
]
},
subColumns: [
{
type: 'text',
name: 'Created by',
text: 'Jacinta 08 BurnsdottirDieWalkurie-oftheSuperLongAndTruncatingStringwithEllipsesAppe'
},
{
type: 'text',
name: 'Created on',
text: '24 Oct 2017, 03:57pm'
},
{
type: 'text',
name: 'Job Start',
text: '17 Nov 2017'
},
{
type: 'button',
text: 'View'
}
]
},
{
identifier: '9',
mainColumn: {
mainText: '302894',
additionalText: '8 Bond Street, Te Aro, Wellington 6013',
subItems: [
{
type: 'progress',
theme: 'success',
text: '4/9 Ready for work',
value: '50'
},
{
type: 'text',
text: '08 Reference text goes here',
formatting: 'italic'
}
]
},
subColumns: [
{
type: 'text',
name: 'Created by',
text: 'Jacinta 06 BurnsdottirDieWalkurie-oftheSuperLongAndTruncatingStringwithEllipsesAppe'
},
{
type: 'text',
name: 'Created on',
text: '24 Oct 2017, 03:38pm'
},
{
type: 'text',
name: 'Job Start',
text: '28 Nov 2017'
},
{
type: 'button',
text: 'View'
}
]
},
{
disabled: true,
identifier: '10',
mainColumn: {
mainText: '302891',
additionalText: '3/28 High Street, Glenholme, Rotorua 3010',
subItems: [
{
type: 'progress',
theme: 'success',
text: '6/9 Ready for work',
value: '50'
},
{
type: 'text',
text: '06 Reference text goes here',
formatting: 'italic'
}
]
},
subColumns: [
{
type: 'text',
name: 'Created by',
text: 'Jacinta 10 BurnsdottirDieWalkurie-oftheSuperLongAndTruncatingStringwithEllipsesAppe'
},
{
type: 'text',
name: 'Created on',
text: '24 Oct 2017, 03:26pm'
},
{
type: 'text',
name: 'Job Start',
text: '16 Nov 2017'
},
{
type: 'button',
text: 'View'
}
]
}
]
},
components: {
pcui_simple_table: PCUISimpleTableComponent,
pcui_spinner: PCUISpinnerPlugin
},
methods: {
onPullToRefresh: function () {
console.log('Pull-to-refresh...');
}
},
});