This repository is DEPRECATED! GO TO 👉
<grid
:data="gridProps.data"
:columns="gridProps.columns"
:options="gridProps.options"
:theme="gridProps.myTheme"
@check="onCheck"
@uncheck="onUnCheck"
:rowHeaders="gridProps.rowHeaders"
:columnOptions="gridProps.columnOptions"
></grid>
setLanguage
applyTheme
Use static method, please.
import TuiGrid from 'tui-grid';
TuiGrid.setLanguage('ko');
TuiGrid.applyTheme('striped');
rowData -> data
columnData -> columns
TOAST UI Grid has its own reactivity system, and does not use the reactivity system of Vue. So, instead of adding
propsin thedata, declarepropsin thecreatedlifecycle method.
// v1.0.0
<template>
<grid
:rowData="data"
:columnData="columns"
/>
</template>
<script>
import 'tui-grid/dist/tui-grid.css'
import { Grid } from '@toast-ui/vue-grid'
export default {
components: {
'grid': Grid
},
data() {
return {
data: [ // for rowData prop
{
name: 'Beautiful Lies',
artist: 'Birdy'
},
{
name: 'X',
artist: 'Ed Sheeran'
}
],
columns: [ // for columnData prop
{
header: 'Name',
name: 'name',
},
{
header: 'Artist',
name: 'artist'
}
]
}
}
}
}
</script>
// v2.0.0
<template>
<grid
:data="gridProps.data"
:columns="gridProps.columns"
/>
</template>
<script>
import 'tui-grid/dist/tui-grid.css'
import { Grid } from '@toast-ui/vue-grid'
export default {
components: {
'grid': Grid
},
created() {
this.gridProps = {
data: [ // for rowData prop
{
name: 'Beautiful Lies',
artist: 'Birdy'
},
{
name: 'X',
artist: 'Ed Sheeran'
}
],
columns: [ // for columnData prop
{
header: 'Name',
name: 'name',
},
{
header: 'Artist',
name: 'artist'
}
]
}
}
}
</script>