Bugfixes

• Added destroy API that had been missed. (#626 )

Bugfixes

• Fixed that row height is set to the default row height, when the cell content height is larger than the default value. (#599 )
• Fixed that TypeError has been caused when clicked header cell. (#608 )
• Fixed that when called resetData API on editing the cell, TypeError has been caused. (#608 )

Enhancement

• Support row hover theme. (#614 )
  • Users can use new theme option for row hover.
  • deprecate existing theme row option in future.
    • extOptions.cell.currentRow
    • extOptions.cell.evenRow
    • extOptions.cell.oddRow
    • extOptions.cell.dummy
  • Code

  Grid.applyTheme('custom', { 
    row: { 
      hover: { 
        background: '#00eeff' 
      },
      even: {
        background: '#00eeff' 
      },
      odd: {
        background: '#00eeff' 
      },
      dummy: {
        background: '#00eeff' 
      }
    }
  });
  

• New Custom Event. (#616 )
  • The header cell's check event is added.(checkAll, uncheckAll)
• Improve performance of the updating component as changes props internally. (#611 )

Features

• TOAST UI Grid v4.4.0 provides align, vertical-align option for header cell. (#603 )
  • Code

  const grid = new Grid({
     data,
     column,
     header: {
       height: 40,
       // apply the align, valign option to all columns in common
       valign: 'top' | 'middle' | 'bottom',
       align: 'left' | 'center' | 'right',
       // need to configure align or valign options of each column
       // this option is a higher priority than common option
     columns: [
       {
         name: 'col1',
         valign: 'top' | 'middle' | 'bottom',
         align:  'left' | 'center' | 'right'
        }
      ]
    }
  });
  

Documents

• Updated that Korean and English tutorials.
  • Korean
  • English

Bugfixes

• Fixed wrong ColumnValueType type definition. (#604 )
• Fixed that expanded event is not occurred properly on calling expandAll method. (#605 )

Bugfixes

• Fixed setting wrong row height in case that rowHeight option is auto. (#592 )
• Fixed that scrolling position is off calculated when focuses the cell with expanded tree row. (#596 )

Enhancement

• Support mobile touch event. (#594 )
  • Users can edit the cell on mobile through double tap.
  • We are planned to provide long term touch event after the context cell menu is added.
• Applying the binary search internally. (#598 )
  • The performance is improved on finding the index or row with the rowKey as applying binary search
• New Custom Event. (#602 )
  • The lifecycle event method is added(onGridMounted, onGridBeforeDestroyed)
  • The Editing event is added(editingStart, editingFinish)
  • The resizing column event is added(columnResize)

Bugfixes

• Fixed that the data of createdRows and updatedRows are duplicated as the result of calling getModifiedRows method. (#540 )
• Fixed the incorrect range on setSelectionRange method. (#549 )
• Fixed that the disabled cell is able to be edited. (#575 )
• Fixed that dblclick is not working. (#579 )
• Fixed that the editing cell displays null value on the view. (#584 )

Features

• TOAST UI Grid v4.2.0 provides the enhanced sorting functionality.
  • The new grid event that sorting event is added for those who need to subscribe the event after sorting the data. (#536 )
  • Users can cancel the sorting by just clicking 3 times without calling any method. (#556 )
  • The Multi Column Sorting is provided. Users can sort the data by multiple columns through the ctrl or command key combination. (#570 )
  • Code

  // grid column option
  columns: [
    {
      name: 'alphabetA',
      header: 'alphabetA(desc)',
      minWidth: 150,
      sortable: true,
      sortingType: 'desc',
      editor: 'text'
    },
    {
      name: 'alphabetB',
      header: 'alphabetB(asc)',
      minWidth: 150,
      sortable: true,
      sortingType: 'asc',
      editor: 'text'
    },
    {
      name: 'alphabetC',
      header: 'alphabetC(desc)',
      minWidth: 150,
      sortable: true,
      sortingType: 'desc',
      editor: 'text'
    }
  ]
  

Enhancement

• Performance
  • The initial rendering performance has improved tremendously as making the grid data lazy observable. (#576 )
  • Slowing down with many data or tree data when scrolling has improved. (#569 )

Documents

• Updated that Korean and English tutorials.
  • Korean
  • English

Bugfixes

• Fixed that calculating column width when resizes the specific column. (#516 )
• Fixed that wrong left position of the editing layer. (#518 )
• Fixed that changing wrong selection, focus and clipboard area with row headers. (#517 )
• Fixed that calculating row span in case the specific row has multi row span. (#520 )
• Apply GA option to TOAST UI dependencies. (#522 )

Features

• Added finishEditing instance method for destroying the editing layer. (#509 )
  • API
• Added sortingType option for changing initial sort order. (#525 )

Specification Change

• Editing layer
  • Users need to destroy the custom editor by calling the specific method. Sometimes, they have to select or modify editor's value thorough their custom layer created outside our custom editor area.
    For example, element ui date-picker is that case. Due to date-picker dropdown attached document as an another root element, cannot modify the editing grid value. Because editing layer would be destroyed when mousedown event emitted outside editing area(based DOM element). So we will provide finishEditing method and the editing layer is only destroyed by changing the focused cell. (#480 )

Documents

• Updated that Korean and English tutorials.
  • Korean
  • English
• Updated that examples.
  • Examples

Bugfixes

• Fixed that scroll sticking with header selection. (#484 )
• Added global jquery to commonJS. (#490 )
• Fixed that column resizable option is not applicable. (#491 )
• Fixed that expanded, collapsed event. (#506 )
• Apply GA option to TOAST UI dependencies. (#528 )

Features

• Added sortingType option for changing initial sort order. (#494 )

Bugfixes

• Fixed that when clicks the sort button, button class is not updated. (#468 )
• Fixed that the editing layer is not destroyed when removes the row includes an edting layer. (#486 )
• Fixed that the summary data does not changed for updating the reactive row data. (#496 )
• Added missing minRowHeight option. (#501 )
• Fixed that miscalculate the position for the focus layer in case either scrollX or scrollY option is false. (#518 )

Bugfixes

• Fixed that the constructor type is added in type definition file. (#475 )

Bugfixes

• Fixed that content-type typo in gridAjax. (#471 )
• Fixed that files field option for publishing in package.json. (#474 )
  • remove src directory.
  • add index.d.ts type definition.

Bugfixes

• Fixed that the last row height is incorrect when deleting rows and setting the rowHeight option.

New TOAST UI Grid🎉🎉🎉

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

New JS Environment Requirements

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

Features

• The Cell Editor has been enhanced.
  • Users can customize the editing UI to meet their taste through the Custom Editor format.
  • The dataPicker can be used through setting editor options.
  • The cell editor options have been more simple and convenient to use.
  • TOAST UI Grid still provides the powerful original editor formats (text, password, checkbox, radio, and select)
• The Cell Renderer has been enhanced.
  • TOAST UI Grid provides more powerful abstraction than formatter option.
  • Users can customize the cell UI to meet their own requirements through the Custom Renderer format.
  • The renderer options have been added to set your own Custom Renderer
• The Data Source has been added.
  • The DataSource is a concept that has completely replaced the previous Net
  • You can communicate to the Backend API through the DataSource more conveniently.
  • The DataSource is much more efficient in dealing with data insertion, manipulation, and deletion internally.
  • Usages and APIs have been updated to be more intuitive.

Breaking Changes

• The title or head are replaced with the header. So that, the option of the column, rowHeader and theme is modified. See the detail here.
• 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 options can be used. See the specification for more information.
• The _extraData option has been renamed as _attribute. See the detail here.
• The callback funtion of column relations paramter has been changed. The changed parameter type is written here.
• Customizing the row headers is changed for providing the more diverse format. See the more information.
• The event object of the tree has been changed. See the detail here.
• A few grid instance method names have been changed.

Deprecated features

• Removed the Net.
• Removed the columns[].prefix / columns[].postfix.
• Removed the columns[].component.
• Removed the toJSON parameter.
• Removed the tree event.

API Document

• https://nhn.github.io/tui.grid/latest

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.

TypeScript

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[ ]

editOptions

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.

editOptions.listItem

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

editOptions.useViewMode

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.

Features

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

Methods

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

Options

• 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!

Features

• Added setHeader() API (#326)

Fixed

• Add string type of the rowHeaders option (#322)

Features

• Added setColumnTitles() API

Fixed

• after showColumn(), hideColumn() (#290)
• Native Keyboard UI pops up when selecting cells in Mobile web (#266)

Changed

• Changed TypeScript export style to default export

Fixed

• Unexpected change of fixedHeight (#269, #274)

Features

• Added getSummaryValue() API (#257)
• Added summary.defaultContent options (#252)
• Added object type support for setSummaryColumnContent() (#252)
• Added string type support for summary.columnContent options (#252)

Fixed

• Use checkedOnly options of net.request() only when button column exists (#231)
• Prevent dragmove when mouse button is not pressed (#253)
• addCellClassName(), removeCellClassName() does not work (#255)
• validation.dataType does not work (#203)

New

• Added the bundle file including jQuery + backbone + underscore that named tui-grid.full.js on dist folder. (Use it only if you need to use a different version of jQuery together)
• Added the declaration file(./index.d.ts) for TypeScript support.

Updated

• Update tui-code-snippet version to 1.5.0 for improving Google Analytics.