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
});