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

Commit f41c471

Browse files
author
DongWoo Kim
committed
chore: update README.md
1 parent f6d8a2e commit f41c471

File tree

1 file changed

+102
-27
lines changed

1 file changed

+102
-27
lines changed

‎README.md‎

Lines changed: 102 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -13,25 +13,29 @@
1313
* [Install](#-install)
1414
* [Using npm](#using-npm)
1515
* [Usage](#-usage)
16-
* [Load](#load)
17-
* [Implement](#implement)
16+
* [Import](#import)
1817
* [Props](#props)
19-
* [Event](#event)
20-
* [Method](#method)
18+
* [Reactive props](#reactive-props)
19+
* [Instance Methods](#instance-methods)
20+
* [Getting the root element](#getting-the-root-element)
21+
* [Static Methods](#static-methods)
22+
* [Events](#events)
23+
* [Addons](#addons)
2124
* [Pull Request Steps](#-pull-request-steps)
2225
* [Documents](#-documents)
2326
* [Contributing](#-contributing)
2427
* [License](#-license)
2528

2629
## Collect statistics on the use of open source
2730

28-
React 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 React Wrapper compoent.
31+
React 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 `usageStatistics` props like the example below.
2932

3033
```js
31-
var options = {
32-
...
33-
usageStatistics: false
34-
}
34+
<Grid
35+
data={[/* ... */]}
36+
columns={[/* ... */]}
37+
usageStatistics={false}
38+
/>
3539
```
3640

3741
Or, import `tui-code-snippet.js` (**v1.4.0** or **later**) and then immediately write the options as follows:
@@ -69,7 +73,7 @@ const Grid = require('@toast-ui/react-grid');
6973

7074
### Props
7175

72-
[All the options of the TOAST UI Grid](http://nhnent.github.io/tui.grid/latest/Grid) are supported in the form of props.
76+
[All the options of the TOAST UI Grid](http://nhnent.github.io/tui.grid/latest/Grid) are supported in the form of props. Note that `data` and `columns` props are required and other props are optional.
7377

7478
```js
7579
const data = [
@@ -84,40 +88,45 @@ const columns = [
8488
];
8589

8690
const MyComponent = () => (
87-
<Grid
91+
<Grid
8892
data={data}
8993
columns={columns}
90-
bodyHeight={100}
94+
rowHeight={25}
95+
bodyHeight={100}
96+
virtualScrolling={true}
97+
heightResizable={true}
98+
rowHeaders={['rowNum']}
9199
/>
100+
92101
);
93102
```
94103

95104
### Reactive Props
96105

97-
Normally, React Components are re-rendered whenever the props received from a parent Component are changed. But not all the props of this Component are reactive as the TOAST UI Grid does not provide setter methods for all options. Below are the list of reactive props which are currently supported.
106+
Normally, React components are re-rendered whenever the props received from a parent component are changed. But not all the props of the wrapper component are reactive as the TOAST UI Grid does not provide setter methods for all options. Below are the list of reactive props which are currently supported.
98107

99-
- data (using `setData`)
100-
- columns (using `setColumns`)
101-
- bodyHeight (using `setBodyHeight`)
102-
- frozenColumnCount (using `setFrozenColumnCount`)
108+
- `data` (using `setData`)
109+
- `columns` (using `setColumns`)
110+
- `bodyHeight` (using `setBodyHeight`)
111+
- `frozenColumnCount` (using `setFrozenColumnCount`)
103112

104-
If you don't want some props to be reactive, you can disable reactivity of specific props using `oneTimeBindingProps`. For example, if you don't want to re-render whenever `data` and `columns` props are changed, you can use `oneTimeBindingProps` like example below.
113+
If you don't want some props to be reactive, you can disable reactivity of specific props using `oneTimeBindingProps`. For example, if you don't want to re-render whenever `data` and `columns` props are changed, you can use `oneTimeBindingProps` like the example below.
105114

106115
```js
107-
108116
const MyComponent = () => (
109117
<Grid
110118
data={data}
111119
columns={columns}
112120
bodyHeight={100}
121+
frozenColumnCount={2}
113122
oneTimeBindingProps={['data', 'columns']}
114123
/>
115124
);
116125
```
117126

118-
### Methods (Using Ref)
127+
### Instance Methods
119128

120-
For using methods of TOAST UI Grid instance, first thing to do is creating Refs of wrapper Component using `createRef()`. The wrapper Component does not provide a way to call methods of TOAST UI Grid instance directly. Instead, you can call `getGridInstance()` method of the wrapper Component to get the instance, and call the methods with it.
129+
For using [instance methods of TOAST UI Grid](http://nhnent.github.io/tui.grid/latest/Grid#activateFocus), first thing to do is creating Refs of wrapper component using [`createRef()`](https://reactjs.org/docs/refs-and-the-dom.html#creating-refs). But the wrapper component does not provide a way to call instance methods of TOAST UI Grid directly. Instead, you can call `getGridInstance()` method of the wrapper component to get the instance, and call the methods on it.
121130

122131
```js
123132
class MyComponent extends React.Component {
@@ -134,23 +143,92 @@ class MyComponent extends React.Component {
134143
ref={this.gridRef}
135144
data={data}
136145
columns={columns}
137-
bodyHeight={100}
138146
/>
139147
<button onClick={this.handleAppendRow}>Append Row</button>
140148
</>
149+
);
150+
}
151+
}
152+
```
153+
154+
### Getting the root element
141155

156+
An instance of the wrapper component also provides a handy method for getting the root element. If you want to manipulate the root element directly, you can call `getRootElement` to get the element.
157+
158+
```js
159+
class MyComponent extends React.Component {
160+
gridRef = React.createRef();
161+
162+
handleClickButton = () => {
163+
this.gridRef.current.getRootElement().classList.add('my-grid-root');
164+
}
165+
166+
render() {
167+
return (
168+
<>
169+
<Grid
170+
ref={this.gridRef}
171+
data={data}
172+
columns={columns}
173+
/>
174+
<button onClick={this.handleClickButton}>Click!</button>
175+
</>
142176
);
143177
}
144178
}
145179
```
146180

147181
### Static Methods
148182

183+
The wrapper component does not provide a way to call [static methods of TOAST UI Grid](http://nhnent.github.io/tui.grid/latest/Grid#applyTheme). If you want to use static methods such as `applyTheme` or `setLanguage` you should use it via importing `tui-grid` directly.
184+
185+
```js
186+
import TuiGrid from 'tui-grid';
187+
188+
TuiGrid.setLanguage('ko');
189+
TuiGrid.applyTheme('striped');
190+
```
191+
192+
### Events
193+
[All the events of TOAST UI Grid](http://nhnent.github.io/tui.grid/latest/Grid#event-beforeRequest) are supported in the form of `on[EventName]` props. The first letter of each event name should be capitalized. For example, for using `click` event you can use `onClick` prop like the example below.
149194

195+
```js
196+
class MyComponent extends React.Component {
197+
handleClick = () => {
198+
console.log('click!!');
199+
}
200+
201+
render() {
202+
return (
203+
<Grid
204+
data={data}
205+
columns={columns}
206+
onClick={this.handleClick}
207+
/>
208+
);
209+
}
210+
}
211+
```
150212

213+
### Addons
214+
TOAST UI Grid uses the **AddOn** to extend functionality, which can be setup with the `addOn` prop. The `addon` prop recieves an object which conatins the name of the addon as a key, and the option object as a value. For example, if you want to use the [Net addon](https://github.com/nhnent/tui.grid/blob/production/docs/binding-to-remote-data.md#net-add-on) you can set up like the example below.
151215

152-
### Event
216+
```js
217+
const columns = [/* ... */];
218+
const netOptions = {
219+
perPage: 10,
220+
api: {
221+
readData: 'api/readData'
222+
}
223+
};
153224

225+
const MyComponent = () => (
226+
<Grid
227+
columns={columns}
228+
addOn={{Net: netOptions}}
229+
/>
230+
);
231+
```
154232

155233
## 🔧 Pull Request Steps
156234

@@ -159,7 +237,7 @@ Run npm scripts and develop yourself with the following process.
159237

160238
### Setup
161239

162-
Fork `develop` branch into your personal repository.
240+
Fork `master` branch into your personal repository.
163241
Clone it to local computer. Install node modules.
164242
Before starting development, you should check to haveany errors.
165243

@@ -180,9 +258,6 @@ If it has no error, commit and then push it!
180258

181259
For more information on PR's step, please see links of Contributing section.
182260

183-
## 📙 Documents
184-
* [Getting Started](https://github.com/nhnent/toast-ui.react-grid/blob/master/docs/getting-started.md)
185-
186261
## 💬 Contributing
187262
* [Code of Conduct](https://github.com/nhnent/toast-ui.react-grid/blob/master/CODE_OF_CONDUCT.md)
188263
* [Contributing guideline](https://github.com/nhnent/toast-ui.react-grid/blob/master/CONTRIBUTING.md)

0 commit comments

Comments
 (0)