Releases · nhn/tui.grid

31 Jan 02:15

js87zz

v4.9.0

7d0214d

v4.9.0

Features

DataSource has been a great improvement for convenient usability and supporting various ajax options.(#862) 💪💪💪
Let's take a quick look at the options.
- Added ajax option
  - contentType: option to define request body type
    - The support of application/json type is added!
  - headers: option to add headers
  - mimeType: option for parameter on calling overideMimeType function
  - serializer: option for custom serializer
- Added hideLoadingBar option to hide loading bar on communicating with server
- Added initParams to send user defined parameters to server when gets data
- Added url option type. the function type is allowed as url option to define RESTful URI
- Code
```
const dataSource = {
  hideLoadingBar: true,
  api: {
    readData: { 
      url: () => `/readData/${applicationId}`, 
      method: 'get',
      initParams: { param: 'param' }
    },
    createData: {
      url: '/createData/`, 
      method: 'post',
      contentType: 'application/json',
      headers: { 'x-custom-header': 'x-custom-header' }
    }
  },
  serializer(params) {
    // write your serializer
    return Qs.stringify(params);
  }
}
```
Added setRequestParams API.(#869)
- set common parameters to use for request through DataSource.
- Code
```
grid.setRequestParams({ param: 'param' })
```

Added clearModifiedData API.(#878)

clear the modified data which is returned by getModifiedRows API and used to communicate with server.

Code

// clear all modified data
grid.clearModifiedData();

// clear specific modified data
grid.clearModifiedData('CREATE');
// or
grid.clearModifiedData('UPDATE');
// or
grid.clearModifiedData('DELETE');

Added enableColumn, disableColumn API.(#888)

set the disabled state to cells of the specific column.

Code

// configure column `disabled`
const columns = [{ name: 'name' }, { name: 'age', disabled: true }];
new Grid({ data, column })

// or call API
grid.enableColumn('columnName');
grid.disableColumn('columnName');

Enhancement

Improved custom renderer config options for usability.(#850)

Code

 // before
 const columns: OptColumn[] = [
   {
     name: 'score',
     renderer: {
       type: SliderRenderer
     }
   }
 ];
 // after
 const columns: OptColumn[] = [
   {
     name: 'score',
     renderer: SliderRenderer
     // recommend using existing way in case of having `options` parameter
     renderer: {
       type: SliderRenderer,
       options: {...}
     }
   }
 ];

Added onGridUpdated custom event to detect updating of the grid data.(#867)

Bugfixes

Fixed that editing layer has been remained out of grid area on scrolling.(#853)
Fixed the internal comparator to sort clearly with mixed type(string, number) data.(#865)
Moved the scroll position automatically on calling focus, focusAtAPI.(#874)
Fixed that the one of the child column of complex header couldn't be hidden.(#876)
Fixed that scroll position cause the bug when calls resetData API.(#892)

CDN

tui-grid.js: https://uicdn.toast.com/grid/v4.9.0/tui-grid.js
tui-grid.min.js: https://uicdn.toast.com/grid/v4.9.0/tui-grid.min.js
tui-grid.css: https://uicdn.toast.com/grid/v4.9.0/tui-grid.css
tui-grid.min.css: https://uicdn.toast.com/grid/v4.9.0/tui-grid.min.css

Assets 2

30 Dec 09:22

js87zz

v4.8.1

18a10b3

v4.8.1

Bugfixes

Fixed clipboard bug in IE.(#839)
Fixed wrong order of check, uncheck custom events.(#840)
Fixed that grid data couldn't be sorted with applying filter condition to grid.(#841)
Removed dependence on the order of column definition in relation columns.(#846)
Grid data could be filtered with formatted value.(#849)
Fixed that grid height hasn't been updated after calling setPerPage API.(#852)

CDN

tui-grid.js: https://uicdn.toast.com/grid/v4.8.1/tui-grid.js
tui-grid.min.js: https://uicdn.toast.com/grid/v4.8.1/tui-grid.min.js
tui-grid.css: https://uicdn.toast.com/grid/v4.8.1/tui-grid.css
tui-grid.min.css: https://uicdn.toast.com/grid/v4.8.1/tui-grid.min.css

Assets 2

13 Dec 03:21

js87zz

v4.8.0

8e6c9cd

v4.8.0

Features

TOAST UI Grid v4.8.0 provides merged header functionality.(#792)
- Users can merge specific header columns for displaying the column data as an one header column
- Since the merge the header column, it affects range selection and some API.
  - As click the merged header column, the range of selection is extended by
    spanning count.
  - if you show or hide one of the merged columns through API, all merged columns are affected.
  - The operation(ex. selection, focus, editing) in the grid cell is not changed for usability. because only the column of header is spanned.
- The resizable option can be used with complex header.(#825)
- Code
```
const grid = new Grid({
  data,
  column,
  header: {
    height: 100,
    complexColumns: [
      {
        header: 'name',
        name: 'nameHeader',
        childNames: ['id', 'name'],
        resizable: true,          // resize the complex header or merged header through configuring this option
        hideChildHeaders: true    // merge the child headers through configuring this option
      }
    ]
  }
});
```
Added getSelectionRange API.(#798)
- gets Selection range
- Code
```
grid.getSelectionRange();
```

Bugfixes

Added missing render method in custom column header interface.(#818)
Changed filter text event type (onkeyup -> oninput) to solve malfunction on searching.(#827)
Changed validation css rule precedence to solve ignoring the css.(#828)
Removed key property caused side effect in filter select component.(#811)
- Thank you for @ryum91 👍
Fixed the data couldn't be filtered with applying pagination.(#833)
Fixed miscalculated border height with complex header.(#821)
Added calling beforeDestroy hook for custom renderer.(#822)

Enhancement

The test is classified into two tests like below.(#797, #810)
- visualization test
  - The purpose of this test verifies visualization of the grid element using the storybook.
  - An Individual story is test scenario classified by specific category.
- integration test
  - The purpose of this test verifies all functionality of the grid except visualization test target.
Added Monkey Patch Array.(#804)
- To remove duplicated code to notify the observer, Monkey Patch Array is applied. As the result, our unnecessary code is eliminated and code quality is improved.

Documentation

Added new tutorials
- filter(en)
- pagination(en)
- sort(en)
- custom column header(kor)
Added part in tutorials
- validation(en)
  - min, max option
  - regExp option
  - validateFn option
- custom event(en)
  - onBeforeChange
  - onAfterChange
  - onGridMounted
  - onGridBeforeDestroy
modified the broken link in tutorials

CDN

tui-grid.js: https://uicdn.toast.com/grid/v4.8.0/tui-grid.js
tui-grid.min.js: https://uicdn.toast.com/grid/v4.8.0/tui-grid.min.js
tui-grid.css: https://uicdn.toast.com/grid/v4.8.0/tui-grid.css
tui-grid.min.css: https://uicdn.toast.com/grid/v4.8.0/tui-grid.min.css

Assets 2

13 Nov 09:17

js87zz

v4.7.0

2771f5e

v4.7.0

Features

TOAST UI Grid v4.7.0 provides header customizing functionality.(#769)

The header column can be customized through configuring the header.columns option. The button, icon or any DOM element you want to render in header column can be grid header column.
To use this functionality, Pay attention to the following matters.
- Other column options are not applied on customized header column like sortable, filter options. Because grid cannot know where render the sort, filter button in your customized header.
- In case of making the functionality(sort, filter) which is able to use in default column header, It should be implemented in your customized header column using the grid API.

Code

class CustomRenderer {
  constructor(props) {
    const el = document.createElement('div');

    this.columnInfo = props.columnInfo;
    el.className = 'custom';
    el.textContent = `custom_${this.columnInfo.name}`;
    this.el = el;
  }

  getElement() {
    return this.el;
  }

  render(props) {
    // write your code to sync the column header state
  }

  beforeDestroy() {
    // do something
  }
}

const grid = new tui.Grid({
   data,
   columns, 
   header: {
     height: 100,
     columns: [
       {
         name: 'id',
         renderer: CustomRenderer // define your header custom renderer
       }
     ]
   }
});

The className option is provided for column.(#782)

It is possible to apply the specific class to column users wants through configuring the className option in column.

Code

const columns = [
  { name: 'name', className: 'custom-className' },
  { name: 'age' },
  { name: 'location' }
];
const grid = new tui.Grid({columns, ...});

Added setRow API.(#789)
- sets new data to the row identified by the specified rowKey.
- Code
```
grid.setRow('rowKey', { name: 'name', age: 10 });
```
Added moveRow API.(#791)
- moves the row identified by the specified rowKey to target index.
- Code
```
grid.moveRow('rowKey', 3);
```

Bugfixes

Added checking hidden column on calling filter, unfilter API.(#743)
Fixed the bug which has not been deleting the className(tui-grid-row-hover) when gets out of specific row.(#748)
Fixed that date format of filtering layer has been reset.(#752)
Added missing operator parameter on calling filter API.(#758)
Fixed that scroll bar has been created on selecting the end area of grid.(#773)
Fixed that editingFinish event has been not emitted with keyMap editing.(#774)
Captured focus on closing the datePicker editing layer.(#776)
Finished editing on clicking the header.(#777)
Calculated the height of row which has whitespace property accurately.(#778)
Fixed wrong example code in row header example(#794)

Enhancement

Added test for functionality of client pagination.(#738)

Provided summary values about both full and filtered data.(#745, #796)

Code

/* 
 * summaryValue
 * {
 *  sum, min, max, avg, cnt,
 *  filtered: {
 *    sum, min, max, avg, cnt
 *  }
 * }
 */
 template(summaryValues)ue{
   // ...
 }

Updated row number automatically as the specific row is removed or appended row.(#747)
Added probot to maintain our issue more effectively.(#758)

Simplified finishEditing API.

Code

// legacy
grid.finishEditing('rowKey', 'columnName');

// current 
grid.finishEditing(); // recommended

Applied batch update in our observable system to reduce the unnecessary process and improve the performance.(#785)
Changed the way of getting row index in each cell to improve performance.(#795)

CDN

tui-grid.js: https://uicdn.toast.com/grid/v4.7.0/tui-grid.js
tui-grid.min.js: https://uicdn.toast.com/grid/v4.7.0/tui-grid.min.js
tui-grid.css: https://uicdn.toast.com/grid/v4.7.0/tui-grid.css
tui-grid.min.css: https://uicdn.toast.com/grid/v4.7.0/tui-grid.min.css

Assets 2

15 Oct 03:28

js87zz

v4.6.1

0a74863

v4.6.1

Bugfixes

Fixed wrong isOddRow in bodyDummyRow component. (#716)
Prevented to emit mousedown, when event target is same as body area.(#723)
Fixed that the grid data is not changed on appending or removing row. (#724)
Fixed that JS error has been caused as clicked the complex column header. (#728)
Fixed wrong initial row header checkbox state. (#729)
Fixed wrong pagination logic in datasource. (#733)

Enhancement

Classified helper, query, dispatch layer internally. (#726)

Assets 2

08 Oct 02:00

js87zz

v4.6.0

2daf4d5

v4.6.0

Features

🎊TOAST UI Grid v4.6.0 provides Filter functionality🎊. (#676)

There are four built-in filters, which include text, number, select and date. The text, number, date filters can be used with 2 conditions in conjunction with the operator option. We will also provide a custom filter option in the next minor release for users who want to use their own filters.
Below is an example of simple usage. See the tutorial for details.

Code

const columns = [
  {
     name: 'name',
     minWidth: 150,
     filter: 'text'
  }
]

// or
const columns = [
  {
    name: 'name',
    minWidth: 150,
    filter: {
      type: 'date',
      options: {
        format: 'yyyy-mm',
        type: 'month'
      },
      operator: 'OR',
      showApplyBtn: true, // default false
      showClearBtn: true // default false
    }
   }
 ]

API
- filter
  - Reflect the filter results. This occurs only if the column has a filter option.
  - Code
```
grid.filter(columnName, state)
```
- unfilter
  - Clear the filtering applied to the column.
  - Code
```
grid.unfilter(columnName)
```
- getFilterState
  - get current filter state
  - Code
```
grid.getFilterState(columnName);
```
- setFilter
  - Set filter on columns.
  - Code
```
grid.setFilter(columnName, filterOpt);
```

Bugfixes

Changed onGridBeforeDestroyedevent naming to onGridBeforeDestroy. (#650)
Fixed that checkbox in rowheader is not changed on calling checkAll, uncheckAll API. (#663)
Added checking sortable property on calling sort, unsort API. (#680)
Added checking editable property on calling startEditing, finishEditing API. (#680)
Fixed the bug about sorting the numeric value. (#687)
Added checking the hidden property of column as edit the cell and sort the data. (#692)
Changed the paging count properly on calling setPerPage API. (#693)
Fixed that row hover style is not applied properly to the selection layer. (#698)
Fixed select the wrong selection area in client pagination. (#699)
Fixed numeric validation for string value. (#700)
Made synchronous rendering as start or finish editing. (#702)
- because the previous editing cell should be destroyed in case of calling finishEditing, startEditing API in a row.
- finishEditing API has been changed for undefined value parameter. As the value parameter is undefined, the editor's value is saved and finish editing.
Inserted the empty value for each column as append the empty row. (#707)
Fixed that JS error has been caused as clicked the area of grid after removing the row. (#709)

Enhancement

Improved the tree performance. (#665)
- Only the expanded children rows(excluding hidden rows) are converted to observable.
- The hidden children rows will be observable when expanded.
- The hierarchy tree data is not flattened when the data are supposed to be observable.
Enhanced the test case of related resetData, setColumns API for testing more complicated cases. (#681)

Added datepicker icon option. (#691)

Code

const columns = [
  {
    name: 'monthPicker',
    editor: {
      type: 'datePicker',
      options: {
        format: 'yyyy-MM',
        type: 'month',
        showIcon: false // default true
      }
    }
  }
];

Added tab keyMap operation and tabMode option. (#701)

Code

const { el, grid } = new Grid({
  //...
  tabMode: 'moveAndEdit'
});

Documentation

Added new tutorials
- pagination(kor)
- sort(kor)
- filter(kor)
Added new examples

Assets 2

06 Sep 03:12

js87zz

v4.5.2

10c78f4

v4.5.2

Bugfixes

Set selection to clipboard text for triggering copy event in IE browser. (#647 )
Fixed that the rowKey has been created as -Infinity when appends row on empty grid. (#651 )
Fixed el variable reference from EditingLayerInner component. (#655 )
Removed invalid quotes in css. (#656 )

Documents

Updated that Korean and English tutorials.
- Korean
- English

Assets 2

06 Sep 03:21

js87zz

v3.9.2

11c3932

v3.9.2

Bugfixes

Set selection to clipboard text for triggering copy event in IE browser. (#650 )

Assets 2

02 Sep 07:05

js87zz

v4.5.1

032248a

v4.5.1

Bugfixes

Changed that sortingType store props to local component props to prevent to access props when it has been unmounted. (#644 )

Assets 2

29 Aug 20:53

js87zz

v4.5.0

ac7a911

v4.5.0

Bugfixes

Fixed that the rowKey has been created in duplicate when appended row. (#630 )
Applied the option of summary to columns added by calling setColumns API. (#635 )
Removed the asynchronous operation internally for concurrency of data. (#636 )

Enhancement

Extended the functionality of validation. (#625 )

It's possible to validate min, max of number value.
Users can validate string value with the pattern of Regular Expression.
Custom validator function can be used to validate the value.
Code

const grid = new Grid({
  // ...options
  columns: [{ 
    // ...columns
    validation: {
      dataType: string | number,
      required: boolean,
      min: number,
      max: number,
      regExp: string,
      validatorFn: Function
    }
  }]
})

Features

TOAST UI Grid v4.5.0 provides Client Pagination. (#631 )
- Users can display the pagination data in grid using only client side data.
- Client Pagination is very useful to users who need to show their data on pagination format without communicating the backend API.
- Code
```
const grid = new Grid({
  data,
  column,
  pageOptions: {,
    // to use the client pagination, should set `true`
    useClient: true,
    // data count per page
    perPage: 10
  }
});
```

Assets 2

Releases: nhn/tui.grid

v4.9.0

Features

Enhancement

Bugfixes

CDN

Uh oh!

v4.8.1

Bugfixes

CDN

Uh oh!

v4.8.0

Features

Bugfixes

Enhancement

Documentation

CDN

Uh oh!

v4.7.0

Features

Bugfixes

Enhancement

CDN

Uh oh!

v4.6.1

Bugfixes

Enhancement

Uh oh!

v4.6.0

Features

Bugfixes

Enhancement

Documentation

Uh oh!

v4.5.2

Bugfixes

Documents

Uh oh!

v3.9.2

Bugfixes

Uh oh!

v4.5.1

Bugfixes

Uh oh!

v4.5.0

Bugfixes

Enhancement

Features

Uh oh!