v4.19.0

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)

v4.18.1

Bugfixes

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

v4.18.0

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.

v4.17.3

Bug Fixes

• Fixed drop event property (#1375)

v4.17.2

Bugfixes

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

v4.17.1

Bugfixes

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

v4.17.0

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)

v4.16.1

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.

v4.15.3

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)

v4.15.2

Bugfixes

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