🎉TOAST UI Grid 4.0 is Finally Here!🎉

Since the beginning, our main goal was to facilitate efficient data representation and convenient functionalities for you, our users.

From the beginning of the year, we have been working hard to provide you with a faster and leaner product filled with convenient features. We have eliminated the unnecessary dependencies; enhanced the performance through the virtual DOM; and undertaken a massive task of improving the overall API. Finally, we are proud to present to you the more powerful and lighter TOAST UI Grid 4.0!

For more information on what has been updated with v4.0, read on!

⭐️Feature

Here are some of the key features provided by the TOAST UI Grid 4.0. Keep these in mind as you read more about the updates!

• Enhanced Virtual Scroll (Handling Large Dataset Without Performance Loss)
• More Diverse Input Types (checkbox, radio, select, password, etc.)
• Full Keyboard Navigation (move, select, copy, paste, delete, etc.)
• Relational Structure Between Columns
• Tree Data Representation

For more details, please check out the Github!

🌈What Has Been Updated?

Lighter With No Dependency

For TOAST UI Grid 4.0, we have gotten rid of all of the previous code written in Backbone and jQuery, and have rewritten the entire project using Preact to implement our own reactivity system. As a result of introducing aforementioned two technologies, the size of the total bundle size decreased over 50% from 327KB to 154KB, and the codes have been simplified.

Below is a chart comparing the minified bundle sizes of different Grids developed by other organizations.

Since Grid is designed to include variety of features to help users deal with data, it is usually big in size. However, TOAST UI Grid 4.0, as shown in the charts above, is incredibly lightweight due to the fact that it has no dependency whatsoever.

Such lightness translates to being able to use the core functionalities of the Grid without any speed decrease of the web page loading process.

The lightweight yet powerful TOAST UI Grid 4.0. Isn’t it gorgeous?

TypeScript

TOAST UI Grid 4.0 has been written in TypeScript.

Through flexible type inference, we were able to ensure the stability and increase readability at the same time. For those who want to contribute to TOAST UI Grid, can now familiarize themselves more easily using types!

We always welcome enthusiastic contributions and PRs. :)

Custom Editor / Custom Renderer

In TOAST UI Grid 4.0, we have included an extension feature by adding a Custom Editor and Custom Renderer so that you can apply your own configurations to your taste.

As you can see in the slider or the ColorPicker, you can express your data in any way you see fit.

Here is how to use it!

All you have to do is define the constructor function and the methods like the MyColorRenderer class so that it conforms to the CellRenderer format. Now, isn’t it simple?

(If the environment does not support class, you can achieve the same result using functions and prototypes.)

interface CellRenderer {
  getElement(): HTMLElement;
  focused?(): void;
  mounted?(parent: HTMLElement): void;
  render(props: CellRendererProps): void;
  beforeDestroy?(): void;
}

class MyColorRenderer {
  constructor(props) {
    const el = document.createElement('input');
    const { grid, rowKey, columnInfo } = props;

    el.type = 'color';
    el.addEventListener('input', () => {
      grid.setValue(rowKey, columnInfo.name, el.value);
    });

    this.el = el;
    this.render(props);
  }

  getElement() {
    return this.el;
  }

  getValue() {
    return this.el.value;
  }

  render(props) {
    this.el.value = String(props.value);
  }
}

When you’re done assigning the custom renderer to the renderer option object as type, you will be able to see the new TOAST UI Grid at work as it renders!

const grid = new Grid({
  // ...
  columns: [
    {
      name: 'genre',
      renderer: {
        type: MyColorRenderer,
        options: {
          myColorRendererOptions: {
             // ...
          }
        }
      }
    }
  ]
});

All the while, the original editor formats (text, password, checkbox, radio, and select) and default renderers are still provided, so with the correct combinations, you will be able to represent your data much more efficiently!

For more information, please check out our Migration guide.

Easily Connected to Backend APIs, DataSource

In TOAST UI Grid 4.0, we are introducing a new concept known as the DataSource.

It is a concept that has completely replaced the previous Net used for communication between the Backend API and the Grid, and it is much more efficient in dealing with data insertion, manipulation, and deletion internally. Furthermore, usages and APIs have been updated to be more intuitive.

As you can see in the example below, you had to initialize a Grid instance with an empty data option, and then use the use method to configure the related options for the Net in v3.0. Because it felt like an unnecessary step to take, it seemed inconvenient.

// v3.0
var grid =  new tui.Grid({
  columns: [{ title: 'Name', name: 'name' }]
  // ...
});

grid.use('Net', {
  withCredentials: false,
  api: {
      readData: './api/read',
      createData: './api/create',
      updateData: './api/update',
      deleteData: './api/delete',
      modifyData: './api/modify'
  }
});

In v4.0, you can simply define and assign dataSource object to the data option without the extra API call.

// v4.0
var dataSource = {
  withCredentials: false,  
  initialRequest: true,
  api: {
      readData: { url: '/api/read', method: 'GET' },
      createData: { url: '/api/create', method: 'POST' },
      updateData: { url: '/api/update', method: 'PUT' },
      deleteData: { url: '/api/delete', method: 'DELETE' },
      modifyData: { url: '/api/modify', method: 'POST' }
  }
}
  
var grid =  new tui.Grid({
  data: dataSource,
  columns: [{ title: 'Name', name: 'name' }]
  // ...
});

Other APIs and options related to DataSource have been updated to be simpler and more intuitive. For more information, remember to check out the Migration Guide.

Column Virtual Scroll

With TOAST UI Grid 4.0, we have implemented the virtual scroll not only for rowwise, but also for the columnwise. Now, with TOAST UI Grid, your scrolls are no longer restricted to the number of columns! Smooth and fast row, column scrolls. What are you waiting for?

☀️What’s next?

Here are some of release dates of upcoming features which will make TOAST UI Grid even more attentive to your needs.

• Mobile Support (July)
• Filters (July)
• Multiple Column Sort (August)
• Context Menu for Columns and Cells (August)
• Client Pagination (August)

🍀Migration Guide

We have prepared a user-friendly Migration Guide to help you along the way of migrating from v3.x to v4.0. If you’re intending to migrate, feel free to refer back to it. :)

🚀TOAST UI Grid—Loved Three Thousand!

With the release of TOAST UI Grid 4.0, we have made significant changes to make structures and features more progressive.

We plan to periodically release updates to make the Grid better, and you can track the updates in our Release Notes!

As we have mentioned above, we always welcome any of user opinions and feedback!

Our Github to TOAST UI Grid is always open, and we hope that you are as excited as we are for more!