tui.grid

Features

• Added i18n language support. (PT, NL) (#1665, #1680)

BugFixes

• Fixed an issue that text truncates when column width is auto (#1673)
• Fixed an issue where the context menu goes out of the viewport (#1682)
• Fixed an issue where data was truncated when pasting more rows than the number of rows in the grid (fix #1635) (#1685)

Features

• Add removeRows API (#1658)

  grid.removeRows(rowKeys: RowKey[]): void
  

BugFixes

• Fixed an issue where row span using the row span attribute option would unravel when editing a cell (#1662)
• Fixed an issue where appended data was not appended to createdRows in modefiedData when using the appendRows API (#1657)

Features

• Added feature to reset auto-sizing column widths in resetColumnWidths.

  • To refresh an auto-width column without setting the column width to a specific width, call the resetColumnWidths API without arguments.

• Added the feature that is instant applying of built-in editor.

  • It works only for built-in select, checkbox(radio), datePicker editor.
  • For use this, pass the instantApply option to true in property of options of editor of column.
  • If use it, apply new value by clicking a new value in the dropdown layer of built-in editor.

    const grid = new tui.Grid({
      columns: [
        {
          // ...
          editor: {
            type: 'select',
            options: {
              listItems: /* ... */,
              instantApply: true
            }
          }
        },
      ]
    });
    

  • Before use it
    
  • After use it
    

Bugfixes

• Fixed an error where the dynamic row span did not work properly when scrolling.
• Fixed an issue that occurs an error when finished editing by clicking the other side.

Bugfixes

• Fixed that destroyed the editor before editing was finished

Features

• Added option to set tree grid indent width (#1538)

  const grid = new tui.Grid({
  // ...
  treeColumnOptions: {
    // ...
    indentWidth: 50
    },
  // ...
  });
  

• Added APIs that return added class names (#1561)
  Column

  getColumnClassNames(columnName: string): string[]
  

  Row

  getRowClassNames(rowKey: number | string): string[]
  

  Cell

  getCellClassNames(rowKey: number | string, columnName: string): string[]
  

  In the case of a cell, the class name added to the column and row to which the cell corresponds is also returned.
  In the case of a column, only the class names added to the column in all rows are returned.

Bugfixes

• Fixed that where the summary calculated incorrectly when using the keyboard (#1536)
• Fixed that where dropdown layer in the editor did not move when scrolling (#1542)
• Fixed that dropdown layer in the editor not disappearing (#1545)
• Fixed to the validation works when only data modified (#1559)

Documents

• Corrected incorrect default values for options (fix #1449) (#1503)
• Fixed an issue where options were passed incorrectly in the filter example (fix #1452) (#1502)

Features

• Added feature to export filtered data (fix #1459) (#1513)

  getFilteredData():
  

• Added feature to click consecutive row checkboxes with Shift + Click (#1512)
  
• Added feature to disable context menu (fix #1432) (#1515
  • If disable the context menu, the browser default context menu appears when right-click.

  const grid = Grid({
    // ...
    contextMenu: null
    // ...
  });
  

  
• Added feature to column drag and drop (fix #1483) (#1523)
  • Click the column header what want to move and drag it to the grid body to start column D&D.
  • When start a column dnd, a floating layer for that column header is created in the header area.
  • If there is complex columns or a hidden column, the column D&D is disabled.
  • If the column to be moved or the column of the destination is a row header column or a tree column, column D&D cannot be performed.

  const grid = new tui.Grid({
    // ...
    draggable: true,
    // ...
  });
  

  • Column D&D
    
  • Row header column D&D
    
  • Tree column D&D
    
• Added API to return specific column model (#1531)

  getColumn(columnName: string): ColumnInfo | null;
  

• Added feature to enable/disable specific cell (#1530)
  • If that the cell is in a row number or draggable column, It is not work.

  disableCell(rowKey: RowKey, columnName: string): void
  enableCell(rowKey: RowKey, columnName: string): void
  

  • Disable cell
    
  • Enable cell
    
• Added feature that dynamic rowspan (#1535)
  • Can apply a dynamic rowspan to a column by passing an option in the form below.

  const grid = new Grid({
    // ...,
    columns: [
        {
          header: 'Name',
          name: 'name',
          rowSpan: true
        },
        {
          header: 'Artist',
          name: 'artist',
          rowSpan: true
        }
      ],
    // ...
  });
  

  • Default
    • Row span is applied to the selected column when creating the grid.
  • Filter
    • When applying a filter, the row span is reapplied to the changed data.
      
  • D&D
    • Reset all row spans at the start of dragging, and then reapplys the rowspans when dropping.
      
  • Sort
    • Reapplies rowspan to changed data when sorting.
      
  • Pagination
    • If the pages are different, a separate rowspan is applied even if the subsequent values are the same.
      
  • Edit
    • If the cell value changes, the row span is reapplied accordingly.
    • If you change the cell value to which the rowspan is applied, only the cell value of the top row among the rows bounded by the rowspan is changed.
      
  • Realtion columns
    • Dynamic rowspan is not applied to sub-columns except for the column in the top-level relation within the column relation.
  • Tree
    • For tree data, row span is not applied.

Bugfixes

• Fixed a problem that was submitted when a button in the grid inside the Form element was clicked (fix #1528) #1529

Bugfixes

• Fixed to allow exporting as formatted values (#1499)
• Fixed to export in UTF-8 format when exporting csv (fix #1495) (#1501)
• Fixed a script error that occurred in incognito mode (fix #1450) (#1500)

Documents

• Corrected incorrect default values for options (fix #1449) (#1503)
• Fixed an issue where options were passed incorrectly in the filter example (fix #1452) (#1502)

Bugfixes

• Fixed that the floatingRow shows incompletely for multiple rows (#1477)
• Fixed that to disable context menu on dummy cells (fix #1463) (#1490)
• Fixed that the wrong rowHeight after DnD (fix #1438) (#1489)
• Fixed that the editing occurs error after filter (fix #1456) (#1487)
• Fixed that incorrect type definition (#1494)
• Fixed that the tree button not to submit (fix #1476) (#1492)
• Fixed that to remove editing layer when filter button clicked (#1493)

Bugfixes

• Fixed that the grid body is hidden after resizing the grid.(#1475)
• Fixed that the wrong tree rowKey is generated in case of multi grid instance.(#1478)

Bugfixes

Fixed wrong external dependency module(SheetJS) name.(#1467)

Features

• Added exporting to csv or excel feature.(#1465)

exportData(format: 'csv' | 'xlsx', exportOpt?: ExportOpt)

with default context menu

with custom context menu

const grid = new tui.Grid({
  //...
  contextMenu: ({ rowKey, columnName }) => (
    [
      [
        {
          name: 'export',
          label: 'Export',
          subMenu: [
            {
              name: 'default',
              label: 'Default',
              subMenu: [
                {
                  name: 'csvExport',
                  label: 'CSV export',
                  action: () => {
                  grid.export('csv');
                  }
                },
                {
                  name: 'excelExport',
                  label: 'Excel export',
                  action: () => {
                    grid.export('xlsx');
                  }
                },
              ]
            },
            {
              name: 'includeHeader',
              label: 'includeHeader: false',
              subMenu: [
                {
                  name: 'csvExport',
                  label: 'CSV export',
                  action: () => {
                    grid.export('csv', { includeHeader: false });
                  }
                },
                {
                  name: 'excelExport',
                  label: 'Excel export',
                  action: () => {
                    grid.export('xlsx', { includeHeader: false });
                  }
                },
              ]
            },
            {
              name: 'colunmNames',
              label: `['name', 'artist']`,
              subMenu: [
                {
                  name: 'csvExport',
                  label: 'CSV export',
                  action: () => {
                    grid.export('csv', { columnNames: ['name', 'artist'] });
                  }
                },
                {
                  name: 'excelExport',
                  label: 'Excel export',
                  action: () => {
                    grid.export('xlsx', { columnNames: ['name', 'artist'] });
                  }
                },
              ]
            },
            {
              name: 'onlySelected',
              label: 'onlySelected: true',
              subMenu: [
                {
                  name: 'csvExport',
                  label: 'CSV export',
                  action: () => {
                    grid.export('csv', { onlySelected: true });
                  }
                },
                {
                  name: 'excelExport',
                  label: 'Excel export',
                  action: () => {
                    grid.export('xlsx', { onlySelected: true });
                  }
                },
              ]
            },
          ],
        }
      ],
    ]
  ),
});

Bugfixes

• Fixed the filter layer appearing in the wrong place when clicking on another column (#1451)
• Fixed not being able to select cells after calling appendRows() API (#1448)

Bugfixes

• Fixed infinite loop when appending the tree row.(#1431)

Features

• Added context menu feature.(#1408)

const grid =tui.Grid({
  // ...
  contextMenu:  () => [
    [
      {
        name: 'id1',
        label: 'menu1',
        action: 'copyRows',
        classNames: ['my']
      },
      {
        name: 'id2',
        label: 'menu2',
        action: () => {
          console.log('menu2');
        },
        subMenu: [
          {
            name: 'id3',
            label: 'subMenu1',
          },
        ],
      },
    ],
    [
      {
        name: 'id4',
        label: 'menu3',
        action: () => {
          console.log('menu3');
        }
      },
    ],
  ],
  // ...
});

default context menu

• Added keydown custom event. (Does not occur during editing)

grid.on('keydown', (ev) => { console.log(ev); });

Bugfixes

• Fixed that the row height was adjusted incorrectly when the column are added dynamically.
• Fixed the error occurs when pasting more data than visible rows in the grid.

Bug Fixes

• Fixed drop event property (#1375)

Bugfixes

• Fixed that cannot move tree node to last when last node has children.(#1371)
• Fixed that cannot paste the data in chrome.(#1372)

Bugfixes

• Added appended property to drag event.(#1352)
• Fixed the script error in IE11 when checking filtered value.(#1356)

Features

• Added drag and drop functionality to change the order between rows.(#1314)

const grid = new Grid({
  data,
  // enable D&D functionality
  draggable: true,
});

• normal data
  

• tree data
  

• Custom event

  • dragStart: Drag to start the movement of the row(only occurs if the draggable option is enabled).
    • rowKey: The rowKey of the row to drag.
    • floatingRow: The floating row DOM element.
  • drag: Dragging to move row(only occurs if the draggable option is enabled).
    • rowKey: The rowKey of the row to drag.
    • targetRowKey: The rowKey of the row at current dragging position.
  • drop: When the drag is over and the row movement is complete(only occurs if the draggable option is enabled).
    • rowKey: The rowKey of the row to drag.
    • targetRowKey: The rowKey of the row at current dragging position.
    • appended: Whether the row is appended to other row as the child in tree data.

• moveRow API
  Although the existing moveRow API worked only on normal data, it also works on tree data after v4.17.0.

  // This option for only tree data. Whether the row is appended to other row as the child.
  interface OptMoveRow {
    appended?: boolean
  }
  public moveRow(rowKey: RowKey, targetIndex: number, options: OptMoveRow): void;
  

• The tutorial for D&D functionality will be added soon :)

Enhancement

• Added setPerPage API option to send additional parameters. Thanks to @LEE-YANG-JAE.(#1249)

public setPerPage(perPage: number, data?: Params) {
  // ...
}

Bugfixes

• Added missing type definition oneTimeBindingProps in react wrapper. Thanks to @juliencampion .(#1263)
• Fixed that the data is always encoded when copying the cell data.(#1310)
• Fixed that dummy cells are not displayed at the farthest right in scroll-x.(#1312)
• Set the max-height to select box, check box editor for convenience of the user.(#1322)
• Fixed script errors when the cell value is not in listItemText formatter option.(#1326)
• Added i18n for filter select option.(#1325)
• Fixed that empty values are not displayed properly in select filter. Thanks to @ryum91.(#1267)
• Fixed that the filter layer is hidden when window.innerWidth is smaller than the left position of the filter layer.(#1327)
• Fixed script error when copying unobservable rows.(#1329)

Features

• Added styles, attributes, classNames for default renderer. Users can configure styles, attributes, classNames options to apply some styles or attributes in default renderer.(#1242)

const columns = [
  {
    name: 'name',
    renderer: {
      styles: {
        fontWeight: '500',
      },
      attributes: {
        myCustom: 'my-custom',
        title: (props: CellRendererProps) => `my ${props.value}`,
      },
      classNames: ['my-class'],
    },
  },
];
const grid = new Grid({
  columns, 
  // ...
})

tutorial(ko): https://github.com/nhn/tui.grid/blob/master/packages/toast-ui.grid/docs/ko/custom-renderer.md
tutorial(en): https://github.com/nhn/tui.grid/blob/master/packages/toast-ui.grid/docs/en/custom-renderer.md

Bugfixes

• Fixed that tui-pagination options cannot be applied to grid through configuring page options.(#1239)
• Fixed that display the hidden child nodes after editing the tree.(#1241)

Chore

• Removed jquery dependency of tui-pagination, tui-date-picker through updating their versions.

Enhancement

• Improved the performance of check, uncheck API through using async batch.(#1226)
• Added title attribute in default renderer.(#1226)

Bugfixes

• Fixed the script error when removing the rows on scrolling the bottommost data.(#1221)
• The summary area has not been calculated when pasting the data.(#1222)
• The focus, selection, editing has not been operated with client pagination.(#1223)
• Freezing the browser when calling restore API with tree data.(#1224)
• Fixed that scrollEnd event has been triggered when calling clear API.(#1227)

Bugfixes

• Fixed getvalue API to return falsy value properly.(#1207)