Basic Data Table

<table border="1" width="100%" cellspacing="0" cellpadding="3">
	<thead>
		<tr>
			<th>No.</th>
			<th>ID</th>
			<th>Name</th>
			<th><input type="checkbox" @change="checkedAll('fld_ID', checkAll)" v-model="checkAll" /></th>
		</tr>
	</thead>
	<tbody>
		<tr v-for="(item, index) in pageItems" :key="item.fld_ID">
			<td align="center"> {{ ((page -1) * limit) +index +1 }}. </td>
			<td> {{ item.fld_ID }} </td>
			<td> {{ item.fld_Name }} </td>
			<td align="center"> <input type="checkbox" @change="checkedRow( index, 'fld_ID' )" v-model="item.checked"> </td>
		</tr>
	</tbody>
</table>

<br>

<!-- CALCULATE -->
<ul style="columns:2 calc(300px - 1em); max-width:600px;">
	<li><b>Page:</b>
		<ul>
			<!-- PAGE -->
			<li>All pages:     {{ pages }}</li>
			<li>Actual page:   {{ page }}</li>
			<li>Limit of page: {{ limit }}</li>
		</ul>
		<br>
	</li>
	<li><b>Data (Items):</b>
		<ul>
			<!-- COUNTS ITEMS -->
			<li>All:      {{ counts.items }}</li>
			<li>Filtered: {{ counts.filteredItems }}</li>
			<li>On Page:  {{ counts.pageItems }}</li>
			<li>Checked:  {{ counts.checkedItems }}</li>
		</ul>
	</li>
	<li><b>SUM (Items / ID):</b>
		<ul>
			<!-- SUM OF COLUMNS -->
			<!-- A better method is an indirect query with debounce  -->
			<li>All:      <span :call="sum('origItems', 'fld_ID', 'sumOID')"> {{ tmp.sumOID }}</span></li>
			<li>Filtered: <span :call="sum('filteredItems', 'fld_ID', 'sumFID')"> {{ tmp.sumFID }}</span></li>
			<li>On Page:  <span :call="sum('pageItems', 'fld_ID', 'sumPID')"> {{ tmp.sumPID }}</span></li>
			<li>Checked:  <span :call="sum('checkedItems', 'fld_ID', 'sumCID')"> {{ tmp.sumCID }}</span></li>
		</ul>
	</li>
	<li><b>AVG (Items / ID):</b>
		<ul>
			<!-- AVERAGE OF COLUMNS -->
			<!-- A better method is an indirect query with debounce  -->
			<li>All:      <span :call="avg('origItems', 'fld_ID', 'avgOID')"> {{ tmp.avgOID }}</span></li>
			<li>Filtered: <span :call="avg('filteredItems', 'fld_ID', 'avgFID')"> {{ tmp.avgFID }}</span></li>
			<li>On Page:  <span :call="avg('pageItems', 'fld_ID', 'avgPID')"> {{ tmp.avgPID }}</span></li>
			<li>Checked:  <span :call="avg('checkedItems', 'fld_ID', 'avgCID')"> {{ tmp.avgCID }}</span></li>
		</ul>
	</li>
</ul>