© 2023. lead alliance.
All Rights Reserved.
Inklusive Pagination, Sortierung, Selektierung von und Interaktion mit Rows, Anzahl per Page, ausklappbarer Information, Modal-Integration, Buttons, Icons und Dropdowns.
{{ infoModal.content }}
Source Code
<div id="app">
<template >
<b-container fluid class="pd-0">
<!-- User Interface controls 1 -->
<b-row>
<b-col class="mg-b-15">
<b-form-group
label="Per page"
label-cols-sm="auto"
label-cols-md="auto"
label-cols-lg="auto"
label-align-sm="left"
label-size="sm"
label-for="perPageSelect"
class="mb-0"
>
<b-form-select
v-model="perPage"
id="perPageSelect"
size="sm"
:options="pageOptions"
class="wd-60 align-self-start"
></b-form-select>
</b-form-group>
</b-col>
</b-row>
<div class="row mg-b-5">
<div class="col-auto">
<b-button
class="d-inline-flex icons_primary2_la"
size="sm"
@click="selectAllRows"
data-toggle="tooltip" data-placement="top" title="Alle selektieren">
<i class="glyphicons-basic-153-square-checkbox"></i>
</b-button>
<b-button
class=" d-inline-flex icons_primary2_la"
size="sm"
@click="clearSelected"
data-toggle="tooltip" data-placement="top" title="Selektion aufheben">
<i class="glyphicons-basic-156-square-indeterminate"></i>
</b-button>
<b-button
class=" d-inline-flex icons_primary2_la"
size="sm"
@click=""
data-toggle="tooltip" data-placement="top" title="Selektion Bearbeiten">
<i class="glyphicons-basic-31-pencil"></i>
</b-button>
<b-button class=" d-inline-flex icons_warning_la"
size="sm" @click=""
data-toggle="tooltip" data-placement="top" title="Selektion löschen"
><i class="glyphicons-basic-17-bin"></i></b-button>
</div>
<div class="col-auto bd-l">
<b-button class="d-inline-flex icons_primary2_la"
size="sm" @click=""
data-toggle="tooltip" data-placement="top" title="Neue Gruppe hinzufügen"
><i class="glyphicons-filetypes-34-file-plus"></i></b-button>
</div>
</div>
<!-- Main table element -->
<b-table
ref="selectableTable"
selectable
:select-mode="selectMode"
outlined
bordered
hover
show-empty
small
stacked="md"
:items="items"
:fields="fields"
:current-page="currentPage"
:per-page="perPage"
:filter="filter"
:filter-included-fields="filterOn"
:sort-by.sync="sortBy"
:sort-desc.sync="sortDesc"
:sort-direction="sortDirection"
@filtered="onFiltered"
@row-selected="onRowSelected"
>
<template v-slot:cell(name)="row">
{{ row.value.first }} {{ row.value.last }}
</template>
<template v-slot:cell(actions)="row">
<div class="btn-grp">
<b-button class="btn-light d-inline-flex mr-1" size="sm" @click="info(row.item, row.index, $event.target)">Info modal</b-button>
<b-button class="btn-primary d-inline-flex mr-1" size="sm" @click="row.toggleDetails">{{ row.detailsShowing ? 'Hide' : 'Show' }} Details</b-button>
</div>
</template>
<a href="https://www.sorana.de/v2/admin/partners/12230/show" class="mg-l-8 btn l-ht-1 d-inline-flex icons_primary2_la btn-secondary btn-sm"><i class="glyphicons-halflings-25-eye"></i></a>
<template v-slot:row-details="row">
<b-card>
<ul>
<li v-for="(value, key) in row.item" :key="key">{{ key }}: {{ value }}</li>
</ul>
</b-card>
</template>
<template v-else>
<span aria-hidden="true"> </span>
<span class="sr-only">Not selected</span>
</template>
</b-table>
<div class="row mg-t-5">
<div class="col-auto">
<b-button
class="d-inline-flex icons_primary2_la"
size="sm"
@click="selectAllRows"
data-toggle="tooltip" data-placement="top" title="Alle selektieren">
<i class="glyphicons-basic-153-square-checkbox"></i>
</b-button>
<b-button
class=" d-inline-flex icons_primary2_la"
size="sm"
@click="clearSelected"
data-toggle="tooltip" data-placement="top" title="Selektion aufheben">
<i class="glyphicons-basic-156-square-indeterminate"></i>
</b-button>
<b-button
class=" d-inline-flex icons_primary2_la"
size="sm"
@click=""
data-toggle="tooltip" data-placement="top" title="Selektion Bearbeiten">
<i class="glyphicons-basic-31-pencil"></i>
</b-button>
<b-button class=" d-inline-flex icons_warning_la"
size="sm" @click=""
data-toggle="tooltip" data-placement="top" title="Selektion löschen"
><i class="glyphicons-basic-17-bin"></i></b-button>
</div>
<div class="col-auto bd-l">
<b-button class="d-inline-flex icons_primary2_la"
size="sm" @click=""
data-toggle="tooltip" data-placement="top" title="Neue Gruppe hinzufügen"
><i class="glyphicons-filetypes-34-file-plus"></i></b-button>
</div>
<div class="col-md btn-grp resp-mg-t-20">
<button class="btn btn-light " role="button">Lorem Ipsum</button>
<button class="btn btn-primary " >Lorem Ipsum</button>
</div>
</div>
<!-- User Interface controls 2 -- Pagination -->
<b-row>
<b-col class="my-1">
<b-pagination
v-model="currentPage"
:total-rows="totalRows"
:per-page="perPage"
align="right"
size="sm"
class="mg-t-20"
></b-pagination>
</b-col>
</b-row>
<!-- Info modal -->
<b-modal :id="infoModal.id" :title="infoModal.title" ok-only @hide="resetInfoModal">
<pre>{{ infoModal.content }}</pre>
</b-modal>
</b-container>
</template>
</div>