Skip to content
This repository was archived by the owner on Oct 24, 2019. It is now read-only.

Commit 8fe4fab

Browse files
author
Sohee Lee
committed
Merge branch 'master' into production
2 parents 618c122 + 1c7b078 commit 8fe4fab

File tree

5 files changed

+11159
-2879
lines changed

5 files changed

+11159
-2879
lines changed

README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ You can use Toast UI Grid for Vue as moudule format or namespace. Also you can u
6666
```js
6767
require('tui-grid/dist/tui-grid.css');
6868
var toastui = require('@toast-ui/vue-grid');
69-
var Grid = toastui.Calendar;
69+
var Grid = toastui.Grid;
7070
```
7171

7272
* Using Single File Component

docs/getting-started.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ You can use Toast UI Grid for Vue as moudule format or namespace. Also you can u
4141
```js
4242
require('tui-grid/dist/tui-grid.css');
4343
var toastui = require('@toast-ui/vue-grid');
44-
var Grid = toastui.Calendar;
44+
var Grid = toastui.Grid;
4545
```
4646

4747
* Using Single File Component
@@ -467,10 +467,10 @@ export default {
467467
}
468468
},
469469
methods: {
470-
onClick(nativeEvent, targetType, rowKey, columnName, instance) {
470+
onClick(evt) {
471471
// implement your code
472472
},
473-
onCheck(rowKey, instance) {
473+
onCheck(evt) {
474474
// implement your code
475475
}
476476
}

example/App.vue

Lines changed: 144 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,144 @@
1+
<template>
2+
<div class="container">
3+
<h1>🍞🔡 TOAST UI Grid + Vue</h1>
4+
<grid :rowData="data"
5+
:columnData="columns"
6+
:options="options"
7+
@check="onCheck"
8+
@uncheck="onUnCheck"
9+
></grid>
10+
</div>
11+
</template>
12+
<script>
13+
import {Grid} from '../src/index.js';
14+
15+
export default {
16+
components: {
17+
'grid': Grid
18+
},
19+
data() {
20+
return {
21+
columns: [
22+
{
23+
title: 'Name',
24+
name: 'name'
25+
},
26+
{
27+
title: 'Artist',
28+
name: 'artist'
29+
},
30+
{
31+
title: 'Personal Score',
32+
name: 'score',
33+
onBeforeChange(ev) {
34+
console.log('executes before the value changes : ', ev);
35+
},
36+
onAfterChange(ev) {
37+
console.log('executes after the value has changed : ', ev);
38+
},
39+
copyOptions: {
40+
useListItemText: true
41+
},
42+
editOptions: {
43+
type: 'radio',
44+
listItems: [
45+
{
46+
text: '★☆☆☆☆',
47+
value: '1'
48+
},
49+
{
50+
text: '★★☆☆☆',
51+
value: '2'
52+
},
53+
{
54+
text: '★★★☆☆',
55+
value: '3'
56+
},
57+
{
58+
text: '★★★★☆',
59+
value: '4'
60+
},
61+
{
62+
text: '★★★★★',
63+
value: '5'
64+
}
65+
],
66+
useViewMode: true
67+
}
68+
}
69+
],
70+
data: [
71+
{
72+
name: 'Kiss and Make Up',
73+
artist: 'Dua Lipa',
74+
score: '5'
75+
},
76+
{
77+
name: 'Bohemian Rhapsody',
78+
artist: 'Queen',
79+
score: '2'
80+
},
81+
{
82+
name: 'Done For Me',
83+
artist: 'Charlie Puth',
84+
score: '3'
85+
},
86+
{
87+
name: 'thank u, next',
88+
artist: 'Ariana Grande',
89+
score: '4'
90+
},
91+
{
92+
name: 'Handclap',
93+
artist: 'Fitz & The Tantrums',
94+
score: '1'
95+
},
96+
{
97+
name: 'Shape Of You',
98+
artist: 'Ed Sheeran',
99+
score: '5'
100+
},
101+
{
102+
name: 'Snowman',
103+
artist: 'Sia',
104+
score: '5'
105+
},
106+
{
107+
name: 'Don\'t Stop Me Now ',
108+
artist: 'Queen',
109+
score: '3'
110+
},
111+
{
112+
name: 'Havana',
113+
artist: 'Camila Cabello',
114+
score: '2'
115+
},
116+
{
117+
name: 'A No No',
118+
artist: 'Mariah Carey',
119+
score: '5'
120+
}
121+
],
122+
options: {
123+
rowHeaders: [
124+
{
125+
type: 'checkbox'
126+
}
127+
]
128+
}
129+
};
130+
},
131+
methods: {
132+
onCheck(ev) {
133+
console.log('check event: ', ev);
134+
},
135+
onUnCheck(ev) {
136+
console.log('uncheck event: ', ev);
137+
}
138+
139+
}
140+
};
141+
</script>
142+
<style>
143+
@import 'https://uicdn.toast.com/tui-grid/latest/tui-grid.css';
144+
</style>

0 commit comments

Comments
 (0)