BDT - show-hide-cell

Basic Data Table

v 2.1.0

Show / Hide Cell

Hint: Use show/hide and reload page. 

<div id="basicdatatable"></div>
<table border="1" width="100%" cellspacing="0" cellpadding="3">
	<thead>
		<tr>
			<th>No.</th>
			<th>ID</th>
			<!-- SHOW / HIDE CELL in thead -->
			<th v-if="isShow('fld_Name')"> Name </th>
			<th v-if="isShow('fld_Date_Iso')"> Date </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>
			<!-- SHOW / HIDE CELL in tbody -->
			<td v-if="isShow('fld_Name')"> {{ item.fld_Name }} </td>
			<td v-if="isShow('fld_Date_Iso')"> {{ item.fld_Date_Iso }} </td>
		</tr>
	</tbody>
</table>

<br>

<!-- SHOW / HIDE CONFIG BUTTON -->
Show / Hide Config:
	<bdt-shows-config :shows="shows" class="btn btn-default" title="Stlpce"><i class="fa fa-gear"></i></bdt-shows-config>
import basicDataTable from "https://api.pim.sk/api/basic-data-table/bdt.min.mjs"

const bdt = new basicDataTable({
	id: "bdtBex",
	selector: "#basicdatatable",
	items: data,
	template: template,
	// declare show / hide collumns
	shows: [
		{field:"fld_Name", show:true, label:"Nazov"},
		{field:"fld_Date_Iso", show:false, label:"Datum"},
	],
});