Skip to content

@dongwoo-kim dongwoo-kim released this May 31, 2019 · 1527 commits to master since this release

The New Grid is Here!!

We are happy to announce the first alpha release of the version 4. The version 4 is the huge step from the previous version, because we've fully rewritten the entire source code with the modern JS technologies. The most significant changes are listed below.

Good Bye~ Backbone and jQuery

The main purpose of this release was removing dependencies of Backbone and jQuery. Now, TOAST UI Grid has no dependency at all! This also means that it's much lighter than before. Although this alpha version lacks some of the main features such as Tree Grid and Net Addon, minified version of the bundle file is only 110KB. Compared to pervious version which is more than 300KB (including jQuery and Backbone), it's significant improvement.


The entire source code is rewritten by Typescript. It's for internal implementation only, so it doesn't mean that users should use typescript to use TOAST UI Grid4. It will not effect anything to end users, but we've enjoying more stable and reliable developer environment with TypeScript. Hopefully it can help new contributors to adjust to our internal codebase.

Cell Editor

The ability to customize cell editor UI has been the most demanded feature for TOAST UI Grid for a long time. Users used to use the formatter for this purpose, but the formatter is aimed to customize the contents of the cell, not to customize editing UI.

With the release of version 4, the official Cell Editor interface is supported by default in the TOAST UI Grid, so that users can customize the editing UI to meet their own requirements.

More information can be found in the specification.

Cell Renderer

The cell renderer is more powerful abstraction than formatter option and gives more control of cell rendering behavior to end users. TOAST UI Grid 4 will support official Cell Renderer interface so that users can customize the cell UI to meet their own requirements.

More information can be found in the specification.

Other Breaking Changes

Dropping IE8 support

Internet Explorer 8 is one of the oldest browsers now. Despite the fact that very few people use it, it has made a lot of tricky bugs and has hindered us from using new tools like webpack 4. So we decided to drop the support of IE8.

columns[ ]


The editOptions is replaced with the editor options. You can set the name of built-in editor or the constructor of custom editors. If you need options for the editor, another property editorOptions can be used. See the specification for more information.


The editOptions.listItem is also replaced with the editorOptions options. As this options only effects to the cell editor, if you want to render the text of the item but the value of the item, you should specify the formatter options. For this use case, we support built-in listItemText formatter. You can use the listItemText formatter using the string value like the following code.

const grid = new Grid({
  // ...
  columns: [
      name: 'genre',
      formatter: 'listItemText',
      editor: 'checkbox',
      editorOptions: {
        listItem: [
          { text: 'Pop', value: '1' },
          { text: 'Rock', value: '2' }


The useViewMode:false option was one of the unique feature of the TOAST UI Grid. It enables the cell editors to be enabled always so that users can edit the value of the cell without changing it to "editing-mode". But we've concluded that this feature can be quite tricky to implement if we specify the official CellEditor interface, because the internal focus/clipboard management system is quite complex and input elements which are always shown might break this system.

In the version 4, useViewMode option is removed, and editing should be done in the editing-mode. But if you want to emulate the previous behavior of the userViewMode:false options, you can do it with the custom CellRenderer. See the specification for more information.

prefix / postfix

There's been three options for customizing the contents of the cell, which are formatter, prefix and postfix. But we've concluded that prefix and postfix can be implemented by formatter alone, and having three options for one purpose can be rather confusing. Hence, the prefix and postfix options will be removed.

Remove toJSON options

The options for converting data to JSON string is removed from the methods listed below.

  • getCheckedRowKeys
  • getCheckedRows
  • getRow
  • getRowAt
  • getRows (-> getData)

Renamed Methods

  • enableCheck -> enableRowCheck
  • disableCheck -> disableRowCheck
  • getRows -> getData
  • focusIn -> startEditing
  • focusInAt -> startEditingAt

Renamed Options

  • data[ ]._extraData -> data[ ]._attributes

Not Implemented Yet

Although most of the basic functionalities of the existing TOAST UI Grid is implemented in this release, some features are still in development now. These features are listed below, and will be implemented in the next alpha release.


  • Tree Grid
  • Net AddOn
  • DatePicker editor
  • Mouse dragging on column headers or row header for selecting rows or columns.


  • findRows
  • setColumns
  • setColumnWidths
  • removeCheckedRows
  • getRowSpanData
  • isModified
  • getModifiedRows
  • restore
  • getElement
  • refreshLayout


  • columns[ ].ignore
  • data[ ]._extraData.rowspan
  • header.complexColumns

We Need Your Feedback!

You can install this release right now. Just use the @next tag for npm install like below.

npm install tui-grid@next

Please give this version a try and feel free to give us any feedback!

Next Release

The next release(4.0.0-alpha.1) will include all the functions listed above and will be released within two weeks. Stay tune!

Assets 2
You can’t perform that action at this time.