TOAST UI Grid React 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 React Wrapper to TOAST UI Grid repository. Thank you🙂.

This is a React component wrapping TOAST UI Grid.

• Collect statistics on the use of open source
• Install
  • Using npm
• Usage
  • Import
  • Props
  • Reactive props
  • Instance Methods
  • Getting the root element
  • Static Methods
  • Events
  • Addons
• Pull Request Steps
• Documents
• Contributing
• License

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.

<Grid 
  data={[/* ... */]} 
  columns={[/* ... */]} 
  usageStatistics={false} 
/>

Or, import tui-code-snippet.js (v1.4.0 or later) and then immediately write the options as follows:

tui.usageStatistics = false;

npm install --save @toast-ui/react-grid

You can use Toast UI Grid for React as a ECMAScript module or a CommonJS module. As this module does not contain CSS files, you should import tui-grid.css from tui-grid manually.

• Using ECMAScript module

import 'tui-grid/dist/tui-grid.css'
import Grid from '@toast-ui/react-grid'

• Using CommonJS module

require('tui-grid/dist/tui-grid.css');
const Grid = require('@toast-ui/react-grid');

All the options of the TOAST UI Grid are supported in the form of props. Note that data and columns props are required and other props are optional.

const data = [
  {id: 1, name: 'Editor'},
  {id: 2, name: 'Grid'}
  {id: 3, name: 'Chart'}
];

const columns = [
  {name: 'id', header: 'ID'},
  {name: 'name', header: 'Name'}
];

const MyComponent = () => (
  <Grid
    data={data} 
    columns={columns} 
    rowHeight={25}
    bodyHeight={100}
    virtualScrolling={true}
    heightResizable={true}
    rowHeaders={['rowNum']}
  />

);

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.

• data (using setData)
• columns (using setColumns)
• bodyHeight (using setBodyHeight)
• frozenColumnCount (using setFrozenColumnCount)

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.

const MyComponent = () => (
  <Grid 
    data={data} 
    columns={columns} 
    bodyHeight={100} 
    frozenColumnCount={2}
    oneTimeBindingProps={['data', 'columns']}
  />
);

For using instance methods of TOAST UI Grid, first thing to do is creating Refs of wrapper component using createRef(). But the wrapper component does not provide a way to call instance methods of TOAST UI Grid directly. Instead, you can call getInstance() method of the wrapper component to get the instance, and call the methods on it.

class MyComponent extends React.Component {
  gridRef = React.createRef();
  
  handleAppendRow = () => {
    this.gridRef.current.getInstance().appendRow({});
  }

  render() {
    return (
      <>
        <Grid 
          ref={this.gridRef}
          data={data} 
          columns={columns} 
        />
        <button onClick={this.handleAppendRow}>Append Row</button>
      </>
    );
  }
}

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.

class MyComponent extends React.Component {
  gridRef = React.createRef();
  
  handleClickButton = () => {
    this.gridRef.current.getRootElement().classList.add('my-grid-root');
  }

  render() {
    return (
      <>
        <Grid 
          ref={this.gridRef}
          data={data} 
          columns={columns} 
        />
        <button onClick={this.handleClickButton}>Click!</button>
      </>
    );
  }
}

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');

All the events of TOAST UI Grid 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.

class MyComponent extends React.Component {
  handleClick = () => {
    console.log('click!!');
  }

  render() {
    return (
      <Grid 
        data={data} 
        columns={columns} 
        onClick={this.handleClick}
      />
    );
  }
}

In general, the TOAST UI Grid runs on the front-end environment using local data. However, you can also bind remote data using a plain object called dataSource. To use this, define the dataSource object and set it to the data option like the example below.

const columns = [/* ... */];
const dataSource = {
  withCredentials: false,
  initialRequest: true,
  api: {
    readData: {url: 'api/readData', method: 'GET'}
  }
};

const MyComponent = () => (
  <Grid 
    columns={columns} 
    data={dataSource} 
    pageOptions={{perPage: 3}}
    onSuccessResponse={(data) => {
      console.log(data);
    }}
  />
);

React Hooks can be used together.

import React, {useCallback} from 'react';

const MyComponentWithHooks = () => {
  const onClick = useCallback(() => {
    console.log('condition:', condition);
  }, [condition]);

  return <Grid columns={columns} data={data} onClick={onClick} />;
};

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 master 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.

• Code of Conduct
• Contributing guideline
• Commit convention

This software is licensed under the MIT © NHN.