TOAST UI Grid Vue Wrapper has been managed separately from the TOAST UI Grid repository. As a result of the distribution of these issues, we decided to deprecated each wrapper repository and manage repository as a mono-repo from the TOAST UI Grid repository.
From now on, please submit issues or contributings related to TOAST UI Vue Wrapper to TOAST UI Grid repository. Thank youπ.
This is Vue component wrapping TOAST UI Grid.
- Collect statistics on the use of open source
- Documents
- Install
- Usage
- Pull Request Steps
- Contributing
- License
Vue Wrapper of TOAST UI Grid applies Google Analytics (GA) to collect statistics on the use of open source, in order to identify how widely TOAST UI Grid is used throughout the world. It also serves as important index to determine the future course of projects. location.hostname (e.g. > βui.toast.com") is to be collected and the sole purpose is nothing but to measure statistics on the usage. To disable GA, use the following usageStatistics
option when declare Vue Wrapper compoent.
var options = {
...
usageStatistics: false
}
npm install --save @toast-ui/vue-grid
You can use Toast UI Grid for Vue as moudule format or namespace. Also you can use Single File Component (SFC of Vue). When using module format and SFC, you should load tui-grid.css
in the script.
-
Using Ecmascript module
import 'tui-grid/dist/tui-grid.css' import { Grid } from '@toast-ui/vue-grid'
-
Using Commonjs module
require('tui-grid/dist/tui-grid.css'); var toastui = require('@toast-ui/vue-grid'); var Grid = toastui.Grid;
-
Using Single File Component
import 'tui-grid/dist/tui-grid.css' import Grid from '@toast-ui/vue-grid/src/Grid.vue'
-
Using namespace
var Grid = toastui.Grid;
First insert <grid>
in the template or html. rowData
and columnData
props are required.
<grid :data="gridProps.data" :columns="gridProps.columns" />
Load grid component and then add it to the components
in your component or Vue instance.
TOAST UI Grid has its own reactivity system, and does not use the reactivity system of Vue. So, instead of adding props in the
data
, declareprops
in thecreated
lifecycle method.
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'
}
]
}
}
}
You can use rowData
, columnData
, options
, theme
and language
props. Example of each props is in the Getting Started.
-
rowData
,columnData
Type Required Array or Object O These props are row and colume data of the grid. If you change
rowData
orcolumnData
, the grid is rendered to change data. -
options
Type Required Object X You can configurate your grid using
options
prop. For more information which properties can be set inoptions
, see options of tui.grid. -
theme
Type Required String or Object X This prop can change theme of the grid. We support
default
,striped
andclean
themes. So in case you just setString
of these themes.If you want to use other theme, you set
Object
that is requiredname
andvalue
. For more information which properties ofvalue
are available, seeextOptions
of applyTheme of tui.grid. -
language
Type Required String or Object X This prop can change language of the grid. We support
en
andko
. So in case you just setString
of these languages.If you want to use other languages, you set
Object
that is requiredname
andvalue
. For more infomation which properties ofvalue
are available, seedata
of setLanguage of tui.grid.
- click : Occurs when a mouse button is clicked on the Grid.
- check : Occurs when a checkbox in row header is checked.
- uncheck : Occurs when a checkbox in row header is unchecked.
- dblclick : Occurs when a mouse button is double clicked on the Grid.
- mouseover : Occurs when a mouse pointer is moved onto the Grid.
- mouseout : Occurs when a mouse pointer is moved off from the Grid.
- mousedown : Occurs when a mouse button is downed on the Grid.
- focusChange : Occurs when focused cell is about to change.
- expand : Occurs when the row having child rows is expanded.
- collapse : Occurs when the row having child rows is collapsed.
- beforeRequest : Occurs before the http request is sent.
- response : Occurs when the response is received from the server.
- successResponse : Occurs after the response event, if the result is true.
- failResponse : Occurs after the response event, if the result is false.
- errorResponse : Occurs after the response event, if the response is Error.
- selection : Occurs when selecting cells.
For more information such as the parameters of each event, see event of tui.grid. Example of event is in the Getting Started.
For use method, first you need to assign ref
attribute of element like this:
<grid ref="tuiGrid" :data="rows" :columns="columns"/>
After then you can use methods through this.$refs
. We provide getRootElement
and invoke
methods.
-
getRootElement
You can get root element of grid using this method.
this.$refs.tuiGrid.getRootElement();
-
invoke
If you want to more manipulate the Grid, you can use
invoke
method to call the method of tui.grid. First argument ofinvoke
is name of the method and second argument is parameters of the method. To find out what kind of methods are available, see method of tui.grid.const info = this.$refs.tuiGrid.invoke('getFocusedCell'); this.$refs.tuiGrid.invoke('setWidth', 500);
The wrapper component does not provide a way to call static methods of TOAST UI Grid. If you want to use static methods such as applyTheme
or setLanguage
you should use it via importing tui-grid directly.
import TuiGrid from 'tui-grid';
TuiGrid.setLanguage('ko');
TuiGrid.applyTheme('striped');
TOAST UI products are open source, so you can create a pull request(PR) after you fix issues. Run npm scripts and develop yourself with the following process.
Fork develop
branch into your personal repository.
Clone it to local computer. Install node modules.
Before starting development, you should check to have any errors.
$ git clone https://github.com/{your-personal-repo}/[[repo name]].git
$ cd [[repo name]]
$ npm install
Let's start development!
Before PR, check to test lastly and then check any errors. If it has no error, commit and then push it!
For more information on PR's step, please see links of Contributing section.