BDT - function

Basic Data Table

v 2.1.2

User Defined Function

Hint: After editing, it is possible to use ".item=..." to change only 1 row in the table. (Instead of using an update of the entire table.) 

<div id="basicdatatable"></div>
<table border="1" width="100%" cellspacing="0" cellpadding="3">
	<thead>
		<tr>
			<th>No.</th>
			<th>ID</th>
			<th>Name</th>
			<th>fn</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">

<!-- USER FUNCTION -->
<button @click="funcs('myEditFunction', item, index)">Edit</button>

			</td>
		</tr>
	</tbody>
</table>

<!-- PAGINATION -->
<bdt-pagination width="2.5em" :limit="limit" :page="page" :pages="pages" :btn-final="true" :btn-once="true" @set-page="setPage" @set-limit="setLimit" />
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,
	// user defined function
	funcs:
		{
			myEditFunction: ( ary, index ) =>
			{
				alert( `ID = ${ary.fld_ID} \nIndex of row = ${index}\nFor any data look console...` )
				console.log( 'index: ', index )
				console.table( 'ary: ', ary )
				// Update only one row in the table
				ary.fld_Name += ' ...is change'
				bdt.item = { i:index, k:'fld_ID', v:ary }
				// or
				// bdt.item = { k:'fld_ID', v:ary }
				// or
				// bdt.item = { k:'fld_ID', v:{fld_Name:ary.fld_Name} }
			}
		}
});