Basic Data Table

<!-- SEARCHING -->
<p class="field">
	<div class="control has-icons-left has-icons-right">
		<bdt-filter @use-filter="setFilter" @reset-filter="resetFilter" title="Inline Filter" class="input" placeholder="search..." />
		<span class="icon is-small is-left">
			<i class="fa fa-user"></i>
		</span>
		<span class="icon is-small is-right">
			<i class="fa fa-magnifying-glass"></i>
		</span>
	</div>
</p>
<!-- TABLE WITH ref="bdt" -->
<table ref="bdt" border="1" class="table table-sm table-striped is-hoverable is-fullwidth">
	<!-- FIX CELL WIDTH -->
	<thead ref="toFix">
		<tr>
			<th align="right" width="100px">No.</th>
			<!-- SHOW/HIDE, SORT -->
			<th data-show="fld_ID,true" v-if="isShow('fld_ID')"><bdt-sort type="number" field="fld_ID" @sorting="sorting">ID</bdt-sort></th>
			<th data-show="fld_Name,true" v-if="isShow('fld_Name')">
				<bdt-sort field="fld_Name" @sorting="sorting">Name</bdt-sort>
			</th>
			<th data-show="fld_Ord,true" v-if="isShow('fld_Ord')" align="center">Ord</th>
			<th width="50px">
				<!-- CHECKBOX ALL -->
				<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="right"> {{ ((page -1) * limit) +index +1 }}. </td>
			<td v-if="isShow('fld_ID')">{{ item.fld_ID }} </td>
			<td v-if="isShow('fld_Name')">
				<a href="#" @click.prevent="setFilter({fld_Name:[{k:'fld_Name', v:item.fld_Name}]})" title="setFilter(...)">{{ item.fld_Name }}</a>
			</td>
			<td v-if="isShow('fld_Ord')" align="center"> {{ item.fld_Ord }} </td>
			<td align="center">
				<!-- CHECKBOX ROW -->
				<input type="checkbox" @change="checkedRow( index, 'fld_ID' )" v-model="item.checked">
			</td>
		</tr>
	</tbody>
</table>

<div class="row middle">
	<div class="4u">
		<div class="btn-group">
			<!-- LIMITS & PAGES -->
			<bdt-limit :limit="limit" @set-limit="setLimit" class="select" width="3rem" />
			<!-- SHOW / HIDE CONFIG BUTTON -->
			<bdt-shows-config :shows="shows" class="btn btn-default btn-sm" title="Columns"><i class="fa fa-gear"></i></bdt-shows-config>
			<!-- SHOW / HIDE CHECKED ROWS -->
			<button :disabled="counts.checkedItems ? false : true" @click.prevent="addFilter({checked: [{'k': 'checked', 'v': true, 't': 'boolean'}]})" class="btn btn-sm btn-default" title="Show Checked"><i class="fa fa-check-square-o"></i></button>
			<!-- UNCHECKED ROWS -->
			<button v-if="counts.checkedItems" @click.prevent="unchecked()" class="btn btn-sm btn-default" title="unChecked All"><i class="fa fa-check-square-o has-text-danger"></i></button>
			<!-- RESET FILTER -->
			<button v-if="isFilter" @click.prevent="resetFilter()" class="btn btn-sm btn-danger" title="Reset Filter"><i class="fa fa-ban"></i> Reset Filter</button>
		</div>
	</div>
	<div class="4u center">
		<!-- COMPUTING -->
		<small title="Page">{{ page }}</small> /
		<small title="Pages">{{ pages }}</small> &bullet;
		<small title="Items">{{ counts.filteredItems }}</small> /
		<small title="Checked">{{ counts.checkedItems }}</small>
	</div>
	<div class="4u right">
		<!-- PAGINATION -->
		<bdt-pagination
			width="3rem"
			template="bootstrap"
			:limit="limit" :page="page" :pages="pages" :btn-final="true" :btn-once="true"
			@set-page="setPage" @set-limit="setLimit" />
	</div>
</div>