vue3-vuetable
Version:
Datatable component for Vue 3.x
161 lines (146 loc) • 6.26 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<title>vue2</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css">
<style type="text/css">
.ui.vertical.stripe h3 {
font-size: 2em;
}
.secondary.pointing.menu .toc.item {
display: none;
}
.vuetable {
margin-top: 1em ;
}
.vuetable-wrapper.ui.basic.segment {
padding: 0em;
}
.vuetable button.ui.button {
padding: .5em .5em;
font-weight: 400;
}
.vuetable button.ui.button i.icon {
margin: 0;
}
.vuetable td i.handle-icon:hover {
cursor: pointer;
}
.vuetable-actions {
width: 15%;
padding: 12px 0px;
text-align: center;
}
.vuetable-pagination {
background: #f9fafb ;
}
.vuetable-pagination-info {
margin-top: auto;
margin-bottom: auto;
}
.highlight {
background-color: yellow;
}
.vuetable-detail-row {
height: 200px;
}
.detail-row {
margin-left: 40px;
}
.expand-transition {
transition: all .5s ease;
}
.expand-enter, .expand-leave {
height: 0;
opacity: 0;
}
tr.odd {
background-color: #e6f5ff;
}
body {
overflow-y: scroll;
}
</style>
</head>
<body>
<div class="ui vertical segment">
<div class="ui container">
<div id="app" class="ui vertical stripe segment">
<div id="content" class="ui basic segment">
<h3 class="ui header">List of Users</h3>
<div class="ui grid">
<div class="ui left aligned nine wide column">
<div class="ui labeled icon input">
<div class="ui label">Search:</div>
<input v-model="searchFor" class="ui input" @keyup.enter="setFilter">
<i class="search icon"></i>
</div>
<button class="ui button primary" @click="setFilter">Go</button>
<button class="ui button" @click="resetFilter">Reset</button>
</div>
<div class="ui right aligned seven wide column">
<button class="ui basic button" id="settingsBtn" @click="showSettingsModal">
<i class="setting icon"></i>
Settings
</button>
</div>
</div><!-- ui grid -->
<div :class="[{'vuetable-wrapper ui basic segment': true}, loading]">
<vuetable ref="vuetable"
api-url="http://vuetable.ratiw.net/api/users"
:fields="fields"
:table-height="tableHeight"
:transform="transform"
pagination-path="pagination"
:sort-order="sortOrder"
:multi-sort="multiSort"
:per-page="perPage"
:append-params="moreParams"
detail-row-component="my-detail-row"
detail-row-transition="expand"
:row-class="rowClassCB"
@vuetable:pagination-data="onPaginationData"
@vuetable:load-success="onLoadSuccess"
@vuetable:loading="showLoader"
@vuetable:loaded="hideLoader"
@vuetable:cell-clicked="onCellClicked"
@vuetable:cell-dblclicked="onCellDoubleClicked"
@vuetable:cell-rightclicked="onCellRightClicked"
@vuetable:initialized="onInitialized"
@vuetable:data-reset="onDataReset"
@vuetable:field-event="onFieldEvent"
@vuetable:header-event="onHeaderEvent"
>
<template v-slot:slot-actions="props">
<div slot="slot-actions">
<button class="ui red button" @click="onActionClicked('view-item', props.rowData)"><i class="zoom icon"></i></button>
<button class="ui blue button" @click="onActionClicked('edit-item', props.rowData)"><i class="edit icon"></i></button>
<button class="ui green button" @click="onActionClicked('delete-item', props.rowData)"><i class="delete icon"></i></button>
</div>
</template>
</vuetable>
<div class="vuetable-pagination ui bottom attached segment grid">
<vuetable-pagination-info ref="paginationInfo"
:info-template="paginationInfoTemplate"
></vuetable-pagination-info>
<component :is="paginationComponent" ref="pagination"
@vuetable-pagination:change-page="onChangePage"
></component>
</div>
</div><!-- vuetable-wrapper -->
<settings-modal ref="settingsModal"
:vuetable-fields="vuetableFields"
:field-prefix="fieldPrefix"
></settings-modal>
</div><!-- content -->
</div><!-- app -->
</div><!-- ui container -->
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js"></script>
</body>
</html>