Simple (Dining) Table

Documentation and examples in using Simple Table with PCUI

Note: Styling, behavior, and/or layout may look different in other browsers, especially in Internet Explorer but the component is still functional and doesn't look buggy.

Include in your HTML

Copied successfully!

<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>

Default

Default table contains text-only table cells.

Copied successfully!

<div class="pcui"> 
	<div id="default-simple-table"> 
		<div class="sample-table-container"> 
			<pcui_simple_table v-bind:rows="rows"> 
			</pcui_simple_table> 
		</div> 
	</div> 
</div>

Copied successfully!

.sample-table-container {
	height: 470px; 
	border: 1px solid #eeeeee; 
}

Copied successfully!

new Vue({
	el: '#default-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 
	} 
});

Single Selection

Table supports selection of single row. Click a specific row to select and re-click a selected row to unselect. Clicking other row will also unselect the already-selected row and will transfer the selection to the clicked row.

Copied successfully!

<div class="pcui"> 
	<div id="single-selection-simple-table"> 
		<div class="sample-table-container"> 
			<pcui_simple_table v-bind:rows="rows"
					   use-selection="true"> 
			</pcui_simple_table> 
		</div> 
	</div> 
</div>

Copied successfully!

.sample-table-container {
	height: 470px; 
	border: 1px solid #eeeeee; 
}

Copied successfully!

new Vue({
	el: '#single-selection-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 
	} 
});

Multiple Selection

Table also supports selection of multiple rows. Click the checkbox at the left-most part of specific row to select and re-click the checkbox to unselect.

Copied successfully!

<div class="pcui"> 
	<div id="multiple-selection-simple-table"> 
		<div class="sample-table-container"> 
			<pcui_simple_table v-bind:rows="rows"
					   has-checkbox="true"> 
			</pcui_simple_table> 
		</div> 
	</div> 
</div>

Copied successfully!

.sample-table-container {
	height: 470px; 
	border: 1px solid #eeeeee; 
}

Copied successfully!

new Vue({
	el: '#multiple-selection-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 
	} 
});

Sorting

Table can be sorted at specific columns and identifiers using external control.

Sort by

Copied successfully!

<div class="pcui"> 
	<div id="sorting-simple-table"> 
		<div class="sample-table-container"> 
			<pcui_simple_table v-bind:rows="rows"
					   ref="sorting-simple-table"> 
			</pcui_simple_table> 
		</div> 
	</div> 
</div>

Copied successfully!

.sample-table-container {
	height: 470px; 
	border: 1px solid #eeeeee; 
}

Copied successfully!

var sortingSimpleTableDOM = new Vue({
	el: '#sorting-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 
	} 
});

Copied successfully!

<VueDOMInstance>.$refs['table-component-identifier'].sort({
	column: <'main | sub'>, 
	part: <'main-text | additional-text | sub-item'>, 
	index: <0-n>, 
	order: <'asc | desc'> 
});

// To sort table by Job Number in descending order 
sortingSimpleTableDOM.$refs['sorting-simple-table'].sort({
	column: 'main', 
	part: 'main-text', 
	order: 'desc'
});

// To sort table by Reference in ascending order 
sortingSimpleTableDOM.$refs['sorting-simple-table'].sort({
	column: 'main', 
	part: 'sub-item', 
	index: 1, 
	order: 'asc'
});

// To sort table by Job Start in ascending order 
sortingSimpleTableDOM.$refs['sorting-simple-table'].sort({
	column: 'sub', 
	index: 2, 
	order: 'asc'
});

Lazy Loading

To prevent delay or lags due to bulk loading of table rows at once, Lazy Loading can be helpful. It lets table rows to be added on demand by scrolling at the bottom-most part of the table.

Select all

Copied successfully!

<div class="pcui"> 
	<div id="lazy-loading-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-scroll="onScroll"
					   has-checkbox="true"
					   ref="lazy-loading-simple-table"> 
			</pcui_simple_table> 
		</div> 
	</div> 
</div>

Copied successfully!

.sample-table-container {
	height: 470px; 
	border: 1px solid #eeeeee; 
}

Copied successfully!

new Vue({
	el: '#lazy-loading-simple-table', 
	data: {
		allDataIsLoaded: false, 
		isLazyLoading: false, 
		lazyLoadingRowData: [
			{
				identifier: '11', 
				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: '12', 
				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: '13', 
				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: '14', 
				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: '15', 
				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: '16', 
				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: '17', 
				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: '18', 
				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: '19', 
				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: '20', 
				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'
					} 
				] 
			} 
		], 
		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: {
		lazyLoadData: function () {
			var self = this; 
 
			self.isLazyLoading = true; 
			self.$refs['lazy-loading-simple-table'].showFooterRow('lazy-loading-spinner'); 
 
			setTimeout(function () {
				self.$refs['lazy-loading-simple-table'].addRows(self.lazyLoadingRowData); 
				self.allDataIsLoaded = true; 
 
				setTimeout(function () {
					self.$refs['lazy-loading-simple-table'].showFooterRow('all-results'); 
				}, 100); 
			}, 1000); 
		}, 
		onScroll: function (event, atBottom) {
			if (atBottom === true && this.allDataIsLoaded === false && this.isLazyLoading === false) {
				this.lazyLoadData(); 
			} 
		} 
	} 
});

Note: Lazy Loading workflow is not working consistently in some Android devices using Chrome 76.0.3809.x and deprioritized the fix which is aligned with Jasminn. However, fix can be done without the need of re-integration.

Pull to Refresh

Table that supports Pull-to-refresh functionality can be viewed in this link.