vuetable-2
Version:
Datatable component for Vue 2.x
56 lines • 4.24 kB
HTML
<html lang=en><head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><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><link href=/static/css/app.dec0d45e43e30d6c68b0b7c6939449a5.css rel=stylesheet></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><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 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:initialized=onInitialized @vuetable:data-reset=onDataReset></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><settings-modal ref=settingsModal :vuetable-fields=vuetableFields></settings-modal></div></div></div></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><script type=text/javascript src=/static/js/manifest.eedad7dc534e20b5fb5e.js></script><script type=text/javascript src=/static/js/vendor.726f455bb38c7b1a6039.js></script><script type=text/javascript src=/static/js/app.8a35a4ff3c75994f34dd.js></script></body></html>