Complex (Kitchen) Table

Documentation and examples in using Complex Table with PCUI

Pull to Refresh

If the table needs to do a refresh and not affecting the whole page where it is placed, Pull-to-refresh is a way to go. Scroll to the top until the first row of the table is visible and swipe down to activiate Pull-to-refresh.

Copied successfully!

<div class="pcui">
 	<div id="pull-to-refresh-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"
					    pull-to-refresh-timeout="1000"
					    emulate-touch="true">
			</pcui_complex_table>
		</div>
 	</div>
 </div>

Copied successfully!

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

Copied successfully!

new Vue({
	el: '#pull-to-refresh-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,
		pcui_spinner: PCUISpinnerPlugin
	} 
});