vuetable simple code / simple source code / vuetable2 / vuejs table library / vue js / vuetable-2 사용법 / vuetable-2 에서 template 사용 / custom column 사용 /custom field 사용 / howto /search bar
vuetable-2 사용
아래 source code 로 동작을 확인할 수 있다.
여기서는 view 를 확인할 수 있는 환경이 되어 있다고 가정한다.
설치
npm i vuetable-2예제 코드
아래 예제코드를 사용하면 바로 동작을 확인할 수 있다. 자세한 사항은 다음 link 를 참고하자.
- Vuetable-2 - CodeSandbox:Field Slot 의 문법은 틀렸다. 아래 code 에서는 수정되어 있으니 참고하자.
- vuetable-2-tutorial/App.vue at master · ratiw/vuetable-2-tutorial · GitHub : 여기 예제가 좀 더 정확한 방법을 알려준다.
<template>
<div>
<vuetable
ref="vuetable"
api-url="https://vuetable.ratiw.net/api/users"
:fields="fields"
:sort-order="sortOrder"
data-path="data"
:per-page="5"
pagination-path=""
@vuetable:pagination-data="onPaginationData"
>
<template slot="gender" scope="props">
<span v-if="props.rowData.gender === 'M'" class="ui teal label"
><i class="large man icon"></i>Male</span
>
<span v-else class="ui pink label"
><i class="large woman icon"></i>Female</span
>
</template>
</vuetable>
<div class="pagination ui basic segment grid">
<vuetable-pagination-info ref="paginationInfo"></vuetable-pagination-info>
<vuetable-pagination
ref="pagination"
@vuetable-pagination:change-page="onChangePage"
></vuetable-pagination>
</div>
</div>
</template>
<script>
import Vuetable from "vuetable-2";
import VuetablePagination from "vuetable-2/src/components/VuetablePagination";
import VuetablePaginationInfo from "vuetable-2/src/components/VuetablePaginationInfo";
export default {
name: "App",
data: function () {
return {
fields: [
{
name: "name",
title: '<i class="grey user outline icon"></i>Name',
width: "20%",
sortField: "name",
},
{
name: "email",
title: '<i class="grey mail outline icon"></i>Email',
width: "20%",
sortField: "email",
},
{
name: "birthdate",
title: '<i class="grey birthday icon"></i>Birthdate',
width: "15%",
formatter: (value) => {
return value === null ? "" : "0000-12-31";
},
},
{
name: "__slot:gender",
title: '<i class="grey heterosexual icon"></i>Gender',
titleClass: "center aligned",
dataClass: "center aligned",
width: "15%",
},
{
name: "salary",
title: '<i class="grey money icon"></i>Salary',
titleClass: "center aligned",
dataClass: "right aligned",
width: "15%",
formatter: (value) => value,
sortField: "salary",
},
],
sortOrder: [
{
field: "email",
direction: "asc",
},
],
};
},
components: {
// @ref: https://www.vuetable.com/guide/#features
Vuetable,
VuetablePagination,
VuetablePaginationInfo,
},
methods: {
onPaginationData(paginationData) {
this.$refs.pagination.setPaginationData(paginationData);
this.$refs.paginationInfo.setPaginationData(paginationData);
},
onChangePage(page) {
this.$refs.vuetable.changePage(page);
},
},
};
</script>server data format
기본은 아래와 같은 모습이다.
{
"links": {
"pagination": {
"total": 50,
"per_page": 15,
"current_page": 1,
"last_page": 4,
"next_page_url": "...",
"prev_page_url": "...",
"from": 1,
"to": 15,
}
},
"data": [
{
"id": 1,
"name": "xxxxxxxxx",
"nickname": "xxxxxxx",
"email": "xxx@xxx.xxx",
"birthdate": "xxxx-xx-xx",
"gender": "X",
"group_id": 1,
},
...
]
}현재 server 의 data format 이 다른 경우
transform property를 이용하면 된다.
위의 예제에서 https://vuetable.ratiw.net/api/users 를 호출해보면 대략 아래처럼 생겼다.
이런 format 은 간단하게 data-path="data", pagination-path="" 를 해서 data 와 pagination 의 path 를 지정해 주면 된다. 참고로, path 의 값은 'result.data.depth3' 이런 식으로 사용할 수 있다.
{
"total": 200,
"per_page": 15,
"current_page": 1,
"last_page": 14,
"next_page_url": "https://vuetable.ratiw.net/api/users?page=2",
"prev_page_url": null,
"from": 1,
"to": 15,
"data": [
{...}
],
}css
- CSS Styling | Vuetable-2 : vuetable-2 에 class 를 적용하는 법을 알 수 있다.
filter
search bar 와 관련된 글이다. 다만 source code 의 vue version 이 2.3 이라서 조금 수정이 필요하다.
search bar 는 그저 request 시점에 parameter 를 추가하게 해준다.
2.6 에 맞춘 source code
<template>
<div :class="`${klass}`">
<filter-bar
@filter-set="onFilterSet($event)"
@filter-reset="onFilterReset($event)"
/>
<vuetable
...
:append-params="moreParams"
...
>
...
</vuetable>
</div>
</template>
<script>
...
import FilterBar from "./FilterBar";
const _default = {
name: "AppListTable",
props: {
klass: {
type: String,
default: "",
},
},
data: function () {
return {
...
moreParams: {},
};
},
components: {
...
FilterBar,
},
...
methods: {
...
onFilterSet(filterText) {
this.moreParams.filter = filterText;
this.$nextTick(() => this.$refs.vuetable.refresh());
},
onFilterReset() {
delete this.moreParams.filter;
this.$nextTick(() => this.$refs.vuetable.refresh());
},
},
};
export default _default;
</script>// FilterBar.vue
<template>
<div class="filter-bar ui basic segment grid">
<div class="ui form">
<div class="inline field">
<label>Search for:</label>
<input
type="text"
v-model="filterText"
class="three wide column"
@keyup.enter="doFilter"
placeholder="name, nickname, or email"
/>
<button class="ui primary button" @click="doFilter">Go</button>
<button class="ui button" @click="resetFilter">Reset</button>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
filterText: "",
};
},
methods: {
doFilter() {
this.$emit('filter-set', this.filterText)
},
resetFilter() {
this.filterText = ''
this.$emit('filter-reset')
},
},
};
</script>
See Also
- Home · ratiw/vuetable-2-tutorial Wiki · GitHub : tutorial이다.
댓글 없음:
댓글 쓰기