Basic Data Table

Bulma style

Bootstrap style

Bulma style

<div id="basicdatatableBulma"></div>

Bootstrap style

<div id="basicdatatableBootstrap"></div>

Rovnaké ako v základnom príklade...

Bulma style

<!-- LINK TO BULMA STYLE -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">

<table class="table is-narrow is-striped is-hoverable is-fullwidth">
	<thead>
		<tr>
			<th>No.</th>
			<th>ID</th>
			<th>Name</th>
			<th>Buttons</th>
		</tr>
	</thead>
	<tbody>
		<tr v-for="(item, index) in pageItems" :key="item.fld_ID">
			<td> {{ index +1 }}. </td>
			<td> {{ item.fld_ID }} </td>
			<td> {{ item.fld_Name }} </td>
			<td>
				<button class="button is-info is-outlined is-small">Button</button>
			</td>
		</tr>
	</tbody>
</table>

Bootstrap style

<!-- LINK TO BOOTSTRAP STYLE -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">

<table class="table table-sm table-striped table-hover">
	<thead>
		<tr>
			<th>No.</th>
			<th>ID</th>
			<th>Name</th>
			<th>Buttons</th>
		</tr>
	</thead>
	<tbody>
		<tr v-for="(item, index) in pageItems" :key="item.fld_ID">
			<td> {{ index +1 }}. </td>
			<td> {{ item.fld_ID }} </td>
			<td> {{ item.fld_Name }} </td>
			<td>
				<button type="button" class="btn btn-outline-info btn-sm">Button</button>
			</td>
		</tr>
	</tbody>
</table>

Bulma style

import basicDataTable from "https://api.pim.sk/api/basic-data-table/bdt.min.mjs"

const bdt1 = new basicDataTable({
	id: "bdtBex",
	selector: "#basicdatatableBulma",
	items: data,
	template: template
});

Bootstrap style

import basicDataTable from "https://api.pim.sk/api/basic-data-table/bdt.min.mjs"

const bdt2 = new basicDataTable({
	id: "bdtBex",
	selector: "#basicdatatableBootstrap",
	items: data,
	template: template
});

Example Bulma Example Bootstrap